‹ components

Dialog

stablev1.0.0·open in canvas

Centered modal — Sheet's desktop-centered sibling. Behavior is Radix Dialog; the title prop is required because a dialog must name itself.

Installnpx shadcn add @cids/dialog
Live demo

Motion · tap to replay

honors reduced-motion

fade-in-0 + zoom-in-95 presets on open, reverse on close; reduced-motion collapses via the global reset.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Dialog, Button } from "@/design-system";

<Dialog
  open={open}
  onOpenChange={setOpen}
  title="Remove wallet?"
  description="This disconnects @mira from this device."
  footer={<>
    <Button onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="destructive" onClick={confirm}>Remove</Button>
  </>}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

closedopendismissing .

Centered modal — Sheet's desktop-centered sibling. Behavior is Radix Dialog; the title prop is required because a dialog must name itself.

Anatomy

┈┈ overlay (black/50 + blur) ┈┈
   ┌ Title              × ┐
   │ description          │
   │ body                 │
   │          [btn] [btn] │ ← footer, right-aligned
   └───────────────────────┘  rounded-sheet, shadow-overlay

Props

PropTypeDefaultNotes
open / onOpenChangecontrolled pair—Caller owns state.
titlestringrequiredRadix Title → accessible name.
descriptionstring—Radix Description → aria-describedby.
childrenReactNode—Body.
footerReactNode—Action row (destructive actions confirm here).
classNamestring—cn-merged onto the panel.

Motion

fade-in-0 + zoom-in-95 presets on open, reverse on close; reduced-motion collapses via the global reset.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.