Data Display components
16 Data Display components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Avatar, Badge, Carousel, CountryFlag, Data Table, EntityList, Infolist, InterimBadge, LangTag, ScreenshotFrame, SourceBadge, StatCard, Status, Table, Timeline, UsageMeter.
- AvatarPerson or workspace image with an initials fallback, in four sizes and circle or square shapes.
- BadgeSmall chip for a status, brand or accent label, or a user-defined tag in one of nine hues.
- CarouselSwipeable slide carousel on Embla. Previous/next buttons, dots, direction-aware keyboard arrows, optional autoplay that respects reduced motion. Everything mirrors in RTL.
- CountryFlagA country's flag as an SVG (3:2, one line of text tall) from its ISO code. Looks the same on every platform, including Windows, where flag emoji do not render.
- Data TableThe interactive layer on top of Table. A useDataTable hook plus opt-in pieces for sorting (multi-column), search, facet and range filters, column visibility, pinning and resizing, expandable rows, selection with bulk actions, row actions, keyboard navigation, pagination with page sizes, and loading, empty and error states.
- EntityListA list of records shown as a DataTable or as a grid of cards with a view toggle, search, multi-value facet filters, bulk select, row actions, loading skeletons, an error state and an empty state. The base for ContactList, CompanyList and ProjectList.
- InfolistA read-only description list for a record's detail page, turning enum and boolean values into badges, with links, copy buttons, sections, and a column layout.
- InterimBadgeMarks content that is partial and still arriving: a streamed answer, a total before every source has reported, a draft figure. An outlined badge with a spinner and a word.
- LangTagThe language of a piece of content (not of the interface): a small coloured code tag beside a title, message or document, read aloud as the language's full name.
- ScreenshotFrameFrames a product screenshot as a window, browser or phone in neutral greys; with a label it becomes one accessible image.
- SourceBadgeWhere a record came from (a plugin, an integration, a feed) as a small icon-and-name chip, with an icon-only compact form, a brand-coloured icon and an optional external link.
- StatCardKPI tile with a label, a large tabular figure, a good/bad delta, an optional sparkline and icon, a loading skeleton, and a responsive StatGrid.
- StatusInline status, an icon plus a label with no container; each of five tones has its own icon shape so it reads without colour.
- TableStyled primitives for a native HTML table (rows, heads, cells, caption, footer) inside a horizontally scrolling container. No sorting, selection or pagination.
- TimelineVertical list of events with a rail on the inline-start side, an icon or avatar marker, title, description and relative time.
- UsageMeterA quantity used against its limit (count, money or hours) with warning and danger thresholds, an unlimited state, budget burn with a pace projection, and a plan usage panel with an overage estimate strip.
LeadsInbox
Inquiries from your forms with where each came from (UTM, referrer, Google click id), a stage pipeline with counts, a detail panel with reply and canned replies, and conversion into a CRM contact.
Avatar
Person or workspace image with an initials fallback, in four sizes and circle or square shapes.