Components
Drawer
A side panel built on the native modal Dialog component.
Props
Native attributes and event handlers are forwarded to the root Dialog component. Common transitions apply to that root.
Theme entries: drawer,drawerClose,drawerContent,drawerHeader,drawerTitle.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDialogElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(false) | Bindable visibility; starts closed. |
outTransition | TransitionProps | undefined | Exit transition override. |
position | 'left' | 'right' | 'right' | See usage notes and the component API. |
showClose | boolean | true | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
title | string | 'Panel' | See usage notes and the component API. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Drawer from sveltewind/components. This example shows its default styling in a usable context.
Loading...isVisible controls the native modal dialog. Escape dismisses it; native Dialog supplies focus containment. Use position to choose the left or right edge.
Examples
Theme variants
Every variant available for Drawer in the built-in themes is shown below.
left — Apply the left variant.
Loading...right — Apply the right variant.
Loading...wide — Apply the wide variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change position, showClose while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...