Shadcn-ui codebase analysis: How is the hero section built

I wanted to find out how the hero section 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 page.tsx.

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

Where is the code related to the hero section shown in the image below

2. Hero section code snippet.

3. PageHeader component.

Want to learn how to build shadcn-ui/ui from scratch? Sovle challenges to build shadcn-ui/ui from scratch. If you are stuck or need help? there is a solution. Check out build-from-scratch and give it a star if you like it.

Where is the code related to the hero section?

Hero section code is in page.tsx in a route group named (app)

Hero section code snippet

<PageHeader>

<Announcement />

<PageHeaderHeading>Build your component library</PageHeaderHeading>

<PageHeaderDescription>

Beautifully designed components that you can copy and paste into your

apps. Accessible. Customizable. Open Source.

</PageHeaderDescription>

<PageActions>

<Link href=”/docs” className={cn(buttonVariants())}>

Get Started

</Link>

<Link

target=”_blank”

rel=”noreferrer”

href={siteConfig.links.github}

className={cn(buttonVariants({ variant: “outline” }))}

>

<Icons.gitHub className=”mr-2 h-4 w-4″ />

GitHub

</Link>

</PageActions>

</PageHeader>

PageHeader, Announcement, PageHeaderHeading, PageHeaderDescription, PageActions are imported as shown below

import { Announcement } from “@/components/announcement”

import {

PageActions,

PageHeader,

PageHeaderDescription,

PageHeaderHeading,

} from “@/components/page-header”

PageHeader component.

PageHeader is more like a wrapper for h1 for heading, Balance (more on this one in some other article) for description etc.,

import Balance from “react-wrap-balancer”

import { cn } from “@/lib/utils”

function PageHeader({
className,
children,
…props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<section
className={cn(
“mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20”,
className
)}
{…props}
>
{children}
</section>
)
}

function PageHeaderHeading({
className,
…props
}: React.HTMLAttributes<HTMLHeadingElement>) {
return (
<h1
className={cn(
“text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]”,
className
)}
{…props}
/>
)
}

function PageHeaderDescription({
className,
…props
}: React.HTMLAttributes<HTMLParagraphElement>) {
return (
<Balance
className={cn(
“max-w-[750px] text-center text-lg font-light text-foreground”,
className
)}
{…props}
/>
)
}

function PageActions({
className,
…props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn(
“flex w-full items-center justify-center space-x-4 py-4 md:pb-10”,
className
)}
{…props}
/>
)
}

export { PageHeader, PageHeaderHeading, PageHeaderDescription, PageActions }

Conclusion:

Shadcn-ui website’s hero section code is found in page.tsx and this code uses page-header.tsx components such as PageHeaderHeading, PageHeaderDescription, PageHeaderActions etc.,