Card Components
Free React card components: flip cards, card stacks, widget grids, activity rings, receipts and metric cards, animated with Motion and styled with Tailwind CSS.
Cards for dashboards, profiles, payments and media, from a flip card or a deck you can throw to metric, uptime and spending cards with real interactions. Each one is a React component built with Tailwind CSS and Motion.
- CD-01Flick CardUpdatedA two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle.
- CD-02Throw DeckUpdatedA pile of image cards you drag, flick off the top and send under the deck, with arrow keys and a details view.
- CD-03Now PlayingUpdatedMusic card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS.
- CD-04Apple Activity CardUpdatedActivity rings that draw with a count-up, lap past 100% with a shadowed end cap and dim to focus, built with React and Motion.
- CD-05Widget GridUpdatedDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
- CD-06Currency TransferUpdatedTransfer tracker that converts the amount in place, walks through each step on a filling rail and ends with a copyable reference.
- CD-07Momentum RailUpdatedA card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
- CD-08Notification StackNewStacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS.
- CD-09Liquid GaugeNewA usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.
- CD-10Activity TerrainNewA contribution heatmap that tilts up into a 3D terrain you can turn, built with React and canvas.
- CD-11Page FlipNewA book you turn by the corner. Drag a page over the spine or tap to turn it.
- CD-12Receipt PrinterNewA receipt that prints line by line, then tears off and falls when you pull it, built with React.
- CD-13Metric CardNewA revenue KPI card. Scrub a day, drag a range, or pick a segment; the number rolls, the line morphs and the breakdown follows.
- CD-14Uptime CardNewA status page card with 90 days per service that swell under the cursor, and a day you click opens its incident log.
- CD-15Spending RingNewA spending breakdown you spin like a dial; flick the ring and it settles with a category under the marker.
- CD-16Boarding PassNewA boarding pass that keeps itself current. When the gate or times change, only the changed characters roll over, the old value struck through.
- CD-17Lightbox GridNewA photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down.
