# Drawer A drawer component for Svelte. [Docs](https://github.com/huntabyte/vaul-svelte) ```svelte Open Drawer

Move Goal Set your daily activity goal.

{goal}

Calories/day

({ goal: d.goal, index: i }))} y="goal" x="index" xScale={scaleBand().padding(0.25)} axis={false} tooltip={false} props={{ bars: { stroke: "none", rounded: "all", radius: 4, // use the height of the chart to animate the bars initialY: context?.height, initialHeight: 0, motion: { x: { type: "tween", duration: 500, easing: cubicInOut }, width: { type: "tween", duration: 500, easing: cubicInOut }, height: { type: "tween", duration: 500, easing: cubicInOut }, y: { type: "tween", duration: 500, easing: cubicInOut } }, fill: "var(--color-foreground)", fillOpacity: 0.9 }, highlight: { area: { fill: "none" } } }} />

Cancel

``` ## About Drawer is built on top of [Vaul Svelte](https://vaul-svelte.com), which is a Svelte port of [Vaul](https://vaul.emilkowal.ski) by [Emil Kowalski](https://twitter.com/emilkowalski_). ## Installation ```bash pnpm dlx shadcn-svelte@latest add drawer ``` ```bash npx shadcn-svelte@latest add drawer ``` ```bash bun x shadcn-svelte@latest add drawer ``` ## Usage ```svelte Open Are you sure absolutely sure? This action cannot be undone. Cancel ``` ## Examples ### Responsive Dialog You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` on desktop and a `Drawer` on mobile. ```svelte {#if isDesktop.current} Edit Profile Edit profile Make changes to your profile here. Click save when you're done. {:else} Edit Profile Edit profile Make changes to your profile here. Click save when you're done. Cancel {/if} ```