Component · Containers
Accordion
a single disclosure that expands to reveal its content; stack several for an FAQ.
Example
Every plan ships the full component library and design tokens.
Yes — the packages are distributed on npm and NuGet.
Playground
Yes — the packages are distributed on npm and NuGet.
Where available
✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|
| React | <Accordion> | @design-foundry/lucent-react |
| Angular | <lucent-accordion> | @design-foundry/lucent |
| Web Components | <lucent-accordion> | @design-foundry/lucent-wc |
| Blazor | <LucentAccordion> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|
| heading | string | — | the header label. |
| open | boolean | false | expanded state. |
| disabled | boolean | false | non-interactive. |
| (children) | slotted | — | the disclosure content. |