# Drawer

A bottom panel with slide-up animation and drag handle.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

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

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

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

```tsx
<Drawer state="opened" />
```

Drawer is a bottom sheet meant to compose over another scene — pair it with a trigger button or other content in your composition.

## Smooth transitions

The docs preview animates an Edit profile trigger press, then slides the drawer up and closed via `useDrawerTransition`. Pair it with `useButtonTransition` on the trigger:

```tsx
import { Drawer } from "@/components/framecn/drawer";
import { useDrawerTransition } from "@/components/framecn/use-drawer-transition";
import { Button } from "@/components/framecn/button";
import { useButtonTransition } from "@/components/framecn/use-button-transition";

const trigger = useButtonTransition([
  { at: 14, state: "hover" },
  { at: 26, state: "press" },
]);

const drawer = useDrawerTransition([
  { at: 32, state: "opened", duration: 16 },
  { at: 92, state: "closed", duration: 12 },
]);

<>
  <Button label="Edit profile" style={trigger} />
  <Drawer
    title="Edit profile"
    description="Make changes to your profile here. Click save when you're done."
    actionLabel="Save changes"
    cancelLabel="Cancel"
    style={drawer}
  />
</>;
```

`style` takes precedence over `state` when both are provided.

## API Reference

### Drawer

| Prop          | Type                    | Default                                                             |
| ------------- | ----------------------- | ------------------------------------------------------------------- |
| `state`       | `"opened" \| "closed"`  | `"closed"`                                                          |
| `style`       | `DrawerStyle`           | `-` (takes precedence over `state`)                                 |
| `title`       | `string`                | `"Edit profile"`                                                    |
| `description` | `string`                | `"Make changes to your profile here. Click save when you're done."` |
| `actionLabel` | `string`                | `"Save changes"`                                                    |
| `cancelLabel` | `string`                | `"Cancel"`                                                          |
| `theme`       | `Partial<FramecnTheme>` | `-`                                                                 |
| `className`   | `string`                | `-`                                                                 |