What it does
Each item manages its own open state while sharing motion presets for expand and collapse.
Use semantic buttons for triggers so screen readers expose the expanded/collapsed state clearly.
Composition and API
Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.
Forward refs where you attach measurements or analytics. Avoid nesting interactive controls inside triggers.
Common use cases
- FAQ pages that keep SEO-friendly headings while hiding verbose answers.
- Settings screens that group advanced options per section.
- Docs sites that reveal code samples on demand.
- Mobile-first navigation stacks with limited vertical space.
Accessibility
Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.
This preview page exposes a single h1 in the hero for a clean outline.
Next.js integration notes
Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.
Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.
FAQ
Does the Accordion component work with Next.js App Router?
Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.
Can I customize accordion with Tailwind CSS?
Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.
Is this Accordion implementation accessible by default?
Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.