Hero Code Preview · Sections

Components Themes Docs

Components
/
Hero
/
Hero Code Preview

Hero Code Preview

Developer hero pairing copy with a faux terminal and copyable install line.

HeroInteractivedeveloper code terminal0 views

More hero sections

Hero Centered CTA

Eyebrow pill, oversized headline and a pair of buttons, all centered.

Herocenteredsaas2

Hero Split Image

Copy on the left, a full-bleed product photograph on the right.

Herosplitimage1

Hero Gradient Spotlight

Dark-leaning hero with a radial spotlight and gradient headline treatment.

Herogradientdramatic1

PreviousHero Newsletter Capture NextHero Bento Grid

Sections

React sections that take every visual value from CSS custom properties, so a copied snippet looks the same in your project as it does here.

Library

All components
Theme presets
Documentation

Authoring

Admin guide
Manage components
Import & export

Built with Next.js, Prisma and Sucrase. Previews run in a sandboxed iframe.