DEV Community

Cover image for Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?
Ramu Narasinga
Ramu Narasinga

Posted on • Updated on

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>


Enter fullscreen mode Exit fullscreen mode

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



import { Announcement } from "@/components/announcement"
import {
PageActions,
PageHeader,
PageHeaderDescription,
PageHeaderHeading,
} from "@/components/page-header"

Enter fullscreen mode Exit fullscreen mode




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 }

Enter fullscreen mode Exit fullscreen mode




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.linkedin.com/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

Top comments (2)

Collapse
 
perisicnikola37 profile image
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

Collapse
 
ramunarasinga profile image
Ramu Narasinga

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