Block
Hero Split
A split hero layout with copy on the left and a product preview on the right.
Preview
Hero block
Split the story and show the product in context
Keep copy on the left and place a live preview on the right. This format helps teams highlight value and prove outcomes fast.
Overview
Dashboard readiness
92%
Sessions
48.2K
Last 30 days
Activation
3.4x
Week over week
See full preview above
Installation
Using shadcn CLI
npx shadcn add hero-split --url https://ui.hampton.ioDependencies
npm install framer-motion