Dev Design LibrarySvelte Data Display Components
Dev Design Library indexes 123 Svelte data display components from 6 open-source UI libraries, with the most coming from sv-particles, cnblocks, sv-table, Animations (Svelte) and sv-efferd. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets Svelte.
Showing 120 of 123, a mix from every library. Open a library to see all of its components.
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…
Blog Onesv-efferd · SvelteA vertical editorial list with full-width dividers and compact summaries.
Data Table Faceted Filtersv-table · SvelteA searchable multi-select filter with live counts for categorical table columns.
Characters Remaining Countsv-particles · SvelteText input that shows how many characters are still left before the limit.
Faq Fourcnblocks · SvelteFAQ section with search and categories
Arc TimelineAnimations (Svelte) · SvelteA curved timeline that rotates through milestone steps with clickable markers, icons, and configurable spacing.
Inline CitationAI Elements (Svelte) · SvelteAn inline citation system with hover cards and carousel views for source-backed AI content.
Blog Threesv-efferd · SvelteA card-based blog grid with media thumbnails and richer reading metadata.
Basic Data Tablesv-table · Svelte
Outline Like With Countsv-particles · SvelteOutlined like button with a heart and the number of likes next to it.
Faq Onecnblocks · SvelteSimple accordion-style FAQ block
Avatar CirclesAnimations (Svelte) · SvelteA component that displays overlapping avatar circles with optional count indicator for showing team members or…
PlanAI Elements (Svelte) · SvelteA plan card component with collapsible content and streaming-aware description shimmer.
Blog Twosv-efferd · SvelteA structured blog grid with metadata rows and filler cells for balance.
Complex Examplesv-table · Svelte
With Character Countsv-particles · SvelteForm field that shows the number of characters typed out of the maximum.
Faq Threecnblocks · SvelteFAQ with two-column layout
File TreeAnimations (Svelte) · SvelteAn interactive file tree component with expandable folders, selectable files, and smooth animations.
QueueAI Elements (Svelte) · SvelteA structured queue view with sections, items, attachments, and action controls.
FAQ Fivesv-efferd · SvelteA searchable FAQ page with category filters, empty state handling, and structured dividers.
Custom Filters Examplesv-table · Svelte
Basicsv-particles · Svelte
Faq Twocnblocks · SvelteFAQ section with expandable items
Magic CardAnimations (Svelte) · SvelteA spotlight effect that follows your mouse cursor and highlights borders on hover.
ReasoningAI Elements (Svelte) · SvelteA collapsible reasoning block that tracks streaming duration and renders a markdown response.
FAQ Foursv-efferd · SvelteA categorized FAQ explorer with topic switching and softly framed accordion rows.
Data Gridsv-table · Svelte
Basic Avatarsv-particles · Svelte
Feature Cardcnblocks · SvelteReusable feature card with icon and text
Neon Gradient CardAnimations (Svelte) · SvelteA card component with animated neon gradient borders and customizable colors, border size, and radius.
SourcesAI Elements (Svelte) · SvelteA collapsible sources list for rendering cited links and source groups.
FAQ Onesv-efferd · SvelteA compact FAQ stack with a centered heading and a classic single-column accordion.
Data Table Filters Examplesv-table · Svelte
Basic Kbdsv-particles · Svelte
Hero Twocnblocks · SvelteTwo-column hero with image carousel
Number TickerAnimations (Svelte) · SvelteAn animated number counter component with spring physics that smoothly animates from a start value to an end value.
TaskAI Elements (Svelte) · SvelteA collapsible task panel for tracking task state and nested task items.
FAQ Threesv-efferd · SvelteA guided editorial FAQ with divider rails and decorative timeline markers.
Dnd Kit Examplesv-table · Svelte
Basic Tablesv-particles · Svelte
Integration Cardscnblocks · SvelteCollection of integration card variants for logos
Warp BackgroundAnimations (Svelte) · SvelteA 3D perspective grid background with animated light beams that create a warping effect.
ToolAI Elements (Svelte) · SvelteA collapsible tool call block with parameter and result rendering.
FAQ Twosv-efferd · SvelteA split FAQ layout with a fixed intro column and full-height answer rail.
Draggable Examplesv-table · Svelte
Card Style Buttonsv-particles · Svelte
Pricing Fivecnblocks · SveltePricing table with feature comparison
Spell Fallback AvatarAnimations (Svelte) · Svelte
Pricing Foursv-efferd · SvelteAn animated pricing table with monthly-yearly toggles, live number transitions, and motion badges.
Expanded Sub Rowssv-table · Svelte
Card Tablesv-particles · Svelte
Pricing Fourcnblocks · SvelteFour-tier pricing with toggle switch
Spell Keyboard ShortcutAnimations (Svelte) · Svelte
Pricing Onesv-efferd · SvelteA two-plan comparison with corner accents, compact savings callouts, and a stronger featured tier.
Data Table Filterssv-table · Svelte
Column Visiblity Tablesv-particles · Svelte
Pricing Onecnblocks · SvelteSimple three-tier pricing cards
Spell Logo CarouselAnimations (Svelte) · Svelte
Pricing Threesv-efferd · SvelteA reusable three-tier pricing layout with icon-led cards and a highlighted middle plan.
Numeric Pagination Examplesv-table · Svelte
Controlledsv-particles · Svelte
Pricing Threecnblocks · SveltePricing with highlighted popular plan
Spell Perspective BookAnimations (Svelte) · Svelte
Pricing Twosv-efferd · SvelteA bordered editorial pricing grid with divider rails, concise plan summaries, and feature checklists.
Paginated Examplesv-table · Svelte
Dense Tablesv-particles · Svelte
Pricing Twocnblocks · SvelteTwo-column pricing with monthly/yearly toggle
Spell Spotify CardAnimations (Svelte) · Svelte
Pinnable Columnsv-table · Svelte
Fallback Onlysv-particles · Svelte
Stats Fourcnblocks · SvelteFour-column stats with icons
Spell Tilt CardAnimations (Svelte) · Svelte
Resizable Sort Examplesv-table · Svelte
Filter Tablesv-particles · Svelte
Stats Onecnblocks · SvelteSimple stats row with large numbers
Row Selectionsv-table · Svelte
Froze Column Dropdownsv-particles · Svelte
Stats Threecnblocks · SvelteStats cards with descriptions
Frozen Column Tablesv-particles · Svelte
Stats Twocnblocks · SvelteTwo-column stats with side image
Full Tablesv-particles · Svelte
Team Onecnblocks · SvelteTeam grid with member photos and roles
Keyboard Shortcutsv-particles · Svelte
Team Twocnblocks · SvelteTeam section with social links
Large Overlapping Avatar Groupsv-particles · Svelte
Testimonial Fivecnblocks · SvelteTestimonial carousel with navigation
Multiple Panelssv-particles · Svelte
Testimonial Fourcnblocks · SvelteFour-column testimonial grid
Overlapping Avatar Groupsv-particles · Svelte
Testimonial Onecnblocks · SvelteSimple centered testimonial quote
Pagination Tablesv-particles · Svelte
Testimonial Sixcnblocks · SvelteTestimonial with video embed
Rounded With Emerald Status Dotsv-particles · Svelte
Testimonial Threecnblocks · SvelteThree-column testimonial cards
Search Tablesv-particles · Svelte
Testimonial Twocnblocks · SvelteTwo-column testimonial with photos
Simple Tablesv-particles · Svelte
Small Overlapping Avatar Groupsv-particles · Svelte
Sortable Tablesv-particles · Svelte
Sticky Column Dropdownsv-particles · Svelte
Sticky Horizontal Tablesv-particles · Svelte
Striped Tablesv-particles · Svelte
Table Basic Tablesv-particles · Svelte
Table With Row Selectionsv-particles · Svelte
Table With Sticky Headersv-particles · Svelte
Unique Tablesv-particles · Svelte
Vertical Tablesv-particles · Svelte
With Avatarsv-particles · Svelte
With Different Radiisv-particles · Svelte
With Different Sizessv-particles · Svelte
With Emerald Status Dotsv-particles · Svelte
With Imagessv-particles · Svelte
With Keyboard Shortcut Searchsv-particles · Svelte
With Muted Status Dotsv-particles · Svelte
With Notification Badgesv-particles · Svelte
With One Panelsv-particles · Svelte
With Rounded Notification Badgesv-particles · Svelte
With User Icon Fallbacksv-particles · Svelte
Libraries with Svelte data display components
Related categories
- Data Display Components
- React Data Display Components
- Tailwind CSS Data Display Components
- React Native Data Display Components
- Animated Data Display Components
- shadcn/ui Data Display Components
- Svelte Table Components
- Svelte Card Components
- Svelte Data Table Components
- Svelte Avatar Components
- Svelte Accordion Components
- Svelte Stat Components
- Svelte Filter Bar Components