メニュー
Rules and patterns for working with @abhivarde/svelte-drawer - an accessible drawer component for Svelte 5. Use when building or editing drawers, bottom sheets, side panels, modals, or snap-point interfaces in any Svelte 5 project.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | svelte-drawer |
| description | Rules and patterns for working with @abhivarde/svelte-drawer - an accessible drawer component for Svelte 5. Use when building or editing drawers, bottom sheets, side panels, modals, or snap-point interfaces in any Svelte 5 project. |
| license | MIT |
| metadata | {"author":"abhivarde","version":"1.0.0"} |
Accessible drawer component for Svelte 5, inspired by Vaul. Supports gesture-driven drag, multiple directions, snap points, nested drawers, portal rendering, and persistent state.
Package: @abhivarde/svelte-drawer
Docs: https://drawer.abhivarde.in
GitHub: https://github.com/AbhiVarde/svelte-drawer
Apply this skill when:
autoHeight for streaming or dynamic contentnpm install @abhivarde/svelte-drawer
import {
Drawer,
DrawerOverlay,
DrawerContent,
DrawerHandle,
DrawerHeader,
DrawerFooter,
DrawerVariants,
clearDrawerState,
} from "@abhivarde/svelte-drawer";
These are the most common mistakes. Always check these first:
open must be $state - this is Svelte 5, not Svelte 4. Never use let open = false.bind:open on <Drawer>, not just :open.DrawerContent ships with no default styles. Always add fixed + directional positioning via class.DrawerOverlay ships with no default background. Always add class="fixed inset-0 bg-black/40" or equivalent.$state variable.activeSnapPoint requires bind:activeSnapPoint to stay reactive.overflow-y-auto on the inner content div, not on DrawerContent.clearDrawerState(key) must match the persistKey value used on the <Drawer>.| Prop | Type | Default |
|---|---|---|
bind:open | boolean | required |
direction | 'bottom' | 'top' | 'left' | 'right' | 'bottom' |
onOpenChange | (isOpen: boolean) => void | - |
closeOnEscape | boolean | true |
snapPoints | number[] | - |
bind:activeSnapPoint | number | - |
onSnapPointChange | (point: number) => void | - |
portal | boolean | false |
portalContainer | HTMLElement | string | - |
persistState | boolean | false |
persistKey | string | 'default' |
persistSnapPoint | boolean | false |
| Prop | Type |
|---|---|
class | string - must include fixed inset-0 and a background |
blur | boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' |
| Prop | Type | Default |
|---|---|---|
class | string - must include fixed + position | - |
trapFocus | boolean | true |
autoHeight | boolean | false |
Renders a drag indicator. Automatically horizontal for bottom/top, vertical for left/right. Accepts class for color and size overrides.
Pre-styled content wrapper. Use instead of DrawerContent when you want a preset layout.
| Variant | Style |
|---|---|
default | Standard bottom drawer, gray background |
sheet | iOS-style bottom sheet, white, rounded, 85vh |
dialog | Centered modal |
minimal | Minimal bottom drawer, no extra styling |
sidebar | Full-height side panel |
Props: variant, class, trapFocus.
Optional. Props: title, description, showCloseButton (default true), onClose, class. Accepts children for custom content.
Optional. Props: class. Accepts children. Use mt-auto on a flex container to pin it to the bottom.
Direction: Set on <Drawer direction="right">. Handle orientation adapts automatically.
Snap points: Values are 0-1 fractions of viewport height. Dragging below the lowest snap point dismisses the drawer. Use bind:activeSnapPoint to jump programmatically.
Portal: Use portal={true} when the drawer is inside a parent with overflow: hidden or a complex stacking context. Renders at end of <body>.
Auto height: Use autoHeight on DrawerContent when content grows dynamically (e.g. streaming AI text). Powered by ResizeObserver. No fixed height needed.
Persistence: persistState={true} saves open/closed to localStorage. Pair with a unique persistKey. Add persistSnapPoint={true} to also save snap position.
Keyboard: Escape closes by default. Disable with closeOnEscape={false}. Tab is trapped inside unless trapFocus={false} is set on DrawerContent or DrawerVariants.
svelte-drawer/
├── src/lib/ # npm package source - components and types
├── website/ # docs site (SvelteKit) at drawer.abhivarde.in
├── static/ # static assets
└── package.json # name: @abhivarde/svelte-drawer
Component changes belong in src/lib/. Doc and example changes belong in website/.