ComponentsData DisplayAccordion

Accordion

10 variants · single + multiple · badge · icon · subtitle · image

DefaultBorderedFilledCardFlushSeparatedGradientPlus / minusNumberedImageMultiple open

Overview

10 variants · single + multiple · badge · icon · subtitle · image

Default accordion

Live preview

Reveal supporting content without forcing someone to leave the current context.

A shared collection of reusable components, patterns, and standards.
AccordionExample.tsx
tsx
import { Accordion, AccordionItem } from 'omverse-ui'
 
<Accordion defaultValue="item-1">
<AccordionItem value="item-1" title="What is a design system?">
A design system is a collection of reusable components guided by clear
standards that can be assembled to build any number of applications.
</AccordionItem>
<AccordionItem value="item-2" title="How do I install the package?">
Run npm install @yourscope/design-system in your project directory.
</AccordionItem>
<AccordionItem value="item-3" title="Can I customize the colors?">
Yes! All colors are defined as CSS variables in your index.css using the @theme block.
</AccordionItem>
<AccordionItem value="item-4" title="Is TypeScript supported?">
Fully supported. Every component exports its props type for complete type safety.
</AccordionItem>
</Accordion>

Use accordions for related sections that benefit from progressive disclosure. Keep essential instructions visible outside collapsed panels.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Accordion when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Default

Live preview

Clean accordion with underline dividers — single open mode

A design system is a collection of reusable components guided by clear standards that can be assembled to build any number of applications.
App.tsx
tsx
import { Accordion, AccordionItem } from 'omverse-ui'
 
<Accordion defaultValue="item-1">
<AccordionItem value="item-1" title="What is a design system?">
A design system is a collection of reusable components guided by clear
standards that can be assembled to build any number of applications.
</AccordionItem>
<AccordionItem value="item-2" title="How do I install the package?">
Run npm install @yourscope/design-system in your project directory.
</AccordionItem>
<AccordionItem value="item-3" title="Can I customize the colors?">
Yes! All colors are defined as CSS variables in your index.css using the @theme block.
</AccordionItem>
<AccordionItem value="item-4" title="Is TypeScript supported?">
Fully supported. Every component exports its props type for complete type safety.
</AccordionItem>
</Accordion>

Bordered

Live preview

Full outer border with dividers between items — great for settings panels

Manage your account details, email preferences, and connected applications.
App.tsx
tsx
<Accordion variant="bordered" defaultValue="b-1">
<AccordionItem value="b-1" title="Account settings">
Manage your account details, email preferences, and connected applications.
</AccordionItem>
<AccordionItem value="b-2" title="Privacy & security">
Control your privacy settings and manage two-factor authentication.
</AccordionItem>
<AccordionItem value="b-3" title="Notifications">
Configure how and when you receive email and push notifications.
</AccordionItem>
</Accordion>

Filled

Live preview

Secondary tonal background fills the accordion container

We offer the most comprehensive design system with TypeScript, dark mode, and accessibility built in.
App.tsx
tsx
<Accordion variant="filled" defaultValue="f-1">
<AccordionItem value="f-1" title="Why choose our platform?">
We offer the most comprehensive design system with TypeScript,
dark mode, and accessibility built in.
</AccordionItem>
<AccordionItem value="f-2" title="What's included in Pro?">
Unlimited projects, priority support, advanced analytics, and custom domains.
</AccordionItem>
<AccordionItem value="f-3" title="Is there a free trial?">
Yes! Start with our free plan — no credit card required.
</AccordionItem>
</Accordion>

Card — with icon + badge

Live preview

Card variant supports icon, iconBg, badge, badgeColor, and subtitle on each item

Configure your workspace name, timezone, and default language settings.
App.tsx
tsx
<Accordion variant="card" defaultValue="c-1">
<AccordionItem
value="c-1"
title="General settings"
subtitle="Manage your workspace"
icon="settings"
iconBg="bg-secondary-container"
>
Configure your workspace name, timezone, and default language settings.
</AccordionItem>
<AccordionItem
value="c-2"
title="Team members"
subtitle="5 members · 2 pending"
icon="info"
iconBg="bg-primary-container"
badge="2 pending"
badgeColor="default"
>
Manage team access and permissions for your workspace.
</AccordionItem>
<AccordionItem
value="c-3"
title="Security"
subtitle="2FA not enabled"
icon="alert-circle"
iconBg="bg-error-container"
badge="Action needed"
badgeColor="error"
>
Enable two-factor authentication to secure your account.
</AccordionItem>
</Accordion>

Flush — multiple open

Live preview

No outer border, dividers only — mode=multiple allows any combination to be open

App.tsx
tsx
<Accordion variant="flush" mode="multiple">
<AccordionItem value="fl-1" title="What is included?">
All components, dark mode, TypeScript types, and full documentation.
</AccordionItem>
<AccordionItem value="fl-2" title="How does licensing work?">
Single license covers unlimited projects for one developer.
</AccordionItem>
<AccordionItem value="fl-3" title="Can I use in commercial projects?">
Yes, the license covers commercial use without any restrictions.
</AccordionItem>
</Accordion>

Separated

Live preview

Each item is an individual card separated by a gap

Install the package and follow the setup guide to get started quickly.
App.tsx
tsx
<Accordion variant="separated" defaultValue="s-1">
<AccordionItem value="s-1" title="Getting started">
Install the package and follow the setup guide to get started quickly.
</AccordionItem>
<AccordionItem value="s-2" title="Configuration options">
Customize tokens, themes, and component defaults via your config file.
</AccordionItem>
<AccordionItem value="s-3" title="Advanced usage">
Learn about composition patterns, compound components, and more.
</AccordionItem>
</Accordion>

