Drawer

A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.

<script lang="ts">
import {
	Drawer,
	DrawerClose,
	DrawerDescription,
	DrawerFooter,
	DrawerHeader,
	DrawerPopup,
	DrawerTitle,
	DrawerTrigger,
} from "coss-svelte";
</script>

<Drawer>
	<DrawerTrigger>Open drawer</DrawerTrigger>
	<DrawerPopup>
		<DrawerHeader class="text-center">
			<DrawerTitle>Notifications</DrawerTitle>
			<DrawerDescription>This is the description of the drawer.</DrawerDescription>
		</DrawerHeader>
		<DrawerFooter class="justify-center sm:justify-center">
			<DrawerClose>Close</DrawerClose>
		</DrawerFooter>
	</DrawerPopup>
</Drawer>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Drawer, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerPopup, DrawerTitle, DrawerTrigger } from "coss-svelte";

Anatomy

Drawer
DrawerClose
DrawerContent
DrawerCreateHandle
DrawerDescription
DrawerFooter
DrawerHeader
DrawerPanel
DrawerPopup
DrawerTitle
DrawerTrigger

API Reference

Drawer

A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.

Prop	Type	Default	Description
`bind:open`	`boolean`	`false`	Open state for the popup or disclosure. Bind with `bind:open`.
`trigger`	`string`	`"Open"`	Fallback trigger text rendered when custom children are not provided.
`title`	`string`	`""`	Title text rendered by the component's built-in fallback layout.
`description`	`string`	`""`	Supporting text rendered by the component's built-in fallback layout.

children : Snippet<[]>

Inherits from Bits UI Dialog.Root.

DrawerClose

Renders a control that closes the parent surface.

children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | null

Inherits from Bits UI Dialog.Close.

DrawerContent

Wraps the primary content for the parent component.

children : Snippet<[]>

Inherits from Svelte component attributes.

DrawerCreateHandle

Renders the drag or grab handle for the parent component.

bind:ref : HTMLElement | null

Inherits from Bits UI Dialog.Close.

DrawerDescription

Provides supporting copy for the parent component.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Dialog.Description.

DrawerFooter

Groups footer content and actions for the parent component.

children : Snippet<[]>

Inherits from Svelte component attributes.

DrawerHeader

Groups heading content for the parent component.

children : Snippet<[]>

Inherits from Svelte component attributes.

DrawerPanel

Renders the main panel surface for the parent component.

children : Snippet<[]>

Inherits from Svelte component attributes.

DrawerPopup

Renders the floating or modal surface for the parent component.

Prop	Type	Default	Description
`portalProps`	`{ disabled?: boolean; to?: PortalTarget }`	`{}`	Configures the exact Bits Portal target (`to`) or renders inline when `disabled`.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Dialog.Content.

DrawerTitle

Names the parent surface or section.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Dialog.Title.

DrawerTrigger

Renders the control that opens, closes, or selects related content.

children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | null

Inherits from Bits UI Dialog.Trigger.

Implementation Details

Status: Experimental
Foundation: custom
Category: Overlays & Popups
Particles: 14

Status

Experimental in 0.1.0: dialog-style opening, closing, focus, and edge placement are available; swipe gestures, snap points, nested drawers, and responsive dialog switching are not yet supported.