Back to Components
Layout
Masonry Grid
Pinterest-style masonry layout using CSS columns for cards of varying heights.
PropsUsage ExampleVariations
Short card
120px tall
Tall card
200px tall
Medium card
150px tall
Another tall
180px tall
Compact
100px tall
Standard
160px tall
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/masonry-grid.tsx
Installation
Using shadcn CLI
npx shadcn add masonry-grid --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Layout Components
Calendar
Month view calendar with selectable days and event dots.
Dashboard Header
Page header with title, date range picker placeholder, and action buttons area.
Scroll Area
Custom scrollbar styling with overflow detection and gradient fade indicators.
Split Layout
Two-pane layout with a resizable divider, supporting horizontal and vertical orientations.
Split Pane
Resizable side by side panels with a drag handle.