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>
        <ResponsiveDialogHeader>
          <ResponsiveDialogTitle />
          <ResponsiveDialogDescription />
        </ResponsiveDialogHeader>
        <ResponsiveDialogFooter />
      </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.

Prop	Type	Default
`open`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`function`	-
`modal`	`boolean`	`true`
`dismissible`	`boolean`	`true`

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

Prop	Type	Default
`direction`	`directionType`	`bottom`
`repositionInputs`	`boolean`	`true`
`shouldScaleBackground`	`boolean`	`true`

Snap Points (Mobile Drawer Only)

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

Prop	Type	Default
`snapPoints`	`array`	-
`activeSnapPoint`	`string \| number \| null`	-
`setActiveSnapPoint`	`function`	-
`fadeFromIndex`	`number`	`snapPoints.length`
`snapSequentialPoint`	`boolean`	`false`

Device Control

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

Prop	Type	Default
`alert?`	`boolean`	`false`
`onlyDrawer?`	`boolean`	`false`
`onlyDialog?`	`boolean`	`false`

Component Props

Trigger

The button that opens the drawer.

Prop	Type	Default
`asChild?`	`boolean`	`false`

Content

Contains the main content to be rendered inside Revola.

Prop	Type	Default
`asChild?`	`boolean`	`false`
`showCloseButton?`	`boolean`	`true`

Close

The button that closes Revola.

Prop	Type	Default
`asChild?`	`boolean`	`false`

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.

Prop	Type	Default
`asChild?`	`boolean`	`false`

Description

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

Prop	Type	Default
`asChild?`	`boolean`	`false`

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

API Reference

On this page