Gradient header

Live preview

Brand gradient header on the open trigger — ideal for marketing pages

Unlimited projects
Priority support 24/7
Advanced analytics
Custom domains
Team collaboration
App.tsx
tsx
<Accordion variant="gradient" defaultValue="g-1">
<AccordionItem value="g-1" title="Pro features" subtitle="Everything you need to scale">
{/* feature list */}
</AccordionItem>
<AccordionItem value="g-2" title="Team collaboration" subtitle="Work together seamlessly">
{/* feature list */}
</AccordionItem>
<AccordionItem value="g-3" title="Enterprise plan" subtitle="Custom pricing and SLAs">
{/* feature list */}
</AccordionItem>
</Accordion>

Plus / minus — FAQ style

Live preview

iconStyle=plus replaces the chevron with a + / − toggle inside a rounded box

Yes! Our free plan includes 3 projects and all basic components.
App.tsx
tsx
<Accordion variant="plus" iconStyle="plus" defaultValue="p-1">
<AccordionItem value="p-1" title="Is there a free plan?">
Yes! Our free plan includes 3 projects and all basic components.
</AccordionItem>
<AccordionItem value="p-2" title="Do you offer refunds?">
We offer a 30-day money-back guarantee, no questions asked.
</AccordionItem>
<AccordionItem value="p-3" title="How do I cancel my subscription?">
You can cancel anytime from your account settings page.
</AccordionItem>
<AccordionItem value="p-4" title="Can I upgrade or downgrade?">
Yes, plan changes take effect immediately and are prorated.
</AccordionItem>
</Accordion>

Numbered — onboarding steps

Live preview

step prop shows a numbered circle before the title

Sign up with your email or continue with Google or GitHub.
App.tsx
tsx
<Accordion variant="numbered" defaultValue="n-1">
<AccordionItem value="n-1" title="Create your account" step={1}>
Sign up with your email or continue with Google or GitHub.
</AccordionItem>
<AccordionItem value="n-2" title="Set up your workspace" step={2}>
Name your workspace and configure basic settings.
</AccordionItem>
<AccordionItem value="n-3" title="Invite your team" step={3}>
Add teammates by email and assign their roles and permissions.
</AccordionItem>
<AccordionItem value="n-4" title="Build your first project" step={4}>
Create a new project and start using your design system components.
</AccordionItem>
</Accordion>

Image / media

Live preview

image prop shows an emoji in a gradient side panel — subtitle provides context

A complete design system with 30+ components, dark mode support, and full TypeScript definitions.

ReactTypeScriptTailwindDark mode
App.tsx
tsx
<Accordion variant="image" defaultValue="i-1">
<AccordionItem
value="i-1"
title="Design system"
subtitle="30 components · TypeScript"
image="🎨"
>
A complete design system with 30+ components, dark mode support,
and full TypeScript definitions.
</AccordionItem>
<AccordionItem
value="i-2"
title="Starter templates"
subtitle="12 templates · Next.js"
image="🚀"
>
Production-ready templates for dashboards, landing pages, and SaaS applications.
</AccordionItem>
<AccordionItem
value="i-3"
title="Component library"
subtitle="50+ components · React"
image="⚛️"
>
Every component is accessible, typed, and follows your design tokens automatically.
</AccordionItem>
</Accordion>

Multiple open at once

Live preview

mode=multiple lets any number of items be open simultaneously

This item starts open. Multiple items can be open simultaneously.
This item also starts open. All three can be open at the same time.
App.tsx
tsx
<Accordion variant="bordered" mode="multiple" defaultValue={['m-1', 'm-3']}>
<AccordionItem value="m-1" title="First item — open by default">
This item starts open. Multiple items can be open simultaneously.
</AccordionItem>
<AccordionItem value="m-2" title="Second item — click to open">
Click to expand without closing other items.
</AccordionItem>
<AccordionItem value="m-3" title="Third item — also open">
This item also starts open. All three can be open at the same time.
</AccordionItem>
</Accordion>

Accordion props

AccordionItem props

Props / API

Api Props

Props

PropTypeDefaultDescription
defaultValuestring | string[]—Initially open item(s) — string for single, array for multiple
valuestring | string[]—Controlled open item(s)
onValueChange(value: string | string[]) => void—Callback fired when open items change
mode'single' | 'multiple''single'Allow one or multiple items open at a time
variant'default' | 'bordered' | 'filled' | 'card' | 'flush' | 'separated' | 'gradient' | 'plus' | 'numbered' | 'image''default'Visual style of the accordion
iconStyle'chevron' | 'plus' | 'arrow' | 'none''chevron'Style of the expand/collapse icon
childrenReactNode—AccordionItem components
valuestring—Unique identifier for this item
titlestring—Header text shown in the trigger button
subtitlestring—Subtitle shown below the title
iconIconName—Leading icon name in the trigger
iconBgstring—Tailwind class for the icon container background
badgestring—Badge label shown in the trigger
badgeColor'default' | 'error' | 'success' | 'warning''default'Color of the badge chip
stepnumber—Step number badge before the title (numbered variant)
imagestring—Emoji shown in a side panel (image variant)
imageAltstring—Accessible alt text for the image/emoji
disabledbooleanfalsePrevents the item from being opened
childrenReactNode—Content shown when the item is open