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.
6 components, installable with the shadcn CLI.
Card Stack
A swipeable card stack carousel for product showcases and feature tours; drag the top card away or click it to open a detail modal.
View componentCard Grid
A responsive card grid for products, strategies or case studies, with hover actions on each card and a shared detail modal.
View componentCard List
A vertical card list for reports, products or case studies, each card with media and copy, opening into a shared detail modal.
View componentBento Gallery
A draggable bento grid gallery for product shots and dashboard screenshots that opens into a shared lightbox.
View componentNews Card
A market news card that cycles headlines with their source and time, for trading dashboards, broker apps and crypto portals.
View componentIndex Card
A market index card for the S&P 500, Dow, Nasdaq and Russell, with tabs between indices and an intraday line you can scrub.
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