The explorer for the shadcn registry ecosystem.
[Motion Menu] "put an orbit behind it" — three bordered rings and a single point circling them, like a diagram of a very small solar system.
[Motion Menu] "invite accept card is <n>" — an avatar-led banner naming who invited you and to where, with Accept/Decline; the visual only, wire it to your own invite system.
[Motion Menu] "switch organisations" — the account menu every multi-tenant product needs and most get wrong.
[Motion Menu] "give me an outlined wordmark hero" — a stroked, unfilled name fills the space, tag and caption underneath; reach for it when the brand's own name is the visual.
[Motion Menu] "put the wordmark in the footer, huge" — an outlined giant mark behind a plain three-link nav.
[Motion Menu] "let the next section peek up" — a raised card for the next act overlaps the bottom of the one above it.
[Motion Menu] "put an oversized glyph behind the text" — a giant ampersand or numeral used as background texture, not as a letterform.
[Motion Menu] "page header is <n>" — breadcrumb and title on the left, a secondary and primary action on the right, on a shared hairline; reach for it as the top bar of a dashboard working page.
[Motion Menu] "passkey prompt" — a biometric-style prompt with a pulsing ring, labelled as a visual demo; use it to show a passkey option exists before it's actually wired up.
[Motion Menu] "login is a fingerprint — 254" — real WebAuthn create/assert against your platform authenticator. Shipping without this is security debt now.
[Motion Menu] "strength meter is <n>" — a segmented strength bar and a requirements checklist under a password field; a static visual demo, wire it to your own validation.
[Motion Menu] "payment card is <n>" — a card-face preview above number, expiry, and CVC fields, clearly marked as a visual only; reach for it to block out a checkout step before real payment wiring
[Motion Menu] "comparison split is <n>" — two centred figures either side of an arrow, this period against last; reach for it wherever a dashboard needs one number set against another. Layout only —
[Motion Menu] "permission matrix is <n>" — roles across the top, permissions down the side, dots at the intersections; reach for it as a roles-and-access settings screen. Layout only — no live grant
[Motion Menu] "per-seat calculator is <n>" — rate times seat count equals total, laid out as a formula with a seat slider beneath; reach for it for any per-user SaaS price.
[Motion Menu] "put a perspective floor under it" — a receding grid plane. Depth from two gradients and a transform.
[Motion Menu] "gate it by plan" — a locked panel that says exactly what unlocks it. Honest gating, not a tease.
[Motion Menu] "give me a price with a breakdown disclosure" — a headline price with a native, JS-free details toggle underneath that opens a line-item breakdown; reach for it when the number needs to defe
[Motion Menu] "struck price comparison is <n>" — a struck-through figure beside the current one, labelled as an example to fill in; reach for it as the template for a real price change, not a fabric
[Motion Menu] "give it a print header" — document title, reference and date on a rule. For quotes, specs and anything a client saves as a PDF.
[Motion Menu] "product accordion is <n>" — native <details> panels for spec sections, no JS, keyboard and screen-reader correct by default; reach for it when there's more product copy than fit
[Motion Menu] "product hero with spec sidebar" — a large product statement on the left, a hairline-ruled spec column on the right; reach for it as the top of a single-product page.
[Motion Menu] "show them how far in they are" — a progress rule above the ask. Nearly-done is the strongest reason to finish.
[Motion Menu] "ladder the progress" — labelled bars stacked on a shared scale, so the comparison is the point.
[Motion Menu] "show the chain" — origin to delivery as linked stages. Where a claim about sourcing becomes checkable.
[Motion Menu] "provider stack" — a borderless stack of generic provider buttons above an email fallback; swap the generic marks for real providers once the integration exists.
[Motion Menu] "proof is one pull quote" — oversized quote, hairline, attribution. One strong quote beats a wall of three.
[Motion Menu] "proof is <n>" — a single oversized quote with a rule accent; reach for it when one strong line carries more weight than a wall of three.
[Motion Menu] "open with the question they came with" — their problem in their words, answered underneath.
[Motion Menu] "absorb the spike via 262" — push the producer past the consumer and watch the queue fill, then overflow. Every outage post-mortem, one slider.
[Motion Menu] "quiet CTA to close an article" — a hairline, a soft line of copy, one understated arrow link.
[Motion Menu] "break the copy with a quote" — a full-width interruption between paragraphs. Resets the reader's attention.
[Motion Menu] "proof is <n>" — a quote paired with a gradient avatar instead of a photo; reach for it when you want a face-shaped anchor without a real headshot.
[Motion Menu] "set the quote over the frame" — type on imagery with a legibility scrim, done properly.
[Motion Menu] "give me a quote breakdown panel" — a numbered estimate with line items and a totalled amount; reach for it for services or project-based pricing rather than a subscription.
[Motion Menu] "rating scale is <n>" — a numbered 1-to-5 row between two end labels, built on real radio inputs; reach for it for an NPS-style question.
[Motion Menu] "summarise the rating" — a score, a scale, and a count. Generic placeholders; swap in your real figures.
[Motion Menu] "add a reading progress bar" — a hairline that fills as the page is read, with a percentage readout.
[Motion Menu] "recovery codes are <n>" — a blurred code grid that sharpens when a checkbox is checked, pure CSS via :has(); reach for it wherever backup codes need a deliberate look-before-you-copy
[Motion Menu] "reorder list is <n>" — rows carrying a six-dot drag handle and an order badge; a static illustration of the affordance, wire real drag-and-drop in yourself.
[Motion Menu] "lay a ridge line behind it" — three clip-path horizons stacked for depth, the furthest drifting almost too slow to notice.
[Motion Menu] "show it as a ring gauge" — a conic-gradient dial with the figure inside. One number, one glance.
[Motion Menu] "stamp a rotated tag on the seam" — a small angled label sitting on the rule like a marginal note.
[Motion Menu] "rotate the noun" — one headline, a word that cycles. Pure CSS keyframes, no JS, no layout shift.
[Motion Menu] "the DB is the bouncer — 264" — row-level security visualized: switch users, rows vanish. Forget a WHERE clause and nothing leaks.
[Motion Menu] "show the run as a timeline" — stage bars on a shared scale. Where the time actually went.
[Motion Menu] "add the sync status chip" — a small pill for syncing and saved states, a pulsing dot on one, a check on the other; reach for it anywhere a person edits something and needs to trust it was k
[Motion Menu] "scatter them like a photo pile" — three overlapping frames at small rotations, one lifts on hover.