Drawer

Component 2

About

Display content in a separate view from the existing context.

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

import { useState } from "react";
import { Drawer } from "@/components/ui/drawer";

export default function DefaultDemo() {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <>
    <button onClick={(): void => setOpen(true)} className="w-fit">Open</button>
    <Drawer onDismiss={(): void => setOpen(false)} show={open}>
      <div className="flex flex-col gap-2 p-12 text-gray-1000 font-sans">
        <div className="text-center text-lg font-semibold">
          A drawer title
        </div>
        <div className="text-center text-sm">Drawer body</div>
      </div>
    </Drawer>
    </>
  );
}