Data-display

252 components

data-display0
daisyUI Avatar
A team avatar group with initials placeholders and online or offline presence rings.
daisyUIavatardaisyuidata-displayMIT
data-display0
Chakra UI Wrap
Topic chips that flow onto new lines with Wrap and WrapItem as topics are added.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Timeline
An order history Timeline that advances to the next shipping event on demand.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Text
A product description rendered with Text that switches between truncated, clamped and full.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Tag
Label tags in several colour palettes with labelled close triggers and a restore action.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Table
An invoices table built from Table parts with a sortable amount column.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Stat
Revenue and churn stats with labels, value text, units and up/down indicators.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Stack
Contact actions laid out with HStack or VStack and divided by StackSeparator.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Simple Grid
A metrics board that switches SimpleGrid between fixed columns and an auto-fit minimum width.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Separator
Profile details split by Separators whose variant and orientation switch locally.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Scroll Area
A changelog in a ScrollArea with a custom scrollbar and a jump-to-top control.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI QR Code
An event check-in QR Code generated locally from an editable ticket code.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Prose
A release article styled by the Chakra UI Prose composition, with headings, lists, a quote, code and a table in two sizes.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Marquee
A scrolling partner strip built from Marquee that pauses on interaction or from a control.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Mark
A review comment with the key phrase highlighted by Mark in a locally chosen variant.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI List
Setup instructions that switch between a numbered and a bulleted List.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Kbd
A keyboard shortcut reference with Kbd keys that switch between Mac and Windows.
Chakra UIchakra-uidata-displayinteractiveMIT
data-display0
Chakra UI Image
A responsive cover image with object-fit and corner radius switched from local controls.
Chakra UIchakra-uidata-displayimageMIT
data-display0
Chakra UI Icon
Feature icons rendered through Icon with size and colour palettes switched locally.
Chakra UIchakra-uidata-displayiconMIT
data-display0
Chakra UI Hover Card
A teammate mention that shows a profile hover card on hover or focus.
Chakra UIchakra-uidata-displayhover-cardMIT
data-display0
Chakra UI Highlight
Search results whose query words are highlighted with Chakra Highlight.
Chakra UIchakra-uidata-displayhighlightMIT
data-display0
Chakra UI Heading
A page header using Chakra Heading sizes while keeping the semantic heading level.
Chakra UIchakra-uidata-displayheadingMIT
data-display0
Chakra UI Grid
A dashboard grid with a wide featured item using Grid and GridItem spans.
Chakra UIchakra-uidata-displaygridMIT
data-display0
Chakra UI Format Number
Revenue figures formatted with FormatNumber as currency, compact or percent.
Chakra UIchakra-uidata-displayformat-numberMIT