Drawer

Component

About

A panel built on the native dialog element that slides in from an edge of the screen, for navigation, filters or an edit form, with modal and non-modal modes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Drawer to your project and fits it to your theme.

Code

How Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import Drawer, { DrawerHandle } from "@/components/ui/drawer";

export default function DrawerCustomHeaderDemo() {
  const shipRef = React.useRef<DrawerHandle>(null);

  return (
    <div className="min-h-[420px] w-full p-8">
      <button
        type="button"
        onClick={() => shipRef.current?.show()}
        className="rounded-md bg-[#8C6BFF] px-3 py-1.5 text-sm font-medium text-white"
      >
        Ship details
      </button>
      <Drawer
        ref={shipRef}
        header={
          <span className="flex items-center gap-2">
            <span aria-hidden="true">🚀</span>
            <strong>Starbase One</strong>
          </span>
        }
      >
        Docked at bay 7. Next departure at 14:20.
      </Drawer>
    </div>
  );
}