Hero section
Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.
pnpm dlx shadcn@latest add @uiarc/hero-section- The first section of a SaaS landing page, when the product screen is the pitch (Screenshot).
- Developer tools, automation, and infrastructure products, where showing the product working is the pitch (Workflow).
- A launch or download page that wants one confident line and a sense of atmosphere (Mesh).
- Use page-header for titles inside app screens.
- Use hero-signup when the goal is collecting an email in the first section.
Installation
Add Hero section with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/hero-sectionAdds the block and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this as the first section of a landing page and replace the sample copy and data with your own. Events in the workflow preview are simulated.
import { HeroSection } from "@/components/arc/blocks/hero-section/hero-section"; export function Hero() { return ( <HeroSection variant="centered" primaryAction={{ label: "Start free trial", href: "/sign-up" }} secondaryAction={{ label: "Book a demo", href: "/demo" }} /> );}API reference
6 parts. The first is the root.
HeroSection
A SaaS landing hero in three designs, each exactly one full screen (100svh) and edge to edge. `centered` (Screenshot) sets a headline over a drifting mesh gradient that fills the screen, with a live revenue dashboard rising from the bottom edge: the window settles from a tilt as it enters and runs off the screen into a fade. `split` (Workflow) puts the copy beside a live workflow graph on a dotted canvas: sample Stripe events run node by node, data draws along each edge, the branch decides which actions run, and every step reports its time. `minimal` (Mesh) is large editorial type over a full mesh gradient with grain, with customer marks along the bottom edge. Pass `title` to render your own content in any layout instead.
variant"centered" | "split" | "minimal""centered"Which design to render.animateInbooleantruePlays the entrance once on mount.primaryActionHeroAction | null–The main call to action: { label, href?, onClick?, external?, doneLabel? }. With href it renders a link; without, a button that shows `doneLabel` for a moment after a press.secondaryActionHeroAction | null–The second call to action, same shape.titlestring–Your own headline. When set, the hero renders your content (HeroContent) in the chosen layout.descriptionstring–Your own content: one or two sentences under the title.announcementHeroAction | null–Your own content: a short link above the title for real news.install{ label: string; command: string }[] | null–Your own content: the first command is shown with a copy button.mediaReactNode–Your own content: a visual beside the copy in the split layout.metastring[]–Your own content: small facts under the actions.classNamestring–Extra class on the section.HeroLumen
The Screenshot design on its own. The dashboard is real markup built from Arc LineChart, Sparkline, SegmentedControl, and Avatar; its range control changes every figure on screen, and the chart can be scrubbed.
primaryActionHeroAction{ label: "Start free trial", doneLabel: "Trial started" }The main call to action.secondaryActionHeroAction{ label: "Book a demo" }The second call to action.HeroRelay
The Workflow design on its own: a Relay workflow (Stripe invoice paid, HubSpot lookup, an amount branch, then Slack, Linear, and warehouse actions) that runs sample events on its own while on screen. Send test event runs the next sample at once; a small invoice skips the Slack and Linear steps.
primaryActionHeroAction{ label: "Start building", doneLabel: "Workspace created" }The main call to action.secondaryActionHeroAction{ label: "Read the docs" }The second call to action.HeroCadence
The Mesh design on its own: type over a mesh gradient, and customer marks drawn in the text color.
primaryActionHeroAction{ label: "Download for Mac" }The main call to action.HeroMesh
The background renderer: a lean, non-editing version of the Gradient mesh. Points use the editor's model (x, y, spread); colors come from the CSS variables `--mesh-base` and `--mesh-1` onward, so each theme authors its own palette.
points{ x: number; y: number; spread: number }[]–Up to eight points, bottom to top.grainnumber0.35Film grain, 0 to 1.speednumber1Drift speed; 1 loops every 20 seconds, 0 holds still.HeroSectionBlock
Default export: the hero full screen with a small glass design switch floating over its top edge; switching replays the entrance.
variantHeroSectionVariant"centered"Initial design.- Each design has one h1, and the calls to action are real links or buttons with visible text.
- The dashboard is a labelled group of sample data; its range control is a segmented control and the chart keeps its screen reader table.
- The workflow graph is a labelled group; each step's state has a text label (waiting, running, done, skipped) and its result is written out, never shown by color alone.
- The mesh and glow are decorative and hidden from assistive technology. Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring.
- Screenshot: the copy rises in reading order, then the window rises in behind it and settles flat from a tilt.
- Workflow: each step turns to the accent while it runs, the data draws along the edge to the next one, and the result and time swap in with a small spring. The run pauses while the hero is off screen or the tab is hidden.
- Mesh: the gradient drifts on the Gradient mesh editor's seamless 20 second loop.
- Reduced motion removes every transform: no rise or tilt, the mesh draws one still frame, content fades in briefly, and the workflow shows each event as its finished run without playing; Send test event moves to the next one at once.
- Every design is one full screen (100svh, full width) on desktop and phones. Container queries: the split layout stacks below 900px; below 560px padding tightens and actions fill the width.
- The dashboard and the workflow graph are drawn at a fixed design size and scaled like a screenshot. The dashboard switches to a compact layout without the sidebar under 720px and runs off the bottom edge into a fade; the graph switches to compact action nodes on phones.
- On phones the logo row of the Mesh design becomes a grid.
- One WebGL canvas at most per hero, drawn at one pixel per CSS pixel and thirty frames a second, only while on screen and the tab is visible. A static CSS render of the same mesh shows first.
- The workflow advances one React state step every few hundred milliseconds only while the hero is on screen and the tab is visible; nothing else loops at rest.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- The three designs carry sample products (Lumen, Relay, Cadence). Replace the copy in hero-lumen.tsx, hero-relay.tsx, and hero-cadence.tsx, the dashboard data in hero-lumen-data.ts, and the sample events at the top of hero-relay.tsx, or pass title and friends for a plain content hero.
- Mesh colors live in CSS per theme (hero-lumen.module.css and hero-cadence.module.css), in the variables --mesh-base and --mesh-1 onward.
- Brand marks are sample customers from public/block-logos, not endorsements.
- Composes Arc Button, LineChart, Sparkline, SegmentedControl, and Avatar.
The full library index for assistants is at /llms.txt.