Theme-aware, responsive drawer component.
Change any prop and inspect the server-rendered component immediately.
<Drawer
title="Drawer example"
description="A polished default drawer for a modern application."
open="true"
closeLabel="Drawer"
/>Compare configurations and resize the browser to check responsive behavior.
Balanced spacing, hierarchy, and content for the most common product workflow.
<Drawer
title="Drawer example"
description="A polished default drawer for a modern application."
open="true"
closeLabel="Drawer"
/>A tighter variation for dashboards, side panels, tables, and operational interfaces.
<Drawer
size="sm"
title="Compact Drawer"
description="A compact configuration for dashboards and dense product surfaces."
open="true"
closeLabel="Compact example"
/>A more expressive variation using additional data, stronger emphasis, and optional states.
<Drawer
size="lg"
title="Advanced Drawer"
description="A richer configuration demonstrating additional content and hierarchy."
open="true"
closeLabel="Advanced example"
/>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
title | string | "Drawer" | No |
description | string | "" | No |
open | boolean | false | No |
placement | string | "bottom" | No |
closeLabel | string | "Close" | No |
class | string | "" | No |