Accordion
layoutCollapsible content sections with single or multi-expand modes, animated chevron rotation, dividers between items, and full ARIA accordion pattern. Use for FAQs, settings panels, documentation sections, and pipeline step details.
Import
typescript
import { Accordion } from "packages/ui/src";Props
AccordionProps
| Prop | Type | Required |
|---|---|---|
items | AccordionItem[] | Yes |
multiple | boolean | No |
defaultOpen | string[] | No |
Examples
Accordion
Collapsible content sections with single/multi-expand modes, animated chevron, and ARIA accordion pattern. 24th shared component — 12 dedicated tokens.
Interactive Playground
A multi-project orchestration system for visual design, token pipelines, and CMS-driven frontends. It connects NotebookLM (brain), Penpot (design), and code generation into a unified workflow.
Design tokens flow from Penpot through DTCG JSON format, get compiled to CSS custom properties by build.py, then merged per-project with overrides via merge.py. Each component declares its token dependencies.
The shared UI package contains 24 components across 7 families: action, layout, navigation, feedback, data-display, forms, content, and ai-interaction. Each has full 16-field metadata and ARIA support.
FAQ (Single Expand)
A multi-project orchestration system for visual design, token pipelines, and CMS-driven frontends. It connects NotebookLM (brain), Penpot (design), and code generation into a unified workflow.
Design tokens flow from Penpot through DTCG JSON format, get compiled to CSS custom properties by build.py, then merged per-project with overrides via merge.py. Each component declares its token dependencies.
The shared UI package contains 24 components across 7 families: action, layout, navigation, feedback, data-display, forms, content, and ai-interaction. Each has full 16-field metadata and ARIA support.
PM2 manages Node processes (cms-web on port 3500, cms-content on port 3501). Caddy handles reverse proxy, auto TLS, and static file serving. Static tokens and handoffs sync to cms.chem.dev/ref/.
NotebookLM serves as persistent orchestration memory. Claude Code pulls context at session start, executes work, and pushes learnings back. The Gemini bridge enables source-grounded queries.
Pipeline Steps (Multi-Expand)
Brain query for requirements and context. Pull existing sources from NotebookLM.
Stitch generates UI from prompts. Penpot normalizes and stores approved designs.
Extract DTCG tokens from design. Run build.py to compile to CSS variables.
Create React component with token-driven styling, ARIA, responsive rules.
Build, test, deploy to production via PM2. Run drift check. Push status to brain.
Real-World Use Cases
Settings Panels
Email, password, and profile management.
Configure which events trigger notifications.
Documentation
Install dependencies and run the dev server.
Full REST API documentation with examples.