k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
Switch to dark mode
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
Open navigation
Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons
k8ordo

React libraries that use Baseline features without holding back.

Packages
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI Chat
  • Generative UI
  • AI Agents
  • Storybook
Resources
  • GitHub
  • npm

© 2026 k8o — MIT License

Typeset in Noto Sans JP & M PLUS 2

Components

Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons

Accordion

A collapsible content panel.

View in Storybook

Import

Usage

k8ordo UI is a React UI component library.

Install via npm, yarn, or pnpm.

Yes, it follows WAI-ARIA accordion patterns.

Default Open

This panel is open on initial render.

This panel is closed on initial render.

Multiple Default Open

This panel is open by default.

This panel is also open by default.

This panel is closed by default.

Props

Accordion.Root

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-

Accordion.Item

children?
Type: ReactNode
Default: -
defaultOpen?
Type: boolean
Default: false
isOpen?
Type: boolean
Default: -
onChange?
Type:
(isOpen: boolean) => void
Default: -
PropTypeDefault
children?ReactNode-
defaultOpen?booleanfalse
isOpen?boolean-
onChange?(isOpen: boolean) => void-

Accordion.Button

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-

Accordion.Panel

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-
import { Accordion } from '@k8ordo/ui';
<Accordion.Root>
  <Accordion.Item>
    <h3>
      <Accordion.Button>What is k8ordo UI?</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>k8ordo UI is a React UI component library.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>How do I install it?</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>Install via npm, yarn, or pnpm.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>Is it accessible?</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>Yes, it follows WAI-ARIA accordion patterns.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
<Accordion.Root>
  <Accordion.Item defaultOpen>
    <h3>
      <Accordion.Button>Open by default</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is open on initial render.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>Closed by default</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is closed on initial render.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
<Accordion.Root>
  <Accordion.Item defaultOpen>
    <h3>
      <Accordion.Button>Section A</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is open by default.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item defaultOpen>
    <h3>
      <Accordion.Button>Section B</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is also open by default.</p>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item>
    <h3>
      <Accordion.Button>Section C</Accordion.Button>
    </h3>
    <Accordion.Panel>
      <p>This panel is closed by default.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>