Backdrop

'use client';

import { useState } from 'react';
import { Backdrop } from '@/ui/Backdrop';
import { Button } from '@/ui/buttons/Button';

export function BackdropDemo() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Open Backdrop</Button>
      <Backdrop
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        className="flex items-center justify-center"
      >
        <div className="bg-white rounded-lg p-6 shadow-xl max-w-md">
          <h2 className="text-xl font-semibold mb-2">Modal Content</h2>
          <p className="text-gray-600 mb-4">
            This content is displayed on top of the backdrop. Click outside to close.
          </p>
          <Button onClick={() => setIsVisible(false)}>Close</Button>
        </div>
      </Backdrop>
    </>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/backdrop.json
Copy

Usage

Copy'use client';
 
import { useState } from 'react';
import { Backdrop } from '@/docs/lib/ui/backdrop';
import { Button } from '@/docs/lib/ui/Button';
 
export function Component() {
  const [isVisible, setIsVisible] = useState(false);
 
  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Open Modal</Button>
      <Backdrop
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        className="flex items-center justify-center"
      >
        <div className="bg-white rounded-lg p-6 shadow-xl">
          <h2 className="text-xl font-semibold mb-2">Modal Title</h2>
          <p className="mb-4">Your modal content goes here.</p>
          <Button onClick={() => setIsVisible(false)}>Close</Button>
        </div>
      </Backdrop>
    </>
  );
}

API Reference

Backdrop

The Backdrop component also accepts all standard HTML div attributes through ComponentProps<"div">.

Notes

• The Backdrop uses the Portal component to render outside the normal DOM hierarchy, preventing z-index and overflow issues.
• Transitions are powered by react-transition-state with a 500ms exit duration for smooth animations.
• The backdrop has a semi-transparent white background (bg-white/80) with a blur effect (backdrop-blur) when visible.
• The component handles mount/unmount logic automatically based on the isVisible prop, with mountOnEnter and unmountOnExit behavior.
• The overlay button has aria-hidden="true" since it's a decorative click target, and the wrapper has role="presentation" for accessibility.
• Dismissable Control: When dismissable={false}, backdrop clicks and ESC key presses do not trigger onClose. This is useful for critical dialogs that require explicit user confirmation before closing.
• When sweep mode is enabled, the backdrop slides in from the left and slides out to the right with a full horizontal translation.
• The component uses isolate and -z-1 positioning to ensure proper layering of the backdrop and content.