---
title: "DetailDrawer"
description: "A side panel for row details: status, summary, sections and fixed actions. Base UI traps focus, closes on Escape and returns focus to the trigger."
kind: block
id: C-058
category: erp
registry: "detail-drawer"
docs: "https://koten.codehive.com.co/blocks/erp/detail-drawer"
markdown: "https://koten.codehive.com.co/md/blocks/erp/detail-drawer.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/detail-drawer.json"
language: en
---

# DetailDrawer · 詳細

> Block C-058 in the Koten UI catalog.

A side panel for row details: status, summary, sections and fixed actions. Base UI traps focus, closes on Escape and returns focus to the trigger.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/detail-drawer.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/detail-drawer.json
```

## Files

- `@/components/patterns/detail-drawer.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **portal** — Portal: The panel and backdrop mount in a portal at the end of the body, outside the page tree.
- **controlled** — Open state: Base UI owns open and close from the trigger; do not duplicate that state with useState or force it open.

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Order detail

Open the panel, walk the sections and close with Escape or the X: focus returns to the button.

```tsx
<DetailDrawer
  trigger={<Button variant="secondary">Open order KURA-10428</Button>}
  title="Order KURA-10428"
  description="Details, lines and history for this order."
  closeLabel="Close details"
  status={<StatusBadge status="preparing" label="Preparing" />}
  summary={<CustomerSummary />}
  footer={
    <>
      <Button size="sm" variant="secondary">Mark as preparing</Button>
      <Button size="sm" variant="primary">Mark as shipped</Button>
    </>
  }
>
  <DetailSection title="Lines" meta="1 item">
    <OrderLine />
  </DetailSection>
  <DetailSection title="History">
    <Timeline events={events} label="Order history" emptyLabel="No events yet" />
  </DetailSection>
</DetailDrawer>
```

### Minimal drawer

No status, summary or footer; just title, body and close.

```tsx
<DetailDrawer
  trigger={<Button variant="secondary">Open order KURA-10428</Button>}
  title="Order KURA-10428"
  closeLabel="Close details"
>
  <p className="text-2xs text-muted">
    Details, lines and history for this order.
  </p>
</DetailDrawer>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `trigger` | `ReactElement` | `—` | Element that opens the panel; composed with render, not asChild. |
| `title` | `ReactNode` | `—` | Provides the dialog's accessible name. |
| `description` | `ReactNode` | `—` | Text under the title; optional and announced as the description. |
| `status` | `ReactNode` | `—` | Badge or status in the body header. |
| `summary` | `ReactNode` | `—` | Summary aligned to the left of the status. |
| `children` | `ReactNode` | `—` | Detail sections; DetailSection provides the heading and rule. |
| `footer` | `ReactNode` | `—` | Actions pinned to the bottom of the panel. |
| `closeLabel` | `string` | `—` | aria-label of the close button. |
| `className` | `string` | `—` | Adds to the component's base classes. |

## Accessibility

- Base UI traps focus inside the panel, closes on Escape and returns focus to the trigger.
- title provides the dialog's accessible name; the close button uses closeLabel as its aria-label.
- The trigger must be a real element (ReactElement): compose it with render, not asChild.
- Clicking the backdrop also closes and returns focus; avoid destructive actions without confirmation.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/erp/detail-drawer
- Markdown: https://koten.codehive.com.co/md/blocks/erp/detail-drawer.md
- Repository: https://github.com/codehive-colombia/koten