Dialog Component

Route

Open the live component page at /app/components/dialog.

The component index is available at /app/components.

/components/dialog

Source files

The catalog entry is defined in lib/component-catalog.ts.

The page route is app/app/components/[slug]/page.tsx.

The showcase renderer is components/component-showcase.tsx.

Shared styling lives in app/globals.css.

Implementation guidance

Use the Dialog examples as the project-approved visual and interaction pattern for this UI family.

Prefer existing local components, tokens, and class naming before introducing new abstractions.

When adding a new variant, keep light mode, dark mode, hover, selected, disabled, and focus states aligned.

• Keyboard focus is visible.
• Dark theme colors are readable.
• Primary color customization still works where relevant.
• Mobile layout does not overflow.
• The page still passes npm run check.