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.

$npx shadcn@latest add @silicon-ui/hero-section

Installation

With the shadcn CLI

$npx shadcn@latest add @silicon-ui/hero-section

Manually

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/hero-section/hero-section.tsx
- components/silicon-ui/blocks/hero-section/hero-section.module.css
- components/silicon-ui/blocks/hero-section/hero-content.tsx
- components/silicon-ui/blocks/hero-section/hero-content.module.css
- components/silicon-ui/blocks/hero-section/hero-motion.ts
- components/silicon-ui/copy-button/copy-button.tsx shared
- components/silicon-ui/copy-button/copy-button.module.css shared
- components/silicon-ui/lib/use-copy-feedback.ts shared
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
- components/silicon-ui/blocks/hero-section/hero-mesh.tsx
- components/silicon-ui/blocks/hero-section/hero-mesh.module.css
- components/silicon-ui/blocks/hero-section/hero-cadence.tsx
- components/silicon-ui/blocks/hero-section/hero-cadence.module.css
- components/silicon-ui/blocks/hero-section/hero-relay.tsx
- components/silicon-ui/blocks/hero-section/hero-relay.module.css
- components/silicon-ui/blocks/hero-section/hero-lumen.tsx
- components/silicon-ui/blocks/hero-section/hero-lumen.module.css
- components/silicon-ui/blocks/hero-section/hero-lumen-data.ts
- components/silicon-ui/line-chart/line-chart.tsx shared
- components/silicon-ui/line-chart/line-chart.module.css shared
- components/silicon-ui/lib/media.ts shared
- components/silicon-ui/avatar/avatar.tsx shared
- components/silicon-ui/avatar/avatar.module.css shared
- components/silicon-ui/lib/silicon-provider.tsx shared
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
- components/silicon-ui/sparkline/sparkline.tsx shared
- components/silicon-ui/sparkline/sparkline.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx

import { HeroSection } from "@/components/silicon-ui/blocks/hero-section/hero-section";

API reference

`HeroSection`

Prop	Type	Default
`variant` `centered` is a headline over a drifting mesh with a live dashboard rising from the bottom edge, `split` sets the copy beside a live workflow graph that runs sample events node by node, and `minimal` is large type over a mesh gradient. Each design fills one full screen.	`HeroSectionVariant` `"split""centered""minimal"`	`"centered"`
`animateIn` Plays the entrance once on mount. Defaults to true.	`boolean`	`true`
`primaryAction` The main call to action. With `doneLabel` and no `href`, the button confirms in place.	`HeroAction \| null`	—
`secondaryAction` The second call to action.	`HeroAction \| null`	—
`title` Your own headline. When set, the hero renders your content in the chosen layout (see `HeroContent`) instead of the designed sample, together with the props below.	`string`	—
`description`	`string`	—
`announcement`	`HeroAction \| null`	—
`install` Install commands for your own content; the first one is shown with a copy button.	`HeroInstallCommand[] \| null`	—
`media` A visual beside your own content in the split layout.	`ReactNode`	—
`meta` Small facts under your own content, such as the version and license.	`string[]`	—
`highlight` Kept for compatibility; highlighted phrases render as plain text.	`string`	—
`className`	`string`	—

`HeroSectionBlock`

Prop	Type	Default
`variant`	`HeroSectionVariant` `"split""centered""minimal"`	`"centered"`

`HeroCadence`

Prop	Type	Default
`primaryAction`	`HeroAction`	—
`secondaryAction`	`HeroAction`	—
`animateIn`	`boolean`	—
`className`	`string`	—

`HeroContent`

Prop	Type	Default
`layout*`	`"centered" \| "split" \| "minimal"`	—
`title*`	`string`	—
`announcement`	`HeroAction \| null`	—
`description`	`string`	—
`primaryAction`	`HeroAction \| null`	—
`secondaryAction`	`HeroAction \| null`	—
`install`	`HeroInstallCommand[] \| null`	—
`media`	`ReactNode`	—
`meta`	`string[]`	—
`animateIn`	`boolean`	—
`className`	`string`	—

`HeroLumen`

Prop	Type	Default
`primaryAction`	`HeroAction`	—
`secondaryAction`	`HeroAction`	—
`animateIn`	`boolean`	—
`className`	`string`	—

`HeroMesh`

Prop	Type	Default
`points*`	`readonly HeroMeshPoint[]`	—
`grain` Film grain, 0 to 1.	`number`	—
`speed` Drift speed. 1 loops every 20 seconds; 0 holds the mesh still.	`number`	—
`className`	`string`	—
`style`	`CSSProperties`	—

`HeroRelay`

Prop	Type	Default
`primaryAction`	`HeroAction`	—
`secondaryAction`	`HeroAction`	—
`animateIn`	`boolean`	—
`className`	`string`	—

Dependencies

npm: lucide-react motion
Registry: silicon-motion-tokens avatar button copy-button line-chart segmented-control sparkline