Skip to content
Menus & Navigation

Accordion

Collapsible content sections.

Import

tsx
import { Accordion } from "@cronus-ui/ui";
bash
npx cronus-ui add accordion

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 2/2Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AccordionDefault layout:inline style:accordion {
  label "default"
  text "Is it accessible?"
  text "Yes. It follows the WAI-ARIA disclosure pattern."
  text "Is it themeable?"
  text "Every color, radius and shadow flows from tokens."
}

page "/audit/accordion/default" type:custom {
  use AccordionDefault
}
second-open.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AccordionSecondOpen layout:inline style:accordion {
  value:"Is it themeable?"
  label "second-open"
  text "Is it accessible?"
  text "Yes. It follows the WAI-ARIA disclosure pattern."
  text "Is it themeable?"
  text "Every color, radius and shadow flows from tokens."
}

page "/audit/accordion/second-open" type:custom {
  use AccordionSecondOpen
}

API Reference

Generated from the component's exported types.

AccordionProps

Extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>

Skip AccordionProps props table
PropTypeDefaultDescription
type
"single" | "multiple"——
value
string—Controlled value.
defaultValue
string—Uncontrolled initial value.
onValueChange
(value: string) => void—Called when the value changes.
collapsible
boolean—When type is `single`, allow closing the open item.
disabled
boolean—Disables pointer and keyboard interaction.
dir
"ltr" | "rtl"—Reading direction. Inherits from the document when omitted.
orientation
"horizontal" | "vertical"——

AccordionItemProps

Extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>

Skip AccordionItemProps props table
PropTypeDefaultDescription
value
string—Controlled value.
disabled
boolean—Disables pointer and keyboard interaction.

AccordionTriggerProps

Extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>

Skip AccordionTriggerProps props table
PropTypeDefaultDescription
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

AccordionContentProps

Extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>

Skip AccordionContentProps props table
PropTypeDefaultDescription
forceMount
boolean—Keep the node mounted when closed, for exit animation.
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.