I wanted to find out how the below example nav is developed on ui.shadcn.com, so I looked at its source code. Because shadcn-ui is built using app router, the files I was interested in were page.tsx and examples-nav.tsx
In this article, we will find out the below items:
Where is the code related to the examples-nav?
Examples Nav code snippet.
Want to learn how to build shadcn-ui/ui from scratch? Check out 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.
Where is the code related to the examples-nav?
ExamplesNav is used in page.tsx as shown below
examples-nav.tsx has the code below.
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. This component uses examples array to show the nav tab elements.
About me:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com