Cover Flow
A complete native Carousel list of image figures with optional image-only depth as you scroll.
When to use it. Use it for a finite visual collection whose captions and ordinary destinations must remain readable. Choose flat when depth adds no value.
Cover Flow primary example
How it works
-
<.cover_flow>An ordered list of figures, not a slideshow, tab widget or selected-image model. Stable keys derive instance-local item/caption IDs and CSS timeline names. There are no clones, autoplay, fake controls, live announcements or generated scroll markers. -
package CSSPackage CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract. -
gallery onlyTheme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :cover_flow does not ship them. -
application boundaryShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.
Examples use package semantic tokens in explicit light and dark scopes.
Accessibility and browser support
Tab reaches the named native scroll region, destination links and real fragment index. Native arrows, wheel and touch scroll; index links focus their list item. Every item stays in document order. Images cannot capture another link's hit target; captions and links never transform.
| Feature | Locked-engine evidence | When missing |
|---|---|---|
| Native baseline | Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. | Flat by default when a container is below 40rem, has one image, lacks joint view-timeline/range/scope/3D support, uses forced colors or suppresses motion. Enhanced is permission, not a promise. No document-clock substitute runs. Stationary sources do not advance depth. CSS-disabled and no-script output retain all figures, alt, captions and destinations; broken images retain meaning. Replacement may reset native scrolling and focus. |
| Exact fallback | The locked-engine matrix retains the documented native or static outcome. | Flat by default when a container is below 40rem, has one image, lacks joint view-timeline/range/scope/3D support, uses forced colors or suppresses motion. Enhanced is permission, not a promise. No document-clock substitute runs. Stationary sources do not advance depth. CSS-disabled and no-script output retain all figures, alt, captions and destinations; broken images retain meaning. Replacement may reset native scrolling and focus. |
Application ownership and API
You own image rights/privacy, URLs, alternative text, dimensions, responsive candidates, captions, destinations and restoration after replacement. The package does not fetch, resize, persist or select images.
Attributes and item slots. Required id, exactly one accessible_label/labelledby (caller heading IDs), and nonempty images. Each atom-keyed record requires unique string key, src, explicit alt, positive width/height; optional name, escaped caption, href, width-candidate srcset plus sizes, loading=:lazy|:eager, decoding=:async|:sync|:auto. Decorative images need decorative:true, empty alt and independent name. presentation=:enhanced|:flat (enhanced default); snap=:none|:proximity|:mandatory, alignment=:start|:center, motion=:system|:none. Optional escaped description, class/rest; required semantics and generated style are protected. No slots or arbitrary transform/timeline input.
Provenance
Catalogue identity media.cover-flow, adapted from
unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63
under its MIT notice.
The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.
Compose validated responsive image figures over native Carousel and real index links. Gate bounded image-only depth on joint view timeline/range/scope/3D support, wide container and motion permission. Keep captions and destinations untransformed; omit reflections, overlap, animated stacking, generated controls and runtime.