Record Detail Drawer React component
A CRM-style accounts table with a record drawer that slides in from the right: next and previous with J / K, a stage picker that logs to the activity feed, click-to-edit fields that save on Enter, copy email, call and email shortcuts, and Overview / Activity / Notes tabs with a note composer.
About the Record Detail Drawer component
Record Detail Drawer is the list-plus-details pattern from CRMs and admin tools: a table of records, and a panel that slides in with everything about the one you clicked, without leaving the list.
The drawer is built for working through records quickly. J and K move to the next and previous record, fields are edited in place and saved on Enter, the stage picker logs its change to the activity feed, and notes can be added from the keyboard.
When to use it
Use it for CRMs, support queues, order lists, user admin and any table where people open records one after another.
When a record needs a full page of its own, link to a detail screen from the drawer header.
Installation
Add the Record Detail Drawer component to your project with the shadcn CLI. It lands in components/record-detail-drawer.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/record-detail-drawerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<RecordDetailDrawer /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| records | DrawerRecord[] | RECORDS |
| owners | string[] | OWNERS |
| defaultOpenId | string | null | "1" |
| onRecordChange | (record: DrawerRecord) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- recordsDrawerRecord[]Default: RECORDS
- ownersstring[]Default: OWNERS
- defaultOpenIdstring | nullDefault: "1"
- onRecordChange(record: DrawerRecord) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Record Detail Drawer FAQ
- How do edits get saved?
- Every change calls onRecordChange with the updated record. Clicking a value turns it into an input; Enter or leaving the field saves, Escape cancels, and a small Saved label confirms it.
- Which keys work?
- In the table, arrow keys move between rows and Enter opens one. With focus in the drawer, J and K go to the next and previous record and Escape closes it. In notes, ⌘↵ or Ctrl+↵ saves.
- Does it work on phones?
- Yes. The table drops to contact and stage columns, and the drawer takes the full width over a scrim that closes it when tapped.
- Can I open a record from the URL?
- Pass defaultOpenId, for example from a query parameter, and the drawer starts open on that record.
- Is it accessible?
- Rows are focusable with aria-selected, the drawer is a labelled dialog, sections are tabs, every editable value is a labelled button that becomes a labelled input, and save confirmations are announced.
