API Reference

Anatomy

Import all parts and piece them together.

import {
  ResponsiveDialog,
  ResponsiveDialogContent,
  ResponsiveDialogDescription,
  ResponsiveDialogFooter,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
  ResponsiveDialogTrigger,
} from "@/components/ui/revola";

export function MyRevola() {
  return (
    <ResponsiveDialog>
      <ResponsiveDialogTrigger />
      <ResponsiveDialogContent>
        <div>
          <ResponsiveDialogHeader>
            <ResponsiveDialogTitle />
            <ResponsiveDialogDescription />
          </ResponsiveDialogHeader>
          <ResponsiveDialogFooter />
        </div>
      </ResponsiveDialogContent>
    </ResponsiveDialog>
  );
}

Components API

Description of props for each component.

Root

Contains all the parts of a Revola.

Core Props (Universal) These props work across both desktop dialog and mobile drawer modes.

Mobile Drawer Props These props only affect the drawer behavior on mobile devices.

Snap Points (Mobile Drawer Only)

These props configure snap points and only apply when Revola renders as a drawer on mobile devices.

Device Control

Revola provides additional props to control responsive behavior and force specific modes.

Component Props

Trigger

The button that opens the drawer.

Content

Contains the main content to be rendered inside Revola.

Close

The button that closes Revola.

Header

A wrapping header component for title and description that ensures proper layout in Revola. No additional props.

Title

An optional accessible title to be announced when the drawer is opened.

Description

An optional accessible description to be announced when the drawer is opened.

Footer

A wrapping footer component that ensures proper action button placement in Revola. No additional props.