DEV Community

Cover image for Shadcn/ui codebase analysis: site-header.tsx explained.
Ramu Narasinga
Ramu Narasinga

Posted on • Edited on

Shadcn/ui codebase analysis: site-header.tsx explained.

I wanted to find out how the header 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 Layout.tsx and 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?

2. Header code snippet

3. Components used in Header

Where is the code related to the header section?

layout.tsx has the code below

As you can see SiteHeader component is in AppLayout and site-header.tsx has the code related to header section.

Header code snippet

The code below is from 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>
  )
}
Enter fullscreen mode Exit fullscreen mode

MainNav component is responsible for the section below

MobileNav component is responsible for the section below

Command menu.tsx is responsible for the search functionality below

ModeToggle.tsx is responsible for the element shown below

Get free courses inspired by the best practices used in open source.

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

Learn the best practices used in open source.

References:

  1. 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
  3. 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
  5. https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx#L16

Top comments (0)