Stagger
Complete keyed content with an optional short fade or rise as the rendered content appears.
When to use it. Use it to decorate a small list or content group. Do not use it to defer required information, observe viewport entry or announce task progress.
Stagger primary example
How it works
-
<.stagger>The default div wrapper does not claim a list. Choose as=:ul or :ol to render native li items. Stable keyed trusted HEEx slots are not cloned. The effect is optional presentation, not loading, readiness or a navigation widget. -
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; :stagger 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
DOM order, links and forms stay native. Content starts visible; animated opacity never drops below 0.5. Focus reveals an item immediately and cancels its effect. Removing CSS or interrupting the animation restores full visibility. Excess items beyond the one-second budget appear immediately.
| Feature | Locked-engine evidence | When missing |
|---|---|---|
| Native baseline | Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. | effect=:none is default. Missing animation CSS, motion=:none, ancestor data-shadcn-motion=reduce and OS reduced motion retain all content. There is no observer, looping offscreen work or viewport-enter trigger; a finite entrance can finish before you scroll to it. Reload to inspect render-time effects; restoring styles or replacing content can replay them. |
| Exact fallback | The locked-engine matrix retains the documented native or static outcome. | effect=:none is default. Missing animation CSS, motion=:none, ancestor data-shadcn-motion=reduce and OS reduced motion retain all content. There is no observer, looping offscreen work or viewport-enter trigger; a finite entrance can finish before you scroll to it. Reload to inspect render-time effects; restoring styles or replacing content can replay them. |
Application ownership and API
You own item semantics, actions, form submission, ordering and patch boundaries. Native inputs in this demo edit only local values and Reset restores defaults; nothing is saved. Replacement can replay the render-time effect and reset controls. There is no animation-once guarantee or application state synchronization.
Attributes and item slots. Required id and keyed item slots with trusted HEEx; optional slot class/rest. as=:div|:ul|:ol, effect=:none|:fade|:rise, preset=:quick (150ms duration / 50ms interval)|:default (250ms / 75ms). Only delay+duration <=1000ms is admitted; all excess items are immediate. motion=:system|:none, root class/rest. Required wrappers, IDs, roles, motion markers and generated numeric timing style are protected. No arbitrary duration, delay, selector or animation CSS input.
Provenance
Catalogue identity motion.stagger, 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.
Replace toggle-to-hide and unbounded sibling-index delays with stable keyed trusted HEEx, explicit div/ul/ol semantics, none/fade/rise effects, closed timing presets capped at one second and immediately visible excess items. Keep content visible on focus/interruption, no duplication, observer or replay state.