Backdrop

PreviousNext

A fullscreen overlay component with smooth transitions and Portal rendering for modals, dialogs, and overlays.

'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

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

Usage

'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

PropTypeDefaultDescription
isVisiblebooleanundefinedControls the visibility of the backdrop. When true, the backdrop appears with a smooth fade-in transition. When false, it fades out and unmounts.
onClose(event: MouseEvent<HTMLButtonElement>) => voidundefinedCallback function triggered when the backdrop overlay is clicked. Typically used to close the modal or dialog.
sweepbooleanfalseEnables "Sweep Mode" which makes the backdrop appear from the sides with a horizontal slide animation instead of a fade effect.
targetstring"backdrop"The target ID for the Portal component. The backdrop will be rendered into the DOM element with this ID.
classNamestring"flex justify-center"Additional CSS classes for the backdrop container. The default centers content horizontally.
childrenReactNodeundefinedThe content to display on top of the backdrop, typically a modal, dialog, or other overlay content.

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.
  • 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.