- Docs
- components
- Modal
Modal
A modal is an overlay element which blocks interaction with elements outside it.
The HTML <dialog> element can be used to build modals. However, it is not yet widely supported across browsers, and building fully accessible custom dialogs from scratch is very difficult and error prone. Modal helps achieve accessible modals that can be styled as needed.
Preview
Code
Installation
CLI
Copy & Paste
NPM
PNPM
Bun
Yarn
npx shadcn@latest add https://jbackchanel.com/default/dialogExamples
Basic
Preview
Code
Interactions
Dismissable
Preview
Code
Keyboard Dismiss Disabled
Preview
Code
Sheet
Preview
Code