Card stack, grid and gallery components for React
Cards as a way to move through a set of things. A stack you can swipe and expand into a modal, a grid that keeps its rhythm at any width, a list view for the same data, and a bento gallery for showing work. They share one card surface, so mixing layouts on a page still reads as one product.
7 components, installable with the shadcn CLI.
Card Stack
A draggable card carousel. Swipe the top card, click to expand into a modal.
View componentCard Grid
A responsive grid of project cards with hover actions and a shared modal.
View componentCard List
A vertical list of project cards with media, copy, and a shared modal.
View componentBento Gallery
A draggable bento grid that expands into a shared lightbox.
View componentNews Card
An auto-cycling news module with a bold headline and dot pagination.
View componentProject Index
Bare project rows where the cover only shows while you hover, floating by the cursor.
View componentIndex Card
A markets card: one big price over a line you scrub, tabs walking between indices.
View component
Questions
- Is the card stack draggable on touch?
- Yes. Swipe moves the top card on touch, drag does the same with a pointer, and clicking a card expands it into a detail view.
- Can the same data render as a grid and a list?
- Yes. The grid, list and stack take the same card data, so switching layout does not mean re-modelling your content.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide