Media
Images, video, iframes, galleries, carousels, avatars, and logos. Every sample below is exhaustive — each labeled row shows every variant, size, and state.
Avatar
Image with initials fallback. Every size, shape, and tone — seeded with Sundanese sample people.
<Avatar initials="AN" tone="primary" size="lg" />AvatarStack
Overlapping avatar group with overflow chip. Every size, spacing, and the reverse + max states — seeded with Sundanese sample people.
<AvatarStack max={4} spacing="normal"><Avatar initials="AN" />…</AvatarStack>Image
Tokenised wrapper over native img. Every rounded step, every object-fit, and the aspectRatio wrapper.
'/></svg>)
<Image src="/hero.webp" alt="…" width={280} height={210} rounded="md" fit="cover" />VideoEmbed
YouTube / Vimeo / native player with an a11y title. Provider auto-detection plus custom aspect ratio.
<VideoEmbed src="https://youtu.be/…" title="Product demo" />IframeEmbed
Generic sandboxed iframe. Default and custom aspect ratios.
<IframeEmbed src="https://example.com" title="Example page" aspectRatio={16/9} />Gallery
Thumbnail grid. Every column count plus the clickable (onImageClick) state that wires into the Lightbox.
Purple surface 
Gold surface 
Emerald surface 
Indigo surface 
Rose surface 
Amber surface
Purple surface Gold surface Emerald surface Indigo surface Rose surface Amber surface
Purple surface Gold surface Emerald surface Indigo surface Rose surface Amber surface
<Gallery images={images} columns={3} onImageClick={(i) => open(i)} />Lightbox
Full-screen image viewer with arrow keys, counter, and optional thumbnails.
<Lightbox images={images} open={open} onOpenChange={setOpen} showThumbnails />Carousel
Horizontal content carousel. Arrows + dots, autoplay with pause-on-hover, and multi-slide views.
<Carousel showArrows showDots autoplay pauseOnHover autoplayInterval={4000}>…</Carousel>LogoPlate
Consistent frame for client or partner logos. Every size, shape, and tone, plus bordered + shadow.
<LogoPlate tone="subtle" shape="rounded" bordered><Logo /></LogoPlate>MapPlaceholder
Static map tile with an 'Open in Maps' action. With and without the action button.
Kagiswilerstrasse 17, 6060 Sarnen, Switzerland
Bandung, West Java, Indonesia
<MapPlaceholder address="…" lat={46.9} lng={8.2} onOpenInMaps={() => {}} />GenericMarquee
Infinite-scroll container with pause-on-hover and edge fades.
<GenericMarquee pauseOnHover fadeEdges>…</GenericMarquee>Masonry
CSS-column-based responsive masonry layout.
<Masonry columns={3} gap="md">…</Masonry>