Accordion

Expandable sections for organizing and hiding content. Users can reveal or hide sections by clicking on headers.

check_circleWhen to use

  • When you need to present multiple related sections of content without overwhelming the user
  • For FAQs, documentation, or settings panels with collapsible sections
  • When vertical space is limited and content needs to be progressively disclosed
  • To organize complex information into digestible, scannable chunks

cancelWhen not to use

  • When all content should be visible by default for quick scanning
  • For navigation purposes - use tabs or a sidebar instead
  • When there are only 1-2 items - consider showing them expanded
  • If users need to compare content across sections simultaneously

Default Variant

Multiple Open (default)

Vilkus is a comprehensive design system built with React, TypeScript, and Next.js. It provides a consistent set of components, tokens, and guidelines for building modern web applications.
Install the package via npm or yarn, import the components you need, and start building. All components are fully typed with TypeScript and support CSS modules for styling.
Yes! The design system is built on design tokens that can be customized through CSS variables. You can modify colors, spacing, typography, and more to match your brand.
With Icons

Single Open

Content for the first section.
Content for the second section.
Content for the third section.
Only one section open at a time
tsx
import { Accordion } from '@/components/Accordion';

const items = [
  {
    id: '1',
    title: 'What is the Vilkus Design System?',
    icon: 'palette',
    content: 'Vilkus is a comprehensive design system...',
  },
  // ... more items
];

<Accordion 
  items={items} 
  defaultExpanded={['1']}
/>

Bordered Variant

Cards with Borders

Vilkus is a comprehensive design system built with React, TypeScript, and Next.js. It provides a consistent set of components, tokens, and guidelines for building modern web applications.
Install the package via npm or yarn, import the components you need, and start building. All components are fully typed with TypeScript and support CSS modules for styling.
Yes! The design system is built on design tokens that can be customized through CSS variables. You can modify colors, spacing, typography, and more to match your brand.
Card-style accordion
tsx
<Accordion 
  items={items} 
  variant="bordered"
/>

Sizes

Small

Content for the first section.
Content for the second section.
Compact accordion

Medium (default)

Content for the first section.
Content for the second section.
Standard size

Large

Content for the first section.
Content for the second section.
Spacious accordion
tsx
<Accordion items={items} size="small" />
<Accordion items={items} size="medium" />
<Accordion items={items} size="large" />

Controlled Mode

External Control

Use the expanded and onChange props to control the accordion state from a parent component.

Content for the first section.
Content for the second section.
Content for the third section.
Control from parent component
tsx
const [expanded, setExpanded] = useState<string[]>(['1']);

<Accordion 
  items={items}
  expanded={expanded}
  onChange={setExpanded}
/>

Props

PropTypeDefaultDescription
items*AccordionItemData[]—Array of accordion items with id, title, content, and optional icon
allowMultiplebooleantrueAllow multiple items to be open at once
defaultExpandedstring[][]Initially expanded item IDs (uncontrolled)
expandedstring[]—Controlled expanded items
onChange(expandedIds: string[]) => void—Callback when expanded items change
size'small' | 'medium' | 'large''medium'Size of the accordion items
variant'default' | 'bordered''default'Visual style variant

Accessibility

  • Keyboard Navigation: Use Enter or Space to toggle accordion items
  • ARIA Attributes: Uses aria-expanded and aria-controls for screen readers
  • Focus Management: Visible focus indicators on accordion headers
  • Semantic HTML: Uses button elements for headers and proper heading hierarchy
  • Region Landmark: Content sections use role="region" for better navigation