Data-display

252 components

data-display0
Mantine Overflow List
Label chips that collapse into a "+N more" summary with OverflowList when the row narrows.
Mantinedata-displayinteractivemantineMIT
data-display0
Mantine Number Formatter
An invoice whose quantities, totals and tax rate are formatted with NumberFormatter.
Mantinedata-displayinteractivemantineMIT
data-display0
Mantine Marquee
A scrolling partner-logo strip with a pause control and hover pause.
Mantinedata-displayinteractivemantineMIT
data-display0
Mantine Mark
Meeting notes with action items highlighted by Mantine Mark in a chosen colour.
Mantinedata-displayinteractivemantineMIT
data-display0
Mantine List
An ordered setup checklist and an unordered list with custom icons for done items.
Mantinedata-displayinteractivelistMIT
data-display0
Mantine Kbd
A searchable keyboard shortcut sheet with key combinations rendered as Kbd.
Mantinedata-displayinteractivekbdMIT
data-display0
Mantine Indicator
An inbox button with an unread-count indicator that hides when everything is read.
Mantinedata-displayindicatorinteractiveMIT
data-display0
Mantine Image
A rounded image with a fallback, switching between cover and contain fit.
Mantinedata-displayimageinteractiveMIT
data-display0
Mantine Hover Card
A comment author name that shows a profile hover card on hover or keyboard focus.
Mantinedata-displayhover-cardinteractiveMIT
data-display0
Mantine Highlight
Search results whose matching words are highlighted as you type.
Mantinedata-displayhighlightinteractiveMIT
data-display0
Mantine Grid
Dashboard tiles in a 12-column Grid with a wide featured column.
Mantinedata-displaygridinteractiveMIT
data-display0
Mantine Flex
A header row laid out with Flex, switching direction and alignment.
Mantinedata-displayflexinteractiveMIT
data-display0
Mantine Divider
A sign-in card split by labelled horizontal dividers and a vertical divider.
Mantinedata-displaydividerinteractiveMIT
data-display0
Mantine Data List
An invoice summary in DataList with a divider option.
Mantinedata-displaydata-listinteractiveMIT
data-display0
Mantine Code
Inline and block code samples with a language switcher for an install command.
Mantinecodedata-displayinteractiveMIT
data-display0
Mantine Blockquote
Customer quotes in a Mantine Blockquote with a citation and previous/next controls.
Mantineblockquotedata-displayinteractiveMIT
data-display0
Mantine Avatar
An overlapping attendee avatar group with initials colours and a join action.
Mantineavatardata-displayinteractiveMIT
data-display0
Mantine Aspect Ratio
A video placeholder kept at 16:9, 4:3 or 1:1 by AspectRatio.
Mantineaspect-ratiodata-displayinteractiveMIT
data-display0
Magic UI Terminal
A terminal that types an install command and reveals its output line by line, replayable.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Smooth Cursor
A spring-smoothed arrow cursor that tilts in the direction of travel across the preview.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Scroll Progress
A gradient reading-progress bar pinned to the top of a long article as the preview scrolls.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Safari
A Safari browser mockup framing a local landing page, with an editable address.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Progressive Blur
A changelog panel whose top and bottom edges fade out under a progressive blur while scrolling.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Pointer
A custom animated pointer that replaces the cursor inside a pricing card.
Magic UIcompiled-cssdata-displayinteractiveMIT