ComponentsData DisplayAccordion

Accordion

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

DefaultBorderedFilledCardFlushSeparatedGradientPlus / minusNumberedImageMultiple open

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

1import { Accordion, AccordionItem } from 'omverse-ui'
2 
3<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>
17</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

1<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>
11</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

1<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>
12</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

1<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>
33</Accordion>

Flush — multiple open

Live preview

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

App.tsx

tsx

1<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>
11</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

1<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>
11</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

1<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>
11</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

1<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>
14</Accordion>

Numbered — onboarding steps

Live preview

step prop shows a numbered circle before the title

App.tsx

tsx

1<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>
14</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

1<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>
27</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

1<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>
11</Accordion>

Accordion 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

iconStyle'chevron' | 'plus' | 'arrow' | 'none''chevron'Style of the expand/collapse icon

childrenReactNode—AccordionItem components

AccordionItem props

Props

PropTypeDefaultDescription

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