Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?

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.

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

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

Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?

Where is the code related to the hero section?

Hero section code snippet

PageHeader component.

Conclusion:

About me:

References: