COMPONENTS / OVERLAYS

Dialogs and modals

Focus-trapped dialogs for review, editing, and confirmation.

standardv1.0.0verifiedFigma linked

Standards Open in Figma

Live previewUpdated 2026-10-09 · CSC Design System

Design variations

Standard

Minimal

Drawer

Fullscreen

Bottom sheet

Implementation

// npx github:rbillyjames0221/csc-ui init
import '@csc/ui/styles.css';
import { Modal } from '@csc/ui';

export function Example() {
  return (
    <Modal kind="standard" />
  );
}

Agent prompt

Copy a prompt for this component from the AI Development Hub.

When to use it

Focus-trapped dialogs for review, editing, and confirmation.

Dependencies: @radix-ui/react-dialog. Source: packages/ui/src/modal.tsx. 1.0.0 — Centered, minimal, drawer, fullscreen, and bottom sheet.