H
UI by hampton.io
Back to Blocks
Block

Hero Split

A split hero layout with copy on the left and a product preview on the right.

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.

View all blocks

Overview

Dashboard readiness

92%

Sessions

48.2K

Last 30 days

Activation

3.4x

Week over week

Dependencies

  • framer-motion

Files

  • components/blocks/hero-split.tsx

Installation

Using shadcn CLI

npx shadcn add hero-split --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install framer-motion