Drawer

Dialog that slides in from the edge of the screen. Built with Vaul.

Installation

# Install @opencosmos/ui to use Drawer
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { Drawer } from '@opencosmos/ui';

Example

<Drawer>
  Content
</Drawer>

Eject

Copy this component into your project for full customization

Code Examples

Basic Usage

Bottom drawer panel

import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@opencosmos/ui"

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>