UI Skillbook
2

Sheet

A dialog-backed panel that opens from a screen edge for forms and save-or-cancel tasks.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Sheet gives a task more room than a dialog while the page stays in view, such as editing a profile or reading release notes. It opens from any edge with dialog behavior and no swipe. The fullscreen variant also works as small-screen navigation.

Install

bashnpx shadcn@4.18.0 add @siteplane/sheet

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

When to pick it

  • vs Drawer: Pick Drawer instead when you want swipe-to-dismiss, as on touch devices.
  • vs Dialog: Pick Dialog instead for a short centred task.
  • vs Alert Dialog: Pick Alert Dialog instead when the overlay holds one decision the person must answer.

Rules

  • Set side on SheetPopup to choose the edge; right is the default.
  • Include SheetTitle to name the panel, and add a close control if you turn off showCloseButton.
  • Put long content in SheetPanel so it scrolls while the header and footer stay fixed.
  • Close the sheet once the save succeeds, and leave it open while the save runs.
  • Use variant="fullscreen" for small-screen navigation that fills the viewport.

Reference

  • Sheet 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-sheet

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