build69
build69  /  Components  /  Layout & Surfaces  /  HeroGradient

HeroGradient

v1.0.7Updated 27 Aug 2026

Decorative gradient hero strip — used as the page background of marketing or public landing surfaces, or as a header block.

Preview

Live · 13 stories
All VariantsOpen ↗
Why this is recommendedherogradientbannerdecorative+2

Every HeroGradient variant lined up for comparison.

Recommended for+14
  • Public landing pages
  • PublicFormCover header
  • Dashboard "welcome" strip
Tags+6
herogradientbannerdecorativeallvariants
Features+4
  • Multiple gradient presets
  • Optional foreground children slot
  • Subtle grain texture overlay
Not recommended for−2
  • Anywhere data-dense — gradients reduce contrast

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "HeroGradient" })

Usage

import { HeroGradient } from '@/components/surfaces/hero-gradient';

<HeroGradient preset="sunset">
  <h1>Welcome to build69</h1>
</HeroGradient>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
preset

Gradient preset name

string
children

Foreground content

ReactNode

Related