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:

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

2. Hero section code snippet.

3. PageHeader component.

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

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

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.dhirubhai.net/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/app/(app)/page.tsx