Accordion

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

Import

tsx

import { Accordion } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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.

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

tsx

import { Accordion } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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

tsx

import { Accordion } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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:

css

/* 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 */
/* construction  glass  soft  high-contrast  monochrome-red */

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