Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-06-04 20:50:16

I wanted to find out how the hero section is developed on [ui.shadcn.com](http://ui.shadcn.com), so I looked at its [source code](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx). Because shadcn-ui is built using app router, the files I was interested in were [Layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx) and [page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/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

![](https://media.licdn.com/dms/image/D4E12AQE09WHBRi1Z4Q/article-inline_image-shrink_1500_2232/0/1717533230706?e=1723075200&v=beta&t=xbFHnWRkREmrPCgxbOUAs6qqvCa5IpJwKJWbgrD5Krg)

2\. Hero section code snippet.

3\. PageHeader component.

> _Want to learn how to build shadcn-ui/ui from scratch?_ [_Sovle challenges_](https://tthroo.com/build-from-scratch) _to build shadcn-ui/ui from scratch. If you are stuck or need help?_ [_there is a solution_](https://tthroo.com/build-from-scratch)_. Check out_ [_build-from-scratch_](https://github.com/Ramu-Narasinga/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](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/page.tsx) in a route group named (app)

![](https://media.licdn.com/dms/image/D4E12AQGakRKqdnnHXw/article-inline_image-shrink_400_744/0/1717533232001?e=1723075200&v=beta&t=5WlL26gLaT70ZI5bvI76L_GrGZuW7rvzSNVp5bgj4xs)

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/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx](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](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/page.tsx)