Shadcn-ui codebase analysis: examples-nav.tsx explained
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?
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/
Email: [email protected]