# Drawer (/popups/drawer)





<ComponentPreview name="drawer-preskok-demo" description="A right-side drawer with header, body and footer." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/drawer
```

## Usage [#usage]

```tsx
import { Drawer } from "@/components/ui/preskok-ui/drawer"

export function Example() {
  return (
    <Drawer>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Content side="right">
        <Drawer.Header>
          <Drawer.Title>Title</Drawer.Title>
          <Drawer.Description>Description</Drawer.Description>
        </Drawer.Header>
        <Drawer.Body>Content</Drawer.Body>
        <Drawer.Footer>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer>
  )
}
```

## Components [#components]

* **Drawer**, **Drawer.Trigger**, **Drawer.Content**, **Drawer.Header**, **Drawer.Title**, **Drawer.Description**, **Drawer.Body**, **Drawer.Footer**, **Drawer.Close**