Data Display
Tables, lists, timelines, charts, carousels, code blocks, and data visualizations.
23 components
Display
Timeline
Vertical timeline for activity or event history.
Collapse / Accordion
Collapsible sections using DaisyUI collapse.
Indicator
Badge/dot overlay indicators on components.
Diff
Side-by-side comparison diff panel.
Carousel
Horizontal scrolling carousel with snap items.
Countdown
Animated countdown timer display.
Sortable List
SortableJS drag-and-drop list with optional handle. Loads from CDN dynamically.
Swiper Carousel
SwiperJS-powered carousel with navigation, pagination, autoplay, and multiple effects. Loads from CDN dynamically.
Charts
ApexCharts-powered chart components: area, bar, column, line, pie, donut. Loads from CDN dynamically.
Sparkline Chart
Compact inline ApexCharts sparkline for embedding in stat cards and tables.
Collapsible
Single-item animated collapse/expand panel with optional icon.
Tables
Table
Composable data table. TableWithProps wraps TableHead/TableBody; content is composed from TableRow and TableCell primitives with any component as cell content.
Logs Table
A workflow/event log display table.
Table Card
Card-based table composition: TableCardWrapper, TableCardHeader, TableCardFooter, TableSearch, TableSelect, and Pagination — build full ecommerce-style table cards.
Table Card Wrapper
Card container for table compositions. Wraps content in a DaisyUI card with shadow and border.
Table Card Header
Header bar for table cards. Takes children for flexible composition: titles, search inputs, selects, and action buttons.
Table Card Footer
Rich footer for table cards: per-page selector, item range count, and circle-style pagination — matching the Nexus ecommerce orders pattern.
Table Search
Search input with magnifying glass icon, designed for table card headers. Supports HTMX-powered live search.
Table Select
Filter select for table card headers. Wraps a DaisyUI select-sm with HTMX change-triggered filtering.
Data Table
Full-featured data table with search, sort, pagination, and column visibility toggle. Uses Alpine.js for client-side state.