Display

Accordion

Smoothly expanding sections for organizing large amounts of content.

FAQ & Support

A complete real-world simulation of a help center. Includes custom icons, controlled state, and toggleable multiple expansion.

Allow Multiple Expansion:

How do I upgrade my plan?

You can upgrade your plan at any time from your dashboard settings. Upgrades take effect immediately.

Can I cancel my subscription?

Is there a free trial available?

Active Section IDs: item-1

'use client'

import { Accordion, Stack, Text, Toggle, Icon } from 'biibaos'
import { Zap, X, Plus } from 'lucide-react'
import { useState } from 'react'

export default function FAQ() {
  const [activeItems, setActiveItems] = useState<string[]>(['item-1'])
  const [multiple, setMultiple] = useState(false)

  return (
    <Stack direction="column" gap={24}>
      <Stack direction="row" gap={12} align="center">
        <Text variant="body-sm" color="muted">Allow Multiple Expansion:</Text>
        <Toggle checked={multiple} onChange={setMultiple} size="sm" />
      </Stack>

      <Accordion 
        allowMultiple={multiple}
        value={activeItems}
        onChange={setActiveItems}
        variant="bordered"
        items={[
          { 
            id: 'item-1', 
            title: 'How do I upgrade my plan?', 
            icon: <Icon icon={Zap} size={16} />,
            children: 'You can upgrade your plan at any time from your dashboard settings.'
          },
          { 
            id: 'item-2', 
            title: 'Can I cancel my subscription?', 
            icon: <Icon icon={X} size={16} />,
            children: 'Yes, subscriptions can be cancelled through the billing portal.'
          }
        ]}
      />
    </Stack>
  )
}

Expansion Variants

Supports default, ghost, and bordered styles to fit any UI density.

Default Style

Ghost Style

'use client'

import React from 'react'
import { Accordion, Stack } from 'biibaos'

export default function Variants() {
  return (
    <Stack direction="column" gap={16}>
      <Accordion variant="default" items={[{ title: 'Default', children: '...' }]} />
      <Accordion variant="ghost" items={[{ title: 'Ghost', children: '...' }]} />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`items`	`AccordionItemProps[]`	—	Array of item configurations with label, icon, actions, and active states
`allowMultiple`	`boolean`	false	If true, permits multiple accordion sections to be expanded concurrently
`variant`	`'default' \| 'ghost' \| 'bordered'`	'default'	Semantic design theme variant
`expandIcon`	`React.ReactNode`	—	Global icon override for all items
`value`	`string[]`	—	Controlled open item IDs
`onChange`	`(ids: string[]) => void`	—	Callback when open items change
`id`	`string`	—	Unique HTML element identifier
`title`	`React.ReactNode`	—	Structural modal header title
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`defaultOpen`	`boolean`	—	Initial expanded state for uncontrolled mode
`disabled`	`boolean`	—	If true, disables all user interaction and applies faded opacity
`icon`	`React.ReactNode`	—	Custom icon shown on the left

Badge

QR Code