Animated Dialog

A composable, accessible dialog modal built on Base UI with controlled state, direction-aware enter and exit motion, and reduced-motion support.

Library

Sona UI

Framework

React

Type

ui

License

MIT

Dependencies

@base-ui/react, motion

Install

npx shadcn@latest add @sona-ui/animated-dialog

Files

• src/registry/sonaui/animated-dialog/animated-dialog.tsx
• src/registry/sonaui/sona-utils/sona-utils.ts
• src/registry/sonaui/sona-motion/sona-motion.ts
• src/lib/sona-motion.ts
• src/lib/sona-utils.ts

Source

https://github.com/Dinil-Thilakarathne/sona-ui

Categories

• Modal Components
• React Modal Components
• Tailwind CSS Modal Components
• Animated Modal Components
• Overlay Components
• React Overlay Components
• Tailwind CSS Overlay Components
• Animated Overlay Components

More from Sona UI

• Command Palette Preview
• Accordion
• Activity Graph
• Animated Checkbox
• Animated Dropdown
• Animated Segmented Control
• Animated Switch
• Animated Tabs
• Assignment Cluster
• Avatar Showcase
• BubbleUpButton
• Button