Dialog

A focused surface for decisions that need attention.

npx shadcn@latest add @silicon-ui/dialog
modaloverlay
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/dialog

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-dialog lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/dialog/dialog.tsx
    • components/silicon-ui/dialog/dialog.module.css
    • components/silicon-ui/lib/escape.ts shared
    • components/silicon-ui/lib/return-focus.ts shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Dialog } from "@/components/silicon-ui/dialog/dialog";

API reference

Dialog

Accepts the props of DialogProps.

DialogContent

PropTypeDefault
title*string—
children*ReactNode—
descriptionstring—

Also accepts the props of ComponentPropsWithoutRef<typeof DialogPrimitive.Content>.

DialogTrigger

Accepts the props of ButtonHTMLAttributes.

DialogClose

Accepts the props of ButtonHTMLAttributes.

Dependencies

npm
@radix-ui/react-dialoglucide-reactmotion
Registry
silicon-motion-tokens