Shadcn-ui codebase analysis: examples-nav.tsx explained
Tags: javascript, nextjs, shadcnui, opensource
Published: 2024-06-06 20:03:47

I wanted to find out how the below example nav is developed on [ui.shadcn.com](http://ui.shadcn.com), so I looked at its [source code](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/%28app%29/layout.tsx). Because shadcn-ui is built using app router, the files I was interested in were [page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/%28app%29/page.tsx) and [examples-nav.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/examples-nav.tsx#L55)

![](https://media.licdn.com/dms/image/D4E12AQFLeqXeuvZE6g/article-inline_image-shrink_1500_2232/0/1717703784609?e=1723075200&v=beta&t=bNxMqPNOTZlNH-vxm076fIJ8UppF0ud-dSBPDpSnqys)

In this article, we will find out the below items:

1.  Where is the code related to the examples-nav?
2.  Examples Nav code snippet.

> Want to learn how to build shadcn-ui/ui from scratch? Check out [build-from-scratch](https://github.com/Ramu-Narasinga/build-from-scratch) and give it a star if you like it. Sovle challenges to build shadcn-ui/ui from scratch. If you are stuck or need help? [solution is available](https://tthroo.com/build-from-scratch).

### Where is the code related to the examples-nav?

ExamplesNav is used in [page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/%28app%29/page.tsx#L43) as shown below

![](https://media.licdn.com/dms/image/D4E12AQELdNMyOBbFfg/article-inline_image-shrink_1000_1488/0/1717703786354?e=1723075200&v=beta&t=lhKzqhOn21PjBcc4NOkrwDr_pQAeDBk1ac5bVbifcqY)

[examples-nav.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/examples-nav.tsx#L55) has the code below.

![](https://media.licdn.com/dms/image/D4E12AQFgMDfPItR6lA/article-inline_image-shrink_1000_1488/0/1717703786370?e=1723075200&v=beta&t=IXkSNNGkcrERFU850oI6qKmDrYmky84WcASDccFojHU)

examples is an array containing the code below:

```
const examples = \[
  {
    name: "Mail",
    href: "/examples/mail",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
  },
  {
    name: "Dashboard",
    href: "/examples/dashboard",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
  },
  {
    name: "Cards",
    href: "/examples/cards",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
  },
  {
    name: "Tasks",
    href: "/examples/tasks",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
  },
  {
    name: "Playground",
    href: "/examples/playground",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
  },
  {
    name: "Forms",
    href: "/examples/forms",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
  },
  {
    name: "Music",
    href: "/examples/music",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
  },
  {
    name: "Authentication",
    href: "/examples/authentication",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
  },
\]
```

### Conclusion:

ExamplesNav component is used to show the examples nav element on the [ui.shadcn.com](http://ui.shadcn.com). This component uses examples array to show the nav tab elements.

### About me:

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

### References:

1.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/page.tsx)
2.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/examples-nav.tsx#L55](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/examples-nav.tsx#L55)
3.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/page-header.tsx#L5](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/page-header.tsx#L5)