Drawer

A temporary side surface for focused work.

npx shadcn@latest add @silicon-ui/drawer
overlaysurface
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/drawer

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-dialog lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/drawer/drawer.tsx
    • components/silicon-ui/drawer/drawer.module.css
    • components/silicon-ui/lib/escape.ts shared
    • components/silicon-ui/lib/return-focus.ts shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Drawer } from "@/components/silicon-ui/drawer/drawer";

API reference

Drawer

Accepts the props of DialogProps.

DrawerContent

PropTypeDefault
title*string—
children*ReactNode—
descriptionstring—
side"left" | "right" | "top" | "bottom""right"
container

Renders the drawer inside this element instead of the page body, anchored to its edges. The element needs position: relative and overflow: hidden.

HTMLElement | null—

Also accepts the props of ComponentPropsWithoutRef<typeof DialogPrimitive.Content>.

DrawerTrigger

Accepts the props of ButtonHTMLAttributes.

DrawerClose

Accepts the props of ButtonHTMLAttributes.

Dependencies

npm
@radix-ui/react-dialoglucide-reactmotion
Registry
silicon-motion-tokens