UI Skillbook
2

Drawer

A modal sheet that enters from any side of the screen and closes with a swipe.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Drawer suits touch-first panels from any edge, such as a mobile navigation menu, an action sheet or filters. Snap points let a bottom panel rest half open. It also ships menu parts for action lists inside the panel.

Install

bashnpx shadcn@4.18.0 add @siteplane/drawer

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

When to pick it

  • vs Sheet: Pick Sheet instead for an edge panel that should not respond to swipe gestures, such as a desktop form.
  • vs Detail Drawer: Pick Detail Drawer instead to show one record's details beside a list.
  • vs Dialog: Pick Dialog instead for a centred task that does not belong to an edge.

Rules

  • Set position on the Drawer root; the popup, bar and swipe direction follow it.
  • Keep a visible close action, such as showCloseButton on DrawerPopup, for people who don't swipe.
  • DrawerMenu items do not close the drawer. Wrap them in DrawerClose when a choice should close it.
  • Put long content in DrawerPanel. It scrolls while the header and footer stay fixed.
  • Use snapPoints for a bottom drawer that should open at a compact height before expanding.

Reference

  • 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-drawer

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Filter Barby UI Skillbook

A layout strip above a list or table for view tabs, search, filter menus, actions and applied-filter tags.

Siteplane UI

Swiftui Ui Patternsby dimillian

Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.

ResponsiveExternalGitHub stars: 4K

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Accessible Focus Statesby UI Skillbook

Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.

Accessibility

Back to Siteplane UI