Hero section

Full-bleed hero composition shell.

Default
Overview
Full-bleed hero content
No Header
Hero content without a header row
With Action Header

Activity

Last 7 days

See all ›
Full-bleed activity chart
With Chart
Visitors today5,540
+18.2%
With Custom Classname

Custom spacing via className

Full-bleed zone — spacing controlled by className prop
With Metrics Header
Total Users24,830+12.4%
Revenue$91,200+8.1%
Bounce Rate34.5%-2.3%
Full report ›
Full-bleed area chart

Installation

npx shadcn@latest add @byronwade/hero-section