Components that present rather than collect: the ImageCard media tile, the previewable Image and its Lightbox viewer, Badge/Tag label pills, Skeleton loading placeholders, the Spinner/Progress busy indicators, the Empty no-results…
Components that present rather than collect: the ImageCard media tile, the previewable
Image and its Lightbox viewer, Badge/Tag label pills, Skeleton loading
placeholders, the Spinner/Progress busy indicators, the Empty no-results placeholder,
the Descriptions label/value table, and the Carousel/Hero featured banners.
Pages
ImageCard— A single image tile for a media grid. The full image loads lazily — only once the tile nears the viewport (built on useIntersectionObserver) — showing a skeleton until it…
Image & Lightbox— A previewable image and the full-size viewer it opens. Image loads a source (fading in on load, falling back and then to an error placeholder if it fails) and, when…
Badge, Tag & CheckableTag— Three label pills built on one look. Badge is a non-interactive label — a category, a resolution, “New”. Tag adds a leading icon slot, an onClick, and an optional close…
Skeleton— Loading placeholders — the grey, gently shimmering blocks that hold content’s space until it arrives, so the layout doesn’t jump. Three pieces: Skeleton (one block), SkeletonText (a stack of lines…
Spinner, Progress & RadialProgress— Busy indicators, split by whether you know the fraction. Spinner is indeterminate — a small animated mark for work of unknown duration; Progress is a linear bar (determinate when you…
Empty— The “nothing here” placeholder — what a gallery shows when a search or filter returns no results, a list is empty, or a panel has no content yet. Three stacked…
Descriptions— A description list — the label/value table you reach for on a detail page: a wallpaper’s resolution, license, palette, and download count, or a user’s profile fields. Data-driven like Tabs:…
Carousel & Hero— Two featured-banner pieces: a Carousel that rotates through full-width slides, and a Hero full-bleed band for a headline over a photo.