Sheet

Extends the Dialog component to display content that complements the main content of the screen. Slides in from top, right, bottom, or left.

Installation
# Install @opencosmos/ui to use Sheet
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— The side from which the sheet slides in
Usage
Import
import { Sheet } from '@opencosmos/ui';
Example
<Sheet>
  Content
</Sheet>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
sidetop | right | bottom | left"right"The side from which the sheet slides in

Accessibility

  • Built on Radix UI Dialog primitive (repurposed as sheet)
  • Focus trap within sheet when open
  • Escape key closes the sheet
  • Click outside closes the sheet
  • Prevents background scroll when open
  • Proper ARIA roles and labels

Code Examples

Basic Usage

Sheet that slides from the right (default)

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Button } from '@opencosmos/ui';

<Sheet>
  <SheetTrigger asChild>
    <Button>Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>
        Description goes here.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Different Sides

Sheet sliding from different sides

// Slide from left
<Sheet>
  <SheetTrigger asChild>
    <Button>Open from Left</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Navigation</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>