ui / disclosure

Accordion

A platform-native single-open disclosure group with animated indicators.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

SYSTEM / OVERVIEW

One coherent interface language

The component preserves keyboard behavior, clear state, and calm visual hierarchy.

INSTALL / SOURCE REGISTRY

Add Accordion to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/accordion.json

registry/default/ui/accordion.tsx

import * as React from "react"
import { ChevronDown } from "lucide-react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export type AccordionItem = { id: string; title: React.ReactNode; content: React.ReactNode }

export function Accordion({ items, className }: { items: AccordionItem[]; className?: string }) {
  return <div className={cn("dos-accordion", className)}>{items.map((item) => <details key={item.id} name="designos-accordion"><summary>{item.title}<ChevronDown aria-hidden="true" /></summary><div className="dos-accordion__content">{item.content}</div></details>)}</div>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy