ComponentsLayout

Accordion

Stacked sections that expand and collapse. Good for FAQs.

Playground

<Accordion type="single" collapsible>
  <AccordionItem value="free">
    <AccordionTrigger>Is Junco free?</AccordionTrigger>
    <AccordionContent>Yes. Everything is MIT licensed.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="react">
    <AccordionTrigger>Can I use it without React?</AccordionTrigger>
    <AccordionContent>Yes. The semantic classes are plain CSS.</AccordionContent>
  </AccordionItem>
</Accordion>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "junco";

<Accordion type="single" collapsible>
  <AccordionItem value="free">
    <AccordionTrigger>Is it free?</AccordionTrigger>
    <AccordionContent>Yes, MIT licensed.</AccordionContent>
  </AccordionItem>
</Accordion>

Examples#

Cards#

Each item is its own bordered card. Good for settings groups.

Yes. Everything is MIT licensed, with nothing behind a paywall.

API reference#

`Accordion`#

type: Required. single opens one item at a time; multiple lets several stay open.; "single" | "multiple"
collapsible: With type single, lets the open item close again.; boolean; Default: false
variant: Hairline rows, or separate bordered cards.; "line" | "card"; Default: "line"
value / defaultValue: Open item(s); an array with type multiple.; string | string[]
onValueChange: Called when items open or close.; (value) => void

Prop	Type	Default
`type` Required. single opens one item at a time; multiple lets several stay open.	`"single" \| "multiple"`	`–`
`collapsible` With type single, lets the open item close again.	`boolean`	`false`
`variant` Hairline rows, or separate bordered cards.	`"line" \| "card"`	`"line"`
`value / defaultValue` Open item(s); an array with type multiple.	`string \| string[]`	`–`
`onValueChange` Called when items open or close.	`(value) => void`	`–`

`AccordionItem`#

value: Required. Identifies the item.; string
disabled: Can't be opened or closed.; boolean

Prop	Type	Default
`value` Required. Identifies the item.	`string`	`–`
`disabled` Can't be opened or closed.	`boolean`	`–`

`AccordionTrigger`#

headingLevel: Heading level wrapping the trigger, for a correct document outline.; 2 | 3 | 4 | 5 | 6; Default: 3
classNames: Class overrides for the heading and chevron.; { heading?, icon? }

Prop	Type	Default
`headingLevel` Heading level wrapping the trigger, for a correct document outline.	`2 \| 3 \| 4 \| 5 \| 6`	`3`
`classNames` Class overrides for the heading and chevron.	`{ heading?, icon? }`	`–`

Accessibility#

Keyboard interactions
Key	Action
`Enter`	Opens or closes the focused section.
`Space`	Same as Enter.
`↓↑`	Moves between section headers.
`HomeEnd`	Jumps to the first or last header.

Each trigger is a button inside a heading, with aria-expanded and aria-controls.
Pick headingLevel so the headings fit the page outline.
The open and close animation follows the motion switch.
Closed content isn't searchable with the browser's find in the installed version; the semantic <details> version is.

<Accordion type="single" collapsible> <AccordionItem value="free"> <AccordionTrigger>Is Junco free?</AccordionTrigger> <AccordionContent>Yes. Everything is MIT licensed.</AccordionContent> </AccordionItem> <AccordionItem value="react"> <AccordionTrigger>Can I use it without React?</AccordionTrigger> <AccordionContent>Yes. The semantic classes are plain CSS.</AccordionContent> </AccordionItem> </Accordion>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "junco";

<Accordion type="single" collapsible>
  <AccordionItem value="free">
    <AccordionTrigger>Is it free?</AccordionTrigger>
    <AccordionContent>Yes, MIT licensed.</AccordionContent>
  </AccordionItem>
</Accordion>

API reference#

`Accordion`#

type: Required. single opens one item at a time; multiple lets several stay open.; "single" | "multiple"
collapsible: With type single, lets the open item close again.; boolean; Default: false
variant: Hairline rows, or separate bordered cards.; "line" | "card"; Default: "line"
value / defaultValue: Open item(s); an array with type multiple.; string | string[]
onValueChange: Called when items open or close.; (value) => void

Prop	Type	Default
`type` Required. single opens one item at a time; multiple lets several stay open.	`"single" \| "multiple"`	`–`
`collapsible` With type single, lets the open item close again.	`boolean`	`false`
`variant` Hairline rows, or separate bordered cards.	`"line" \| "card"`	`"line"`
`value / defaultValue` Open item(s); an array with type multiple.	`string \| string[]`	`–`
`onValueChange` Called when items open or close.	`(value) => void`	`–`

`AccordionItem`#

value: Required. Identifies the item.; string
disabled: Can't be opened or closed.; boolean

Prop	Type	Default
`value` Required. Identifies the item.	`string`	`–`
`disabled` Can't be opened or closed.	`boolean`	`–`

`AccordionTrigger`#

headingLevel: Heading level wrapping the trigger, for a correct document outline.; 2 | 3 | 4 | 5 | 6; Default: 3
classNames: Class overrides for the heading and chevron.; { heading?, icon? }

Prop	Type	Default
`headingLevel` Heading level wrapping the trigger, for a correct document outline.	`2 \| 3 \| 4 \| 5 \| 6`	`3`
`classNames` Class overrides for the heading and chevron.	`{ heading?, icon? }`	`–`

Accessibility#

Keyboard interactions
Key	Action
`Enter`	Opens or closes the focused section.
`Space`	Same as Enter.
`↓↑`	Moves between section headers.
`HomeEnd`	Jumps to the first or last header.

Each trigger is a button inside a heading, with aria-expanded and aria-controls.

Pick headingLevel so the headings fit the page outline.

The open and close animation follows the motion switch.

Closed content isn't searchable with the browser's find in the installed version; the semantic <details> version is.

Playground#

Is Junco free?

Can I use it without React?

Will copied components still get updates?

Usage#

Examples#

Cards#

Is Junco free?

Can I use it without React?

Will copied components still get updates?

API reference#

Accordion#

AccordionItem#

AccordionTrigger#

Accessibility#

Playground#

Is Junco free?

Can I use it without React?

Will copied components still get updates?

Usage#

Examples#

Cards#

Is Junco free?

Can I use it without React?

Will copied components still get updates?

API reference#

Accordion#

AccordionItem#

AccordionTrigger#

Accessibility#

`Accordion`#

`AccordionItem`#

`AccordionTrigger`#

`Accordion`#

`AccordionItem`#

`AccordionTrigger`#