Components
Details
A primitive native disclosure container with bindable open state.
Props
Native attributes and event handlers are forwarded to the details element.
Use Summary as the first child to provide its accessible toggle. Transitions apply to visibility; open uses native disclosure behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the native element. |
class | string | '' | Classes merged with theme styles and variants. |
element | HTMLDetailsElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility state. |
open | boolean | false | Bindable expanded state. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Details from sveltewind/components. This example shows its default styling in a usable context.
Learn more
Disclosure content.
Loading...Examples
Theme variants
Every variant available for Details in the built-in themes is shown below.
compact — Apply the compact variant.
Learn more
Disclosure content.
Loading...spacious — Apply the spacious variant.
Learn more
Disclosure content.
Loading...soft — Apply the soft variant.
Learn more
Disclosure content.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Learn more
Disclosure content.
Loading...Props and behavior
Change open while retaining the default component styling.
Learn more
Disclosure content.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Your project content
Disclosure content.
Loading...Initially expanded
You can also bind open to control this disclosure.
Loading...