Data Display Components

Dev Design Library indexes 3,238 data display components from 100 open-source UI libraries, with the most coming from ReUI, Watermelon UI, Tremor Blocks, Origin UI and FLX UI. Each one links to its page with the source code, a live preview where available, the library license and the install command.

Showing 120 of 3,238, a mix from every library. Open a library to see all of its components.

• Accordionshadcn/ui · ReactA vertically stacked set of interactive headings that each reveal a section of content.
• AccordionMUI / Material UI · React
• Accordion GalleryReact Bits · ReactPanels expand on hover or focus, revealing parallax imagery and captions.
• AvatardaisyUI · CSS (Tailwind)
• AccordionChakra UI · ReactUsed to show and hide sections of related content on a page
• AccordionHeroUI · ReactA collapsible content panel for organizing information in a compact space
• DisclosureHeadless UI · React
• Animated ListMagic UI · ReactA list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
• AccordionReact Spectrum · ReactA group of disclosures that can be expanded and collapsed.
• Accordioncoss ui · ReactA set of collapsible panels with headings and content.
• AccordionOrigin UI · ReactA set of collapsible panels with headings and content.
• AvatarRadix Themes · React
• AccordionPreline UI · JavaScript (HTML + Tailwind)
• Agent Suggest Card StackCult UI · ReactStack of suggestion cards for AI agent responses
• AccordionArk UI · ReactA collapsible component for displaying content in a vertical stack.
• Delete With Smoky Dissolvetransitions.dev · HTML/CSSList item that dissolves into smoke when deleted.
• B
  Bot AvatarsLibraries.dev · ReactAnimated bot avatars for React — eighteen glossy 3D shapes with living faces that turn, hop and flip, three states…
