KokonutUI Logo

NV-06NavigationUpdated, October 16, 2026

Smooth Drawer

Checkout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.

Install with
lucide-react, motion

PRODocs Search and more like it are in Kokonut UI Pro

Installation

Smooth Drawer is a free, open-source React component in the Kokonut UI Navigation collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/smooth-drawer.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/smooth-drawer

Usage

import SmoothDrawer from "@/components/kokonutui/smooth-drawer";

export default function Example() {
  return <SmoothDrawer />;
}

Dependencies

Built with React, Tailwind CSS, lucide-react and motion. The CLI also adds the shadcn/ui drawer and button components.

On this page

No Headings