Hero-3

hex-ui/hero-3

FreeBlock

A simple horizontally aligned hero section

Live preview

live · rendered by the registry

Rendered by hex-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://hexui.sh/r/hero-3.json

Source

registry/blocks/hero/hero-3/source/app/hero/page.tsxhexui.sh/r/hero-3.json

1import { SiteHeader } from "../../components/site-header"
2import { SiteHero } from "../../components/site-hero"
3 
4export default function Page() {
5    return (
6        <div className="flex px-6 py-4 w-full mx-auto max-w-7xl min-h-screen flex-col items-center">
7            <SiteHeader />
8            <SiteHero />
9        </div>
10    )
11}

What it pulls in

npm packages

lucide-react

Other registry items

button

Files it writes

registry/blocks/hero/hero-3/source/app/hero/page.tsx
registry/blocks/hero/hero-3/source/components/site-header.tsx
registry/blocks/hero/hero-3/source/components/site-hero.tsx
registry/blocks/hero/hero-3/source/components/waitlist-form.tsx

More from hex-ui

All 34 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Banner-1banner-1	hex-ui	Blocks	Free	1 dep · 2 files
Banner-2banner-2	hex-ui	Blocks	Free	1 dep · 2 files
Cta-1cta-1	hex-ui	Blocks	Free	1 dep · 2 files
Cta-2cta-2	hex-ui	Blocks	Free	1 dep · 2 files
Cta-3cta-3	hex-ui	Blocks	Free	1 dep · 2 files
Cta-4cta-4	hex-ui	Blocks	Free	1 dep · 2 files
Faq-1faq-1	hex-ui	Blocks	Free	no deps · 3 files
Faq-2faq-2	hex-ui	Blocks	Free	no deps · 3 files