> For the complete documentation index, see [llms.txt](https://koii-network.gitbook.io/getting-started/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koii-network.gitbook.io/getting-started/build-dapps-with-koii/template-library/leaderboard-app/basic-setup.md).

# Basic Setup

The most basic functions needed to create a leaderboard page

#### Import the Leaderboard widget

First of all import the `<Leaderboard/>` widget and use it inside any React component.

```
Import Leaderboard from components/widgets;

export function Home() {
  return (
    <div>
        <Leaderboard />
    </div>
  );
}
```

#### Customize the Leaderboard widget

Head to the [**leaderboard**](https://github.com/koii-network/koii.X/blob/main/src/components/widgets/Leaderboard/index.tsx) widget for further customization.

```
import { Box, Flex, Heading, Stack } from "@chakra-ui/react";
import { TimeFilter, NsfwFilter } from "components/filters";
import { TopNftsContent } from "components/widgets";

export function Leaderboard() {
  return (
    <Box color="blue.500" bg="gray.50" rounded="sm" p="2">
      {/* Header */}
      <Flex align="center" justify="space-between" mb="4">
        <Heading size="lg">Top content</Heading>
        <Stack>
          {/* Filters */}
          <TimeFilter />
          <NsfwFilter />
          {/* Nfts */}
        </Stack>
      </Flex>
      <TopNftsContent />
    </Box>
  );
}
```

If you want to, you can remove the `<TimeFilter/>` and the `<NsfwFilter />` filters from your leaderboard. To customize the NFT grid shown [**here**](https://koii-x.vercel.app/) open the `<TopNftsContent/>` widget.