Sheet
Side panel on the native <dialog> element. It slides in from either edge, and you can fling it back to close.
- Category: Overlays
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Sheet
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
open / onOpenChange | boolean / (open: boolean) => void | — | |
side | "left" | "right" | "right" | |
title / description | ReactNode | — | |
footer | ReactNode | — |
About Sheet
Sheet is a side panel built on the native dialog element. It slides in from either edge and can be flung back to close, for settings, carts and detail views.
Sheet is an overlay component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Sheet
- Shopping carts.
- Settings and filters.
- Detail panels in tables.
- Mobile navigation.
How it works
It uses showModal for focus trapping and the top layer, and a horizontal drag with velocity to close. side sets the edge.
It traps and returns focus correctly, closes on Escape, and is announced to screen readers with the right dialog or menu role. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Sheet
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change side, title, description live, and the Code tab updates to match, so the snippet you copy already carries your values.
- open / onOpenChange.
- side ("left" | "right", default "right").
- title / description (ReactNode).
- footer (ReactNode).
Goes well with Sheet
Sheet is already composed into 3 ready-made sections, so you can see it in context or install the whole block.
- Navbar Floating: Navbar section
- Navbar Announcement: Navbar section
- Navbar Centered: Navbar section
- Tooltip: An animated React tooltip that springs from its trigger, with instant neighbours
- Popover: An animated React popover that scales from its trigger and returns focus on close
- Dialog: An animated React dialog on the native dialog element, with blur and scale transitions
- Drawer: A React bottom sheet drawer you can fling closed, with rubber-banding at the top
- Toast: Animated React toasts that stack, fan out on hover and swipe away
Install Sheet
npx shadcn@latest add https://charcoalui.com/r/sheet.jsonSheet is free and MIT licensed. The command copies sheet.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Morph Dialog, a Pro piece: A card that grows into a dialog: the shell, artwork and title morph between the two, then fold back on close.
Frequently asked questions
- Which side can the sheet open from?
- Left or right with the side prop, and it can be flung back toward its edge to close.
- How do I install Sheet?
- Run npx shadcn@latest add https://charcoalui.com/r/sheet.json. The shadcn CLI copies sheet.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Sheet free for commercial use?
- Yes. Sheet is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Sheet work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Sheet?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Sheet's props and source and get_install_command returns the exact command.