Block · C-058 · erp

DetailDrawer

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.

Install

Blocks compose Koten primitives; install koten-theme first.

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

Requirements

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

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/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

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.

Read the whole page