A full landing hero: eyebrow pill, headline with a highlighted word, subtitle, two pill buttons, trust items and a framed panel for a screenshot or demo.
Now in public beta
A fast, opinionated toolkit for designing, building and shipping polished product experiences, without the busywork.
npx shadcn@latest add https://hyperblur.dev/r/hero-section.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-section.tsx.
import { HeroSection } from "@/components/hyperblur/hero-section"
<HeroSection title="Build faster" highlight="faster" primary={{ label: "Get started", href: "/signup" }}><img src="/app.png" alt="" /></HeroSection>| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Now in public beta" | Small pill above the headline. Empty string hides it. |
| title | string | "Ship interfaces that feel alive" | Headline text. |
| highlight | string | "alive" | Word or phrase inside title that gets the accent gradient. |
| subtitle | string | sample text | Supporting paragraph under the headline. |
| primary | { label: string; href: string } | null | { label: "Start building", href: "#" } | Primary pill button. Pass null to hide it. |
| secondary | { label: string; href: string } | null | { label: "Book a demo", href: "#" } | Secondary outline pill button. Pass null to hide it. |
| trust | string[] | ["No credit card", "Cancel anytime", "Free for 14 days"] | Small check-marked items under the buttons. Empty array hides the row. |
| accent | string | "#2f7bff" | Accent color for the highlight, primary button and glow. |
| align | "left" | "center" | "center" | Text and button alignment. |
| children | ReactNode | Rendered inside the framed panel below the hero, such as a screenshot or a live demo. |