design-infraAccordion expand vs similar
3 options side by side. Our @design-infra pieces render live under the design system you choose; upstream pieces show their live demo where the host allows embedding, otherwise a screenshot with a link to the real thing. Pick or pass, then copy the feedback for your agent.
Frequently asked questions
Still stuck? Our team answers in under an hour.
Yes. Add it in project settings; we provision TLS automatically within a minute.drop-inCalmTrustworthyFAQ section on the shadcn accordion: heading left / questions right (split) or centred single column (stacked).
$npx shadcn@latest add @design-infra/faq- state — subtlerecipeRefinedMinimalPlayful
motion · low cost
`layout` prop: elements animate to their new size/position when state changes (expanding cards, accordion rows, reflowing grids). No height hacks. Free example (motion is MIT); copy and adapt the source from the example page.
$pnpm add motion # then adapt the free source from https://motion.dev/examples/react-layout-animation - No preview yetOpen live demo ↗enter · press · hover · state — subtlerecipeRefined
motion · low cost
design-infra's motion languages (still / quiet / lively / cinematic) as motion/react transitions, springs and variants (fadeUp, scaleIn, stagger, press, lift). Set PROJECT_MOTION to your DESIGN.md `motion:` so hand-written animations match the system.
$npx shadcn@latest add @design-infra/motion-presets
Feedback for your agent
Pick or pass on each option (add a reason if you like), then paste this back into your agent's chat.
From design-infra compare — Accordion expand vs similar: (no picks yet) Compare: https://www.owencoonahan.xyz/design-infra/compare?ids=oc/faq,motion/layout-animation,oc/motion-presets&theme=editorial&label=Accordion+expand+vs+similar