Shadcn/ui codebase analysis: site-header.tsx explained.
Tags: javascript, nextjs, opensource, shadcnui
Published: 2024-06-05 21:15:44

I wanted to find out how the header 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/(app)/layout.tsx). Because shadcn-ui is built using app router, the files I was interested in were [Layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx) and [site-header.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx).

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

1.  Where is the code related to the header section shown in the image below?

![](https://media.licdn.com/dms/image/D4E12AQEYJd2DK06ZDQ/article-inline_image-shrink_1500_2232/0/1717621130496?e=1723075200&v=beta&t=p6VAfz3Jh5gIUJ_vgqUyXJp9ZQz3QSIJn2k2022WeGg)

2\. Header code snippet

3\. Components used in Header

> _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 header section?
------------------------------------------------

layout.tsx has the code below

![](https://media.licdn.com/dms/image/D4E12AQGNKlbra13gEg/article-inline_image-shrink_1500_2232/0/1717621131265?e=1723075200&v=beta&t=xwtWXHlFBHdXcbjB9o_Gc-trlk_2Q6MlDglasdpylvM)

As you can see SiteHeader component is in AppLayout and [site-header.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx#L14) has the code related to header section.

Header code snippet
-------------------

The code below is from [site-header.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx)

```
import Link from "next/link"
import { siteConfig } from "@/config/site"
import { cn } from "@/lib/utils"
import { CommandMenu } from "@/components/command-menu"
import { Icons } from "@/components/icons"
import { MainNav } from "@/components/main-nav"
import { MobileNav } from "@/components/mobile-nav"
import { ModeToggle } from "@/components/mode-toggle"
import { buttonVariants } from "@/registry/new-york/ui/button"
export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-\[backdrop-filter\]:bg-background/60">
      <div className="container flex h-14 max-w-screen-2xl items-center">
        <MainNav />
        <MobileNav />
        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          <div className="w-full flex-1 md:w-auto md:flex-none">
            <CommandMenu />
          </div>
          <nav className="flex items-center">
            <Link
              href={siteConfig.links.github}
              target="\_blank"
              rel="noreferrer"
            >
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.gitHub className="h-4 w-4" />
                <span className="sr-only">GitHub</span>
              </div>
            </Link>
            <Link
              href={siteConfig.links.twitter}
              target="\_blank"
              rel="noreferrer"
            >
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.twitter className="h-3 w-3 fill-current" />
                <span className="sr-only">Twitter</span>
              </div>
            </Link>
            <ModeToggle />
          </nav>
        </div>
      </div>
    </header>
  )
}
```

[MainNav component](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/dashboard/components/main-nav.tsx) is responsible for the section below

![](https://media.licdn.com/dms/image/D4E12AQGpJ_8qpe8ugA/article-inline_image-shrink_1500_2232/0/1717621130952?e=1723075200&v=beta&t=T7kPAhRQ9BxmXV5W2esFZ1DnpTffcbL93mp8zBhnoO0)

[MobileNav component](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx#L16) is responsible for the section below

![](https://media.licdn.com/dms/image/D4E12AQFlRqkk-NSi5g/article-inline_image-shrink_400_744/0/1717621131045?e=1723075200&v=beta&t=wZbj4DQKusl5M3fiLlVwkPKXJk25F4W-Vkt681JAj2w)

[Command menu.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/command-menu.tsx#L28) is responsible for the search functionality below

![](https://media.licdn.com/dms/image/D4E12AQFq2qh31ZflwQ/article-inline_image-shrink_1500_2232/0/1717621131075?e=1723075200&v=beta&t=-B442XzKSFl-0XNNxdf9AVqCBawpY_lHJy6gWExHCb8)

[ModeToggle.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mode-toggle.tsx#L15) is responsible for the element shown below

![](https://media.licdn.com/dms/image/D4E12AQFxEWe1jl6ThA/article-inline_image-shrink_1500_2232/0/1717621130451?e=1723075200&v=beta&t=uqVlH8pV9GI1zWmmmPtBClpGuV3FWiVHQRyP0eL04zk)

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)/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx)
2.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx)
3.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mode-toggle.tsx#L15](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mode-toggle.tsx#L15)
4.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/main-nav.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/main-nav.tsx)
5.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx#L16](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx#L16)