H
UI by hampton.io
Get Started
Back to Components
Components

Media Grid

Masonry style grid for mixed media items with hover overlays.

City lights
IMAGE

City lights

Editorial still

Studio reel
VIDEO2:14

Studio reel

Short motion clip

Podcast teaser
AUDIO34 min

Podcast teaser

Audio highlight

Product detail
IMAGE

Product detail

Feature closeup

Launch recap
VIDEO1:02

Launch recap

Behind the scenes

Soundtrack
AUDIO52 min

Soundtrack

Mood board audio

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/media-grid.tsx

Installation

Using shadcn CLI

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

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge