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.
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.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.
Top comments (2)
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
Hey Nikola, thanks for your suggestion. I will consider it. 🙌