Navigation

Accordion

A list whose items each open their own panel: a header (the button's name, in a heading) and its content. Panels open at full height at once; only the chevron turns. One quiet fold under a label is a Disclosure. Both turn their chevron with DisclosureChevron, which a row that opens in place uses alone.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@nibapp/ui/components/accordion";import { Badge } from "@nibapp/ui/components/badge";import { CodeBlock } from "@nibapp/ui/components/code-block";import { Disclosure, DisclosureChevron } from "@nibapp/ui/components/disclosure";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Accordion

A list of things, each a header that opens its own panel: the files a change touches, a message's full text. `multiple` lets several stay open, as a list of files wants. One quiet fold under a label ("Advanced", "Details") is a `Disclosure`. Panels open at their full height at once; only the chevron turns and the content fades in (§7).

Prop	Type	Default	Description
variant	AccordionVariant	"card"

Also takes .

AccordionItem

Also takes the props of Base UI's Accordion.Item.

AccordionPanel

Also takes the props of Base UI's Accordion.Panel.

AccordionTrigger

The item's header: a heading (`h3`) holding the button that opens the panel, with a chevron before the children. Its children are the button's name.

Also takes the props of Base UI's Accordion.Trigger.

Badge

Small, calm label: subtle tint + matching foreground. Never loud.

Prop	Type	Default	Description
variant	"neutral" \| "outline" \| "success" \| "warning" \| "danger" \| "info"	"neutral"	neutral Quiet gray — metadata, counts, model names. outline Hairline only — for dense lists where fills get noisy. info Neutral wash + fg-muted ink, like every info surface; its `Info` icon is what says "info".
size	"sm" \| "md"	"md"
dot	boolean	false	Leading status dot. Pair with text — the dot alone never carries meaning.
icon	ReactNode \| false	—	Leading icon. The info variant defaults to lucide `Info`: info is neutral, not the accent, so the icon is what tells it apart from a plain neutral badge. Pass your own icon to replace it, or `false` to hide it. A `dot` takes the icon's place.

Also takes .

CodeBlock

Prop	Type	Default	Description
code (required)	string	—	Source text. A single trailing newline is ignored.
lang	string \| undefined	—	Language id or fence info (`ts`, `tsx`, `python`, `sh`, …). Unknown → plain text.
filename	string \| undefined	—	Shown in the header instead of the language.
showLineNumbers	boolean	false
startLine	number	1	Number of the first line (e.g. a Read from offset 120). Default 1.
highlightLines	readonly number[]	—	1-based line numbers to emphasize (in the same numbering as `startLine`).
wrap	boolean	false	Soft-wrap long lines instead of scrolling horizontally.
maxHeight	number \| string	—	Scroll vertically beyond this height (e.g. `320` or `"40vh"`).
streaming	boolean	false	The code is still arriving: incremental highlighting, line fade-in, stick-to-bottom.
header	boolean	true	Render the header bar (label + copy). Without it, copy floats in on hover.
actions	ReactNode	—	Extra controls rendered in the header, before the copy button; text among them wraps, and the header grows.

Also takes the props of a <div> element, except children.

Disclosure

Prop	Type	Default	Description
label (required)	ReactNode	—	What's inside, in plain words ("Advanced", "Network and proxy").
hint	ReactNode	—	Optional one-line hint after the label, e.g. how many options are inside.
children (required)	ReactNode	—
panelClassName	string	—	Classes for the panel's inner column.
size	"sm" \| "md"	—	`md` (default) heads a group of options; `sm` sits inline under a sentence.

Also takes ComponentProps<typeof Collapsible.Root>, except children and render.

DisclosureChevron

The chevron of anything that opens in place (a tool call, a file's diff, a tree node, a quiet fold): forward while closed, turned down while open. It turns by transform on the snappy spring, at once under reduced motion; 14 px unless the caller sizes it, in the colour of the text around it.

Prop	Type	Default	Description
open	boolean \| undefined	—	Whether what it heads is open. Leave it out inside a Base UI Collapsible or Accordion trigger: the chevron follows that trigger's state.

Also takes ComponentProps<typeof ChevronRight>, except children.