Skip to content

Foundations

Disclosure

Accordion and single collapsible sections with smooth height animation.

2 variantsMIT

Preview

Searched “onboarding localization best practices” and opened 4 pages.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/disclosure.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { Accordion, Collapsible } from "@/components/ui/disclosure";

<Accordion
  type="multiple"
  items={steps.map((s) => ({ id: s.id, title: s.title, meta: s.duration, content: s.output }))}
/>

<Collapsible title="Thought for 6s" defaultOpen={false}>
  {reasoning}
</Collapsible>

Props

PropTypeDefaultDescription
Accordion.items*AccordionItem[]—Sections in order: id, title, optional icon and meta, content.
Accordion.type"single" | "multiple""single"Single keeps at most one section open.
Accordion.value / defaultValue / onValueChangestring[]—Ids of open sections, controlled or not.
Collapsible.open / defaultOpen / onOpenChangeboolean—Open state of the single section.
title / icon / metaReactNode / Icon / ReactNode—Header row: title, a filled Phosphor icon and right-aligned meta.
type AccordionItem = {
  id: string;
  title: ReactNode;
  icon?: Icon; // Phosphor
  meta?: ReactNode;
  content: ReactNode;
  disabled?: boolean;
};