Charcoal UI

React Card, Accordion and Display Components

Animated React cards, accordions, marquees, number tickers, lists and layout helpers.

About these card, accordion and display components

Display components present content with a little life: cards that tilt and catch light, accordions and collapsibles that spring open, marquees, number tickers, sortable lists, avatar groups and layout helpers like Auto Height and Scroll Fade.

They are the building blocks of landing pages and dashboards, so they stay light, theme-aware and easy to restyle with className.

Where they earn their keep

  • Feature grids and pricing cards.
  • FAQs and settings sections.
  • Stats and social proof on landing pages.
  • Dashboards and content lists.

How they are built

Interactive parts are buttons or links with accessible names, and decorative layers are hidden from assistive tech. Height and layout changes animate with Motion, so content below glides instead of jumping.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 67 card, accordion and display components

13 are free and MIT licensed, and 54 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
  • Number Ticker: An animated React number ticker: each digit rolls on its own wheel
  • Tilt Card (Pro): A 3D tilt card for React that leans toward the pointer with a moving glare
  • Spotlight Card (Pro): A React spotlight card: an accent glow follows the pointer across card and border
  • Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
  • Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
  • Sortable List (Pro): A drag-to-reorder React list with lifted shadows and keyboard sorting
  • Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
  • Copy Button: A React copy button whose icon blurs into a drawn check, then swaps back
  • Card Stack (Pro): A swipeable React card stack where the next card rises to meet you
  • Carousel: An animated React carousel: drag, flick or arrow keys, snapping slides and stretching dots
  • Image Compare (Pro): A React before and after image comparison slider you can drag anywhere
  • Flip Card (Pro): A 3D React flip card on a springy hinge, by click or hover
  • Timeline: A React scroll timeline: the line draws as you scroll and entries rise into view
  • Stat Card (Pro): A React KPI stat card with a counting number, delta pill and drawn sparkline
  • Folder (Pro): An animated React folder whose flap tips open as files fan up out of it
  • Expandable Card (Pro): A React card that expands in place while its neighbours make room
  • Orbit (Pro): CSS-only React orbit: icons circle a centre on rings and stay upright
  • Animated List (Pro): An animated React list that reveals items one at a time, newest on top
  • Terminal (Pro): An animated React terminal that types commands and prints output on scroll
  • Image Lightbox (Pro): A React image lightbox: thumbnails zoom to full screen with swipe and arrow keys
  • Animated Border (Pro): A React card with an accent highlight travelling around its border, CSS only
  • Scroll Reveal: A React scroll reveal: fade content in from any direction or out of a blur
  • Border Beam (Pro): A React border beam: coloured light riding the border of cards, inputs and buttons
  • Liquid Metal (Pro): A React liquid metal ring for buttons and badges, in chromatic, silver or gold
  • Electric Border (Pro): A React electric border: a live arc runs along a card's edge, pure SVG
  • Star Border (Pro): A React star border: two points of light chase around a button or card
  • Gradual Blur (Pro): A React progressive blur edge so scrolling content melts out instead of cutting off
  • Logo Loop (Pro): A seamless React logo loop marquee with real pixel speed and hover pause
  • Electric Logo (Pro): A React electric logo: arcs crawl around any SVG like a Jacob's ladder
  • Magic Bento (Pro): A React magic bento grid with spotlight, border glow, tilt, stars and ripples
  • Chroma Grid (Pro): A React chroma grid: a spotlight reveals colour in a desaturated image grid
  • Pixel Card (Pro): A React pixel card whose surface fills with shimmering pixels on hover
  • Holo Card (Pro): A holographic foil card for React with a moving rainbow sheen, glints and tilt
  • Reflective Card (Pro): A React reflective metal card with a specular highlight and parallax grain
  • Profile Card (Pro): An animated React profile card with status, glow and a contact button
  • Decay Card (Pro): A React decay card: the image melts and smears when you move fast
  • Card Swap (Pro): A React 3D card stack that swaps the front card to the back on a timer
  • Bounce Cards (Pro): A fan of React image cards that bounce in and spread on hover
  • Flying Posters (Pro): React flying posters: images fly through a 3D tunnel as you scroll or drag
  • Glass Surface (Pro): A React liquid glass surface with blur, a refractive rim and a specular highlight
  • Fluid Glass (Pro): A draggable React glass lens that magnifies and bends the content beneath
  • Glass Icons (Pro): React glass icon tiles with a coloured backplate and a frosted front
  • Border Glow (Pro): A React border glow that follows the pointer along a card's edge
  • Circular Carousel (Pro): A React 3D ring carousel you drag, scroll or arrow through
  • Flex Carousel (Pro): A React expanding gallery: the hovered panel grows and the others squeeze
  • Infinite Spiral (Pro): A React infinite spiral gallery that funnels images toward the centre
  • Depth Carousel (Pro): A React depth carousel: neighbours step back into blur and shadow
  • Morph Slider (Pro): A React image slider that morphs slides in through circle, wipe or blinds
  • Drift Wall (Pro): A React drifting image wall with parallax rows that lift on hover
  • Circular Gallery (Pro): A React curved gallery that turns like a wheel with momentum
  • Dome Gallery (Pro): A React dome gallery of images on a sphere you drag to turn
  • Lanyard (Pro): A React lanyard badge that swings on a physics strap when you drag it
  • Masonry (Pro): An animated React masonry grid balanced by height with layout transitions
  • Infinite Menu (Pro): A React infinite grid menu that wraps in every direction with snapping
  • Cover Flow (Pro): A React cover flow with tilted covers, reflections and spring navigation
  • Bento Grid (Pro): An animated React bento grid with staggered entrances and hover focus
  • Tweet Card (Pro): An animated React social post card with a bursting like button
  • Code Window (Pro): A React code window with syntax colours, highlighted lines and typing animation
  • Feature Card (Pro): An animated React feature card with a tilting icon, rising wash and nudging arrow
  • Device Frame (Pro): React device mockups: phone, tablet or laptop frames in CSS with tilt and glare
  • Ticket Card (Pro): A React ticket card with a notched edge, barcode and tear-off stub
  • Receipt (Pro): An animated React receipt that prints line by line with a counting total
  • Collapsible: A free animated React collapsible with a spring height and turning chevron
  • Auto Height: A free React wrapper that animates its height to fit changing content
  • Aspect Ratio: A free React aspect ratio box that eases between ratios
  • Scroll Fade: A free React scroll area whose edges fade only where there is more to scroll

Install one

npx shadcn@latest add https://charcoalui.com/r/accordion.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Can I restyle the cards?
Yes. Every component uses your theme's CSS variables and accepts className, so you change the look without touching the motion.
Do the accordions work without JavaScript?
The content is in the page for search engines and screen readers. Opening and closing needs React, like any interactive component.
Which display components are free?
Accordion, Collapsible, Number Ticker, Marquee, Avatar Group, Aspect Ratio, Scroll Fade and Auto Height are among the free and MIT ones.
Do these card, accordion and display components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.