• AccordionTremor · React
• A basic single-expand accordionReUI · ReactA basic single-expand accordion
• Cardpdfcn · ReactCard PDF component (forme)
• Card Cascade StaggerAmicro Micro Transitions · ReactStack of cards that cascade into place one after another.
• AgentAI Elements · ReactA composable component for displaying AI agent configuration with model, instructions, tools, and output schema.
• AccordionPark UI · ReactA disclosure component with collapsible sections for organizing content.
• AccordionLobe UI · ReactA vertically stacked set of interactive headings whose items reveal titled content with controlled or uncontrolled…
• AI Code RunKokonut UI · ReactThe assistant runs a short Python script in the reply. A marker steps down the lines, the output prints, and the chart…
• Horizontal BarsCursify · React
• area-chartIntent UI · Reactarea-chart
• AvatarUntitled UI React · React
• Agent DisclosurebeUI · ReactShared transform-only reveal for collapsible agent content.
• AccordionTailGrids · ReactFully accessible accordion component with multiple style variants
• Animated CounterRare UI · ReactA number that counts to its new value on a wheel of digits, like an odometer.
• AccordionSpectrum UI · Reactcomponent for the Accordion
• ChartSpell UI · ReactInteractive line chart with a cursor-tracked tooltip card, snap-to-point hover, and built-in X-axis labels.
• Animated TooltipVengeance UI · ReactBouncy SVG-shaped tooltips with spring animations
• AccordionFluid Functionalism · ReactCollapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode…
• ShortcutUser Interface Wiki · React
• AccordionToolcraft · React
• AccordionLaunch UI · React
• AccordionPanel UI · React NativeCollapsible sections with single or multiple selection.
• About Us 01 - Impact MetricsShadcn Space · ReactA bold about us section combining value pillars, headline messaging, and performance counters, perfect for agencies or…
• Accordion CarouselPixel Perfect · ReactAn accordion of vertical image panels — the active panel springs wide to reveal its photo and caption while the rest…
• Linked In Post CardOpenSourceUI · ReactCard that reproduces a LinkedIn post: author, text, image and reaction bar.
• Accessible Actionuselayouts · ReactInteractive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth…
• Accordion SpringKinetics · HTML/CSSMax-height transition with rotating chevron
• CardPrebuiltUI · React
• App ShellBoardUI · ReactThe page standard every BoardUI template follows, free or Pro: content sits directly on the page background inside a…
• Case Study Flip StackComponentry · ReactEditorial case study cards that fold upward on scroll to reveal the next story.
• Area ChartTremor Blocks · ReactThe base area chart component (Recharts): any number of series, legend, tooltip, axes, stacked or percent mode…
• AccordionShadcn Dashboard · React
• Card Decoratorcnblocks · SvelteDecorative card component with visual effects
• Animated ListAnimations (Svelte) · SvelteA component that animates list items with smooth layout transitions, revealing items one by one from top to bottom.
• Chain Of ThoughtAI Elements (Svelte) · SvelteA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
• Activity HeatmapSwiftPieces · SwiftUIA streak calendar in steps of red with a glass streak chip, and a scrub that lifts each day with a callout and a…
• Animated KeyboardBadtz UI · ReactDisplays an animated keyboard with keycaps that can be customized with different colors and variants.
• Parallax SliderObsidianUI · ReactA full-width image slider where each slide moves with a parallax offset, driven by drag, arrows or keys.
• AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
• Fluid Dock CarouselGreatUI · ReactA carousel driven by a fluid dock of thumbnails, with swipe, arrows and keyboard navigation.
• Avatars 08Oxbow UI · AstroAvatar Group (Dynamic +N)
• AccordionNexvyn UI · ReactA vertically stacked set of interactive headings that each reveal a section of content, with a grid-rows unfold…
• Bar Visualizeraudiocn · ReactA row of bars driven by frequency bands, with idle, loading and mirrored modes. Bars paint without re-rendering React.
• Expandable CardForge UI · ReactInteractive UI component to expand cards with smooth animations and detailed content using layout transitions.
• accordionBaseLayer · ReactAn accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a…
• AccordionShark UI · ReactA collapsible for displaying content.
• Diagonal Card StackRewamp UI · ReactExact recreation of the diagonal cascading card stream & stacked deck collapse animation.
• CommandButtonEvil Buttons · ReactA button with a global keyboard shortcut, shown as keycaps that sink as you hold each key.
• Ai Bot AvatarAI CSS · ReactAn animated AI bot avatar that follows the cursor with its eyes, blinks and reacts to attention.
• AccordionSona UI · ReactAn accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure…
• Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
• Blog Onesv-efferd · SvelteA vertical editorial list with full-width dividers and compact summaries.
• GaugeGauge UI · ReactComposable SVG gauge primitives: track, arc, zones, ticks, tick fills, labels, needle, hub, dot, tooltip and value…
• AccordionArc Library · ReactProgressively reveal supporting information in place.
• Data Table Faceted Filtersv-table · SvelteA searchable multi-select filter with live counts for categorical table columns.
• Glass Calendarglasscn · ReactGlass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract
• AccordionUI Lab · ReactAnswers unfold from under their question like a folded flap, and the row you clicked never moves.
• AccordionHextaUI · ReactStacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable…
• Chart ArtifactLocalMode · ReactA dependency-free inline-SVG chart (line / bar / area / scatter / radar / gauge) for local metrics — eval curves…
• AccordionCojeev UI · ReactOrganizes related sections into expandable panels so readers can open the details they need.
• Count Up NumberMicroKit · ReactA stat that counts up from zero the first time it scrolls into view, easing out so the last digits settle slowly; it…
• AccordionROI UI · ReactA collapsible content component.
• BasicFLX UI · ReactOnly one section open at a time, type="single" collapsible. The default behavior.
• 3D CardVelora UI · ReactPerspective card that turns toward the pointer while its layers lift to different depths.
• AccordionHalaska UI · React
• Characters Remaining Countsv-particles · SvelteText input that shows how many characters are still left before the limit.
• Balance CardPin UI · React
• AccordionMetal UI · React + SwiftUISections that open in place: row headers with a chevron; the panel grows to its content on the settle spring while the…
• AccordionSpaceUI · ReactAllows you to display content in collapsible panels, making it easy for users to explore details on demand while…
• Aria AccordionReScript shadcn · ReScript
• 3D Wheel CarouselSkecher UI · ReactA reusable, drag-controlled 3D card carousel with auto-rotation, keyboard navigation, blur depth, and reduced-motion…
• AccordionSora UI · ReactAn animated FAQ accordion with expandable panels, powered by Motion.
• Crypto SwitchZAYX · React NativeA crypto swap card: pick the coin you pay and the one you receive, flip them with a spring, and send.
• 3D Book Carousel Reading ModeCue Foundations · React
• CalendarOUI · ReactReact aria components Calendar with shadcn characteristics.
• Liquid AccordionLiquefy UI · ReactAccordion in liquid glass style: translucent panels that refract the background.
• AccordionD2Studio UI · ReactA vertically stacked set of interactive headings that each reveal a section of content.
• AccordionEaseUI · ReactExpanding sections that grow to their natural height with no measuring, with arrow key navigation and closed panels…
• Glass AccordionOpaline · ReactCollapsible sections on one glass panel, or as separate glass cards that grow open.
• AvatarFibo · ReactA person's photo, or their initials when there's no photo.
• AccordionReactFrame · ReactAn accessible accordion with single or multiple open panels, default, card and filled variants, chevron or plus…
• Cards Demo 3Aceternity UI · ReactFeature Block Animated Card
• Accordionark-cn · ReactA shadcn-style accordion component built with Ark UI primitives.
• Avatarshadcn/ui · ReactAn image element with a fallback for representing the user.
• Accordion DetailsMUI / Material UI · React
• Animated ListReact Bits · ReactList items enter with staggered motion variants for polished reveals.
• CalendardaisyUI · CSS (Tailwind)
• Area ChartChakra UI · ReactUsed to display quantitative data by filling the area between the line and axis, showing trends and patterns over time
• AvatarHeroUI · ReactDisplays a user avatar with support for images, text initials, or fallback icons.
• Avatar CirclesMagic UI · ReactOverlapping circles of avatars.
• AvatarReact Spectrum · ReactAn avatar is a thumbnail representation of an entity, such as a user or an organization.
• Avatarcoss ui · ReactAn image element with a fallback for representing the user.
• AvatarOrigin UI · ReactAn image element with a fallback for representing the user.
• CardRadix Themes · React
• CarouselPreline UI · JavaScript (HTML + Tailwind)
• Analytics ChartCult UI · ReactVercel-style gradient line chart with floating tooltip cards
• AvatarArk UI · ReactA graphical representation of the user, often used in profile sections.
• Number Pop Intransitions.dev · HTML/CSSNumber whose digits pop in with a small scale bounce when the value changes.
• Area ChartTremor · React
• Accordion with rotating arrow indicatorReUI · ReactAccordion with rotating arrow indicator
• Data Tablepdfcn · ReactData Table PDF component (forme)
• Card Preview TileAmicro Micro Transitions · ReactCatalog preview for a card spread / carousel. Hover state lives here so hovering one tile re-renders only that tile…
• ArtifactAI Elements · ReactA container component for displaying generated content like code, documents, or other outputs with built-in actions.

Libraries with data display components

• ReUI
• Watermelon UI
• Tremor Blocks
• Origin UI
• FLX UI

Related categories

• React Data Display Components
• Tailwind CSS Data Display Components
• Svelte Data Display Components
• React Native Data Display Components
• Animated Data Display Components
• shadcn/ui Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components
• Card Stack Components