║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Sheet description: A flyout that opens from the side of the screen, based on the dialog component.

links: doc: https://base-ui.com/react/components/dialog#api-reference

<ComponentPreview name="sheet-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/sheet

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="sheet" title="components/ui/sheet.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  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>
  </SheetPopup>
</Sheet>

Examples

Side sheets

<ComponentPreview name="sheet-position" />

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.

Quick Checklist

• Replace asChild → render on SheetTrigger and closing buttons
• Prefer SheetPopup; SheetContent remains for legacy
• If you used asChild on any other parts, switch to the render prop

Comparison Example

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:asChild] <Sheet> <SheetTrigger asChild> <Button variant="outline">Show Sheet</Button> </SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle>Sheet Title</SheetTitle> <SheetDescription>Sheet Description</SheetDescription> </SheetHeader> <SheetFooter> <SheetClose asChild> <Button variant="ghost">Cancel</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:render] <Sheet> <SheetTrigger render={<Button variant="outline" />}> Show Sheet </SheetTrigger> <SheetPopup> <SheetHeader> <SheetTitle>Sheet Title</SheetTitle> <SheetDescription>Sheet Description</SheetDescription> </SheetHeader> <SheetFooter> <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose> </SheetFooter> </SheetPopup> </Sheet> ``` </span>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║