1Sponsor

Drawer

Slide-in panel from any edge

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/drawer.json

Usage

import { Drawer } from "@/components/ui/drawer";
<Drawer
  isOpen={true}
  edge="right"
  title="Details"
  width={40}
  onClose={() => close()}
>
  <Text>Name: my-project</Text>
  <Text>Status: active</Text>
</Drawer>

API Reference

Drawer

PropTypeDefault
isOpenbooleanfalse
edge"left" | "right" | "top" | "bottom""right"
titlestringundefined
childrenReactNoderequired
onClose() => voidundefined
widthnumber40
heightnumber10