Atoms

Drawer

A drawer component that slides in from the edge of the screen.

shadcn/uiBased on shadcn/ui with Formance brand styling.

Installation#

npx shadcn@latest add @formance/drawer

Install the following dependencies:

npm install vaul

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit Settings</DrawerTitle>
      <DrawerDescription>Make changes to your stack configuration.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>