Actions & overlays@neumorphism-ui/drawer

Drawer

Uses Base UI Drawer gestures and focus management. Sheet is a fixed task panel; Drawer is better for temporary touch-first surfaces that users can swipe away or open from another edge.

@neumorphism-ui/drawer

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/drawer

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/drawer @neumorphism-ui/button

Import

"use client";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";

Example

export default function Example() {
  return <Drawer swipeDirection="down">
    <DrawerTrigger render={<Button />}>Quick settings</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Quick settings</DrawerTitle>
        <DrawerDescription>Adjust frequent options without leaving the current screen.</DrawerDescription>
      </DrawerHeader>
      <div className="grid gap-3 px-5 py-4"><p>Notification and display controls can live in this area.</p></div>
      <DrawerFooter><DrawerClose render={<Button variant="primary" />}>Done</DrawerClose></DrawerFooter>
    </DrawerContent>
  </Drawer>;
}

API Reference

Component	Prop	Type	Default	Description
`Drawer`	`swipeDirection`	`"down" \| "up" \| "left" \| "right"`	`"down"`	Sets the opening, closing, and swipe direction.
`Drawer`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	Controls the Drawer open state.
`Drawer`	`snapPoints`	`number[]`	`—`	Configures intermediate resting points when needed.
`DrawerTrigger`	`render`	`ReactElement`	`—`	Composes an existing Button or other element as the trigger.
`DrawerContent`	`className`	`string \| (state) => string`	`—`	Extends the panel styling while preserving direction and gesture behavior.