Block

Hero Grid

A hero block with a subtle dot grid background and structured highlight cards.

Hero block

Launch a product story with focus and clarity

Pair a strong headline with a calm grid backdrop to keep attention on the message while still feeling polished.

Structured layout

Grid guidance keeps sections aligned and easy to scan.

Subtle texture

Soft dots add depth without overpowering the content.

Responsive ready

Built for quick shifts across breakpoints.

Using shadcn CLI

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

Manual installation

Copy the component file to your project and install dependencies:

npm install framer-motion