Report a problem or share feedback ← Catalog

Hero · Split

curatedtheme-awarefree

oc/hero-split

Two-column hero: headline, copy, actions and proof bullets on the left; framed product media on the right (themed mock by default). `reverse` flips sides.

drop-inRefined Trustworthy

Open live demo Compare with similar

$npx shadcn@latest add @design-infra/hero-split

npm deps: lucide-react

Live demo — under each design system

brutalist-mono

v2.0 · Now with preview environments

Deploy the moment you push

Every branch gets a live URL, every merge ships to production. No YAML, no waiting on CI queues.

Start deploying Read the docs

Free for hobby projects
Global edge network
Rollback in one click

editorial

v2.0 · Now with preview environments

Deploy the moment you push

Every branch gets a live URL, every merge ships to production. No YAML, no waiting on CI queues.

Start deploying Read the docs

Free for hobby projects
Global edge network
Rollback in one click

linear-dark

v2.0 · Now with preview environments

Deploy the moment you push

Every branch gets a live URL, every merge ships to production. No YAML, no waiting on CI queues.

Start deploying Read the docs

Free for hobby projects
Global edge network
Rollback in one click

soft-glass

v2.0 · Now with preview environments

Deploy the moment you push

Every branch gets a live URL, every merge ships to production. No YAML, no waiting on CI queues.

Start deploying Read the docs

Free for hobby projects
Global edge network
Rollback in one click

Source: oc
Kind: block
Categories: hero
Use as: drop-in — replaces your component
Applies to: hero
Motion: not tagged (static or unknown)
Tags: oc
Live demo: www.owencoonahan.xyz

Similar

Compare all 4 →