Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Sheet
A flyout that opens from the side of the screen, based on the dialog component.
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Sheet,
SheetClose,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export default function Particle() {
return (
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Open Sheet
</SheetTrigger>
<SheetPopup>
<Form className="contents">
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're
done.
</SheetDescription>
</SheetHeader>
<SheetPanel className="grid gap-4">
<Field>
<FieldLabel>Name</FieldLabel>
<Input defaultValue="Margaret Welsh" type="text" />
</Field>
<Field>
<FieldLabel>Username</FieldLabel>
<Input defaultValue="@maggie.welsh" type="text" />
</Field>
</SheetPanel>
<SheetFooter>
<SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
<Button type="submit">Save</Button>
</SheetFooter>
</Form>
</SheetPopup>
</Sheet>
);
}
Installation
pnpm dlx shadcn@latest add @coss/sheet
Usage
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetPopup>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
<SheetPanel>Content</SheetPanel>
<SheetFooter>
<SheetClose>Close</SheetClose>
</SheetFooter>
</SheetPopup>
</Sheet>API Reference
Sheet
Root component. Alias for Dialog.Root from Base UI.
SheetTrigger
Trigger button that opens the sheet. Alias for Dialog.Trigger from Base UI.
SheetPopup
Popup container that displays the sheet content. Also exported as SheetContent.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "right" | "left" | "top" | "bottom" | "right" | Controls which side of the screen the sheet opens from |
inset | boolean | false | When true, adds spacing around the sheet on desktop screens |
showCloseButton | boolean | true | When true, displays a close button in the top-right corner |
Example:
// Right side sheet (default)
<SheetPopup side="right">
...
</SheetPopup>
// Left side sheet
<SheetPopup side="left">
...
</SheetPopup>
// Top sheet
<SheetPopup side="top">
...
</SheetPopup>
// Bottom sheet
<SheetPopup side="bottom">
...
</SheetPopup>
// Sheet with inset spacing
<SheetPopup side="right" inset>
...
</SheetPopup>SheetHeader
Container for the sheet title and description.
SheetFooter
Footer section for action buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "bare" | "default" | Controls the footer styling. default includes border and background, bare removes them |
SheetTitle
Title component. Alias for Dialog.Title from Base UI.
SheetDescription
Description component. Alias for Dialog.Description from Base UI.
SheetPanel
Scrollable content container. Automatically wraps content in a ScrollArea component.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollFade | boolean | true | When true, shows a fade effect at scroll edges |
Example:
<SheetPanel>
{/* Long content that will scroll if it exceeds the sheet height */}
<div>...</div>
</SheetPanel>SheetClose
Close button component. Alias for Dialog.Close from Base UI.
SheetPortal
Portal component for rendering outside the DOM hierarchy. Alias for Dialog.Portal from Base UI.
SheetBackdrop
Backdrop/overlay component. Also exported as SheetOverlay. Alias for Dialog.Backdrop from Base UI.
Examples
Sheet with Inset
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Sheet,
SheetClose,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export default function Particle() {
return (
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Open Sheet
</SheetTrigger>
<SheetPopup inset>
<Form className="h-full gap-0">
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're
done.
</SheetDescription>
</SheetHeader>
<SheetPanel className="grid gap-4">
<Field>
<FieldLabel>Name</FieldLabel>
<Input defaultValue="Margaret Welsh" type="text" />
</Field>
<Field>
<FieldLabel>Username</FieldLabel>
<Input defaultValue="@maggie.welsh" type="text" />
</Field>
</SheetPanel>
<SheetFooter>
<SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
<Button type="submit">Save</Button>
</SheetFooter>
</Form>
</SheetPopup>
</Sheet>
);
}
Side sheets
import { Button } from "@/components/ui/button";
import {
Sheet,
SheetDescription,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export default function Particle() {
return (
<div className="flex flex-wrap gap-2">
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Open Right
</SheetTrigger>
<SheetPopup showCloseButton={false}>
<SheetHeader>
<SheetTitle>Right</SheetTitle>
<SheetDescription>Right side of the screen.</SheetDescription>
</SheetHeader>
<SheetPanel>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</SheetPanel>
</SheetPopup>
</Sheet>
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Open Left
</SheetTrigger>
<SheetPopup showCloseButton={false} side="left">
<SheetHeader>
<SheetTitle>Left</SheetTitle>
<SheetDescription>Left side of the screen.</SheetDescription>
</SheetHeader>
<SheetPanel>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</SheetPanel>
</SheetPopup>
</Sheet>
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Open Top
</SheetTrigger>
<SheetPopup showCloseButton={false} side="top">
<SheetHeader>
<SheetTitle>Top</SheetTitle>
<SheetDescription>Top of the screen.</SheetDescription>
</SheetHeader>
<SheetPanel>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</SheetPanel>
</SheetPopup>
</Sheet>
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Open Bottom
</SheetTrigger>
<SheetPopup showCloseButton={false} side="bottom">
<SheetHeader>
<SheetTitle>Bottom</SheetTitle>
<SheetDescription>Bottom of the screen.</SheetDescription>
</SheetHeader>
<SheetPanel>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</SheetPanel>
</SheetPopup>
</Sheet>
</div>
);
}