Design System v1.0

Accordion

Collapsible sections that expand to reveal their content.

Default

Single-open collapsible panels.

Open the site in dataTrack™ and go to the "Meters" section. Click "Add meter," then enter the meter ID, commodity (Electricity, Water, or Gas), and the channel mapping. New meters begin reporting interval data within 24 hours of provisioning.

Outline

Separated panels, each in its own bordered card.

Open the site in dataTrack™ and go to the "Meters" section. Click "Add meter," then enter the meter ID, commodity (Electricity, Water, or Gas), and the channel mapping. New meters begin reporting interval data within 24 hours of provisioning.

Multi-level

Category panels that expand to reveal nested, individually collapsible FAQ items.

Open a site in dataTrack™ and go to the "Consumption" section. You can view interval data by commodity, compare against baseline, and drill down to individual meters and channels. Data refreshes as new interval reads arrive, typically every 15 minutes.

API reference

A collapsible disclosure list; each AccordionItem pairs an AccordionTrigger with an AccordionContent panel.

Full props on Base UI Accordion
Anatomy
AccordionRoot vertical container wrapping all accordion items.
AccordionItemSingle expandable section with a bottom-border divider.
AccordionTriggerHeader button that toggles its panel; shows a chevron.
AccordionContentAnimated collapsible panel holding the item's content.

Command Palette

Search for a command to run...