Accordion

Collapsible sections with CSS grid animation. Supports single or multiple open items, three visual variants, and controlled/uncontrolled modes.

View source Installation

Preview

VelocityUI is a modern, accessible React component library with CSS Modules scoped styles and full TypeScript support.

Yes, VelocityUI is open source and available under the MIT license.

Yes, VelocityUI uses CSS custom properties and named theme classes for comprehensive theming support.

Import

import { Accordion } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
items	`AccordionItem[]`	—	Array of { value, title, content, disabled? } definitions.
defaultValue	`string \| string[]`	—	Initially open item(s) for uncontrolled mode.
value	`string \| string[]`	—	Controlled open item(s).
onChange	`(value: string \| string[]) => void`	—	Callback when open state changes.
multiple	`boolean`	`false`	Allow multiple sections open simultaneously.
variant	`'bordered' \| 'flush' \| 'separated'`	`'bordered'`	Visual style of the accordion container.

Examples

Basic

import { Accordion } from '@velocityuikit/velocityui'

const items = [
  { value: 'q1', title: 'What is VelocityUI?', content: 'A modern, accessible React component library.' },
  { value: 'q2', title: 'Is it free to use?', content: 'Yes, it is open source under the MIT license.' },
  { value: 'q3', title: 'Does it support theming?', content: 'Yes, via CSS custom properties and named theme classes.' },
]

export default function Example() {
  return <Accordion items={items} defaultValue="q1" />
}

Multiple open + separated variant

import { Accordion } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Accordion
      variant="separated"
      multiple
      defaultValue={['a', 'b']}
      items={[
        { value: 'a', title: 'Section A', content: 'Content A' },
        { value: 'b', title: 'Section B', content: 'Content B' },
        { value: 'c', title: 'Section C', content: 'Content C' },
      ]}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */