# Drawer

> Right-side sheet for a record's details, sliding in over the page.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Drawer/)

Right-side sheet for a record's details, sliding in over the page.

Props: `title`, `subtitle`, `avatar` (name for an Avatar), `onClose`, `width`, `inline` (render inside a positioned container, for previews), children.

- Use for a record you look at without leaving the list: a customer, an invoice, a run.
- Traps keyboard focus, closes on Esc and backdrop click, returns focus to the opener.
- Put Tabs right under the badges when the record has more than one view.

## Example

```tsx
import * as React from "react";
import { Badge, Drawer, StatTile, Tabs } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        position: "relative",
        height: 480,
        borderRadius: "var(--radius-lg)",
        overflow: "hidden",
        background: "var(--canvas)",
      }}
    >
      <Drawer
        inline
        title="Northwind"
        subtitle="Logistics · Hamburg · customer since 2021"
        avatar="Northwind"
        onClose={() => {}}
      >
        <div className="tf-row">
          <Badge tone="success">Good</Badge>
          <Badge tone="info" dot={false}>
            Team · 24 seats
          </Badge>
        </div>
        <Tabs block items={["Overview", "Invoices", "Mail"]} />
        <div
          className="tf-grid"
          style={
            {
              "--cols": "1fr 1fr",
              "--cols-sm": "1fr 1fr",
            } as React.CSSProperties
          }
        >
          <StatTile tint="butter" value="€1,240" label="MRR" />
          <StatTile tint="mint" value="€14,880" label="Paid to date" />
        </div>
      </Drawer>
    </div>
  );
}
```

## Props

### Badge

| Prop | Type | Notes |
| --- | --- | --- |
| `tone?` | `Tone` |  |
| `dot?` | `boolean` |  |
| `live?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Drawer

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Required |
| `subtitle?` | `ReactNode` |  |
| `avatar?` | `string` |  |
| `onClose?` | `() => void` |  |
| `width?` | `number \| string` |  |
| `inline?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `open?` | `boolean` | Optional: with `open` the component stays mounted while it animates out; without it, render it only while open. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### StatTile

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `ReactNode` | Required |
| `label` | `string` | Required |
| `tint?` | `Tint \| "surface" \| "placeholder"` |  |
| `delta?` | `string` |  |
| `delay?` | `number` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Tabs

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `string[]` | Required |
| `value?` | `string` |  |
| `defaultValue?` | `string` |  |
| `onChange?` | `(v: string) => void` |  |
| `block?` | `boolean` |  |
| `panels?` | `Record<string, ReactNode>` | Content per tab; renders the tab panels under the bar, wired with tab/tabpanel roles. |
| `label?` | `string` | Accessible name of the tab list. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |