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.

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

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: [e-mail]

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

Comments

[Nikola Perišić]

Hello Ramu Narasinga,
Great article. I just wanted to suggest that next time when you write code snippets you provide prettier formatting for them by using prefixes "js, php, bash" or something similar. If you are not sure how to do it just read this blog post. It will visually boost your post. Cheers

[Ramu Narasinga]

Hey Nikola, thanks for your suggestion. I will consider it. 🙌