# 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.

Source: https://docs.nasaqui.com/components/groups/data-display

- [Avatar](https://docs.nasaqui.com/components/avatar): Person or workspace image with an initials fallback, in four sizes and circle or square shapes.
- [Badge](https://docs.nasaqui.com/components/badge): Small chip for a status, brand or accent label, or a user-defined tag in one of nine hues.
- [Carousel](https://docs.nasaqui.com/components/carousel): Swipeable slide carousel on Embla. Previous/next buttons, dots, direction-aware keyboard arrows, optional autoplay that respects reduced motion. Everything mirrors in RTL.
- [CountryFlag](https://docs.nasaqui.com/components/country-flag): A 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 Table](https://docs.nasaqui.com/components/data-table): The 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.
- [EntityList](https://docs.nasaqui.com/components/entity-list): A 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.
- [Infolist](https://docs.nasaqui.com/components/infolist): A 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.
- [InterimBadge](https://docs.nasaqui.com/components/interim-badge): Marks 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.
- [LangTag](https://docs.nasaqui.com/components/lang-tag): The 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.
- [ScreenshotFrame](https://docs.nasaqui.com/components/screenshot-frame): Frames a product screenshot as a window, browser or phone in neutral greys; with a label it becomes one accessible image.
- [SourceBadge](https://docs.nasaqui.com/components/source-badge): Where 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.
- [StatCard](https://docs.nasaqui.com/components/stat-card): KPI tile with a label, a large tabular figure, a good/bad delta, an optional sparkline and icon, a loading skeleton, and a responsive StatGrid.
- [Status](https://docs.nasaqui.com/components/status): Inline status, an icon plus a label with no container; each of five tones has its own icon shape so it reads without colour.
- [Table](https://docs.nasaqui.com/components/table): Styled primitives for a native HTML table (rows, heads, cells, caption, footer) inside a horizontally scrolling container. No sorting, selection or pagination.
- [Timeline](https://docs.nasaqui.com/components/timeline): Vertical list of events with a rail on the inline-start side, an icon or avatar marker, title, description and relative time.
- [UsageMeter](https://docs.nasaqui.com/components/usage-meter): A 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.