Data-display

252 components

data-display0
Magic UI Pixel Image
A product photo revealed tile by tile as pixels fade in, then fading from grayscale to colour.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Orbiting Circles
Two concentric orbits of app icons circling a central hub in opposite directions, with a pause control.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Lens
A magnifying lens that follows the pointer over a product photo, with a chosen zoom level.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI iPhone
An iPhone mockup framing a local app screen that switches between two views.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Icon Cloud
A draggable 3D sphere of tool icons that spins on its own and pauses on demand.
Magic UIcompiled-cssdata-displayicon-cloudMIT
data-display0
Magic UI File Tree
An expandable project file tree with folders, files and a selected file.
Magic UIcompiled-cssdata-displayinteractiveMIT
data-display0
Magic UI Code Comparison
A before-and-after code view highlighted by shiki, with the changed lines marked.
Magic UIcompiled-cssdata-displayde-comparisonMIT
data-display0
Magic UI Avatar Circles
Overlapping contributor avatars with a count of other people, from local avatar data.
Magic UIavatar-circlescompiled-cssdata-displayMIT
data-display0
Magic UI Animated List
Activity notifications that slide in one by one with the animated list, replayable on demand.
Magic UIanimated-listcompiled-cssdata-displayMIT
data-display0
Magic UI Animated Beam
Animated beams connect a web app, an API and a database to show a request flowing between services.
Magic UIanimated-beamcompiled-cssdata-displayMIT
data-display0
Magic UI Android
An Android phone mockup framing a local app screen that switches between light and dark.
Magic UIandroidcompiled-cssdata-displayMIT
data-display0
HeroUI Typography
A short article set with HeroUI Typography heading, paragraph and inline code.
HeroUIdata-displayherouiinteractiveApache-2.0
data-display0
HeroUI Tag Group
Removable topic tags in a HeroUI Tag Group with a restore control.
HeroUIdata-displayherouiinteractiveApache-2.0
data-display0
HeroUI Table
A team members HeroUI Table with a row header, status column and sortable names.
HeroUIdata-displayherouiinteractiveApache-2.0
data-display0
HeroUI Separator
Profile details divided by HeroUI separators that switch orientation locally.
HeroUIdata-displayherouiinteractiveApache-2.0
data-display0
HeroUI Scroll Shadow
A release notes panel whose HeroUI Scroll Shadow fades the edges while more content is hidden.
HeroUIdata-displayherouiinteractiveApache-2.0
data-display0
HeroUI Kbd
Keyboard shortcuts rendered with HeroUI Kbd modifier abbreviations and key content.
HeroUIdata-displayherouiinteractiveApache-2.0
data-display0
HeroUI Color Swatch
A design-token palette rendered with HeroUI Color Swatch in a chosen shape.
HeroUIcolor-swatchdata-displayherouiApache-2.0
data-display0
HeroUI Chip
Status and label chips with colour, variant and size props.
HeroUIchipherouiinteractiveApache-2.0
data-display0
HeroUI Avatar Group
A project team shown as an overlapping HeroUI Avatar Group with an overflow count.
HeroUIavatar-groupdata-displayherouiApache-2.0
data-display0
HeroUI Avatar
Avatars with an image, initials fallback and soft colour variants.
HeroUIavatarherouiinteractiveApache-2.0
data-display0
Flowbite React Timeline
Vertical shipment timeline with time, title and body slots.
Flowbite Reactflowbite-reactinteractivetimelineMIT
data-display0
Flowbite Table
A striped invoices Table with a sortable amount column.
Flowbite Reactdata-displayflowbite-reactflowbite-tableMIT
data-display0
Flowbite List
Setup steps shown with Flowbite List, switching between ordered and unordered.
Flowbite Reactdata-displayflowbite-listflowbite-reactMIT