Collapse
A native <details>/<summary> disclosure widget with an animated chevron indicator. No JavaScript required — the browser handles open/close state. Use opened to pre-expand on the server.
Default (closed)
What is Davaux?
Davaux is a SSR-first JSX framework with file-based routing and reactive signals.
<Collapse label="What is Davaux?">
Davaux is a SSR-first JSX framework with file-based routing and reactive signals.
</Collapse>Pre-expanded
This starts open
This panel is visible by default because
opened was passed.<Collapse label="This starts open" opened>
This panel is visible by default.
</Collapse>Chevron position
Chevron on the right (default)
Content here.
Chevron on the left
Content here.
<Collapse label="Chevron on the right">Content here.</Collapse>
<Collapse label="Chevron on the left" chevronPosition="left">Content here.</Collapse>Custom chevron
Plus icon+
Content using a plain text chevron.
Arrow icon▸
Content using a triangle chevron.
<Collapse label="Plus icon" chevron="+">...</Collapse>
{/* TablerIcon also works */}
<Collapse label="Custom icon" chevron={<TablerIcon name="plus" />}>...</Collapse>Multiple disclosures
Section 1
Content for section 1.
Section 2
Content for section 2.
Section 3
Content for section 3.
<Stack gap="xs">
<Collapse label="Section 1">Content for section 1.</Collapse>
<Collapse label="Section 2">Content for section 2.</Collapse>
<Collapse label="Section 3">Content for section 3.</Collapse>
</Stack>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Content in the clickable summary header |
children | ReactNode | — | Content shown when the panel is open |
opened | boolean | false | Whether the panel starts in the open state |
chevronPosition | 'right'|'left' | 'right' | Side where the chevron indicator is placed |
chevron | children | — | Custom icon in place of the default chevron; accepts a TablerIcon, SVG string, or any element |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Font size of the header label |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border radius applied to the container |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |