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:
- 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>
)
}
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:
- https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx
- 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/mode-toggle.tsx#L15
- 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/mobile-nav.tsx#L16
Top comments (0)