The native <dialog> element is more capable than you think.
It’s not a new element, but it’s often overlooked in favor of custom modal components.
Yet it handles a lot out of the box:
- Built-in open/close API (.showModal() and method=“dialog”)
- Automatically traps focus for accessibility
- Keyboard support (like closing on Escape)
- Native backdrop with the ::backdrop pseudo-element
- Easily stylable with modern CSS
- Supports transitions with @starting-style and transition-behavior: allow-discrete
If you’ve been building modal systems from scratch, the native dialog might deserve a second look.
It’s simple, accessible, and works with the tools you already use.
Have you used <dialog> in production?
Here’s the codepen: https://codepen.io/theosoti/pen/WbvJXvZ
To learn more tips about CSS, make sure to join my newsletter below ❤️