Blur Drawer

Component

About

A bottom sheet drawer with a blurred/tinted backdrop that slides up over page content, useful for mobile-style menus, filters or detail panels.

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

Code

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

Usage.tsx

import DrawerBlur from "@/components/ui/drawer-blur";

export default function DrawerBlurDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background">
      <DrawerBlur
        title="Notifications"
        trigger={
          <button className="inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none whitespace-nowrap transition-colors hover:bg-surface-3">
            Open drawer
          </button>
        }
      >
        <p>You&apos;re all caught up. New notifications will appear here.</p>
      </DrawerBlur>
    </div>
  );
}