Dialog
Modal dialog overlay for focused content and actions. Install Dialog from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
1 storyView componentSheet
Compare Sheet for React and React Native in VLLNT UI 0.4.0. Explore source, dependencies and native capabilities. Native is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Sheet is a slide-over panel that enters from the edge of the screen, built on Radix UI's Dialog primitive. A side variant positions it on the top, right, bottom, or left, and it ships with trigger, content, header, footer, title, description, and close parts. Use it for navigation drawers, filters, quick forms, or detail views that shouldn't take over the whole page. Radix handles focus trapping, escape-to-close, and ARIA.
OverlayPreview
Switch between light and dark to inspect the embedded Storybook preview.
Slide-over panel from the edge of the screen. Part of the overlay family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Sheet to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/sheet.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Sheet?
- Sheet is a slide-over panel component for React that animates in from a screen edge. It is built on Radix UI Dialog and includes trigger, content, header, footer, title, description, and close parts.
- How do I add Sheet?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/sheet.json` to install it into your project via the shadcn CLI.
- Which sides can a Sheet open from?
- The side prop accepts top, right (the default), bottom, or left, so the panel slides in from whichever edge you choose. Built on Radix Dialog, it also traps focus and closes on Escape.