components/ui/lumen/controls/detail-drawer.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

Detail DrawerProv1.0.0

Open one record over its list without losing the list: heading and status, fields, related charts and activity, pinned actions, previous and next with J and K, full screen on phones, and focus back on the row when it closes.

Built on shadcn/ui

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-detail-drawer

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

useDetailDrawer(records, getId)–
hook
List state: open(id), close(), record, rowProps(id) for each row, and props for the drawer (open, position, previous/next).
title / eyebrow / description / status–
ReactNode
The record's heading, a small mono line above it, a line below, and a badge beside it.
position–
{ index: number; total: number }
Shown as "3 of 24" and announced as it changes.
onPrevious / onNext–
() => void
Step through the list; the buttons disable at either end.
labels–
{ previous?, next?, of? }
Words, for i18n.
DetailDrawerSection title–
ReactNode
A titled section (a labelled region).
DetailDrawerFields fields–
{ label, value, mono? }[]
A two-column description list; mono for numbers and ids.
DetailDrawerFooter–
div
Actions pinned to the bottom.

Anatomy

Written once in the shared core and generated for each system.
Built on Lumen Sheet and Button, so it works the same on Base UI and Radix.
useDetailDrawer keeps list state outside the drawer.

DetailDrawerdata-slot="detail-drawer"
The drawer, heading, status and previous/next.
DetailDrawerSectiondata-slot="detail-drawer-section"
A titled section.
DetailDrawerFieldsdata-slot="detail-drawer-fields"
The record's fields.
DetailDrawerFooterdata-slot="detail-drawer-footer"
Pinned actions.

Part of

Detail Drawer is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v1.0.0 · 2026-09-30All 1 entries

v1.0.0 · 2026-09-30
First release: a shared product control, drawn in Lumen

Keyboard

J / K: Next or previous record (not while typing in a field)
Escape: Close and return to the row
Enter: Open a focused row (in your row handler)

More in Data

Avatar

Table

Item