UI Skillbook
2

Detail Drawer

A right-side drawer for viewing one record's details beside its list, optionally with an edit form.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-detail-drawer and follow the Siteplane Detail Drawer skill it prints for this task.

Paste this into your agent.

Detail Drawer shows the details of an item people pick from a list or table, without leaving the page. It has a header for the record name, a scrolling body and a footer for actions. Wrap it in a form to make an edit panel.

Install

bashnpx shadcn@4.18.0 add @siteplane/detail-drawer

Import it from @/siteplane/components/detail-drawer. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Drawer: Compose Drawer yourself when the panel is not about a single record.
  • vs Sheet: Pick Sheet instead for a standalone form at the edge that has no swipe behavior.
  • vs Alert Dialog: Pick Alert Dialog instead for a short confirmation.

Rules

  • Name the record in the header with a title and keep a visible close action.
  • Put the content in DetailDrawerBody so long records and forms scroll between the header and footer.
  • Wrap header, body and footer in a form when editing, so Save submits; close the drawer after the save succeeds.
  • Leave position on DetailDrawerPopup unset so it follows the root and the swipe direction matches.
  • Write DetailDrawerPopup in new code; DetailDrawerContent is the older name.

Reference

  • Detail Drawer docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-detail-drawer

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Adaptby pbakaus

Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.

InteractionExternalGitHub stars: 95.1K

Animateby pbakaus

Enhance UX with purposeful animation and micro-interactions that support usability and delight.

MotionExternalGitHub stars: 95.1K

Animate Expoby emilkowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

MotionExternalGitHub stars: 51.4K

Animation on Scrollby MengTo

Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.

MotionExternalGitHub stars: 7.1K

Back to Siteplane UI