Modal

Radix Dialog with a sketch frame and a dimmed backdrop. Focus trap, Escape to close, and ARIA labelling are inherited. Opening fades the backdrop, eases the panel in, and draws the frame.

Roughness1.5Lock seedAnimate

<Modal
  title="Scratch pad"
  trigger={<Button>Open modal</Button>}
  roughness={1.5}
>
  Content
</Modal>

CLI install

npx doodleui-react add modal

Usage

import { Modal, Button } from "doodleui-react";

<Modal
  title="Scratch pad"
  trigger={<Button>Open modal</Button>}
>
  Any content.
</Modal>

Compound exports (ModalRoot, ModalTrigger, ModalClose, ModalTitle, ModalDescription) are available if you need the full Radix structure.

Props

Prop	Type	Default	Notes
trigger	ReactNode	undefined	Element that opens the dialog (Radix Trigger asChild).
title	ReactNode	undefined	Dialog title. A visually hidden title is used if omitted.
description	ReactNode	undefined	Optional supporting copy.
open / onOpenChange	boolean / (open: boolean) => void	uncontrolled	Radix controlled API. Focus trap and Escape are built in.
animate	boolean	true	Backdrop fade, panel enter/exit, and border draw-in on open. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.