Shadcn-ui codebase analysis: examples-nav.tsx explained

#javascript #nextjs #shadcnui #opensource

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.

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",

  },

]