Build Better
Ship Faster
Built on standard Custom-Elements. Use the same component in React today, Vue tomorrow, vanilla next week. A single dependency.
New in Atrium
Components that hold up when the layout gets messy.
A curated mix of dialogs, lightboxes, tabs, pagers and transitions built for production interfaces. Each component is designed to stay compact, accessible and easy to copy into real projects.
Small pieces. More possibilities.
Why Atrium?
A foundation for your interface. The freedom to make it yours.
01 / Works everywhere
Bring your framework.
Built on standard Custom Elements. Use the same component in React today, Vue tomorrow, or plain HTML whenever you like.
02 / Accessible by default
Thoughtful from the start.
WAI-ARIA patterns, keyboard navigation, and focus management are built into the elements, right from the start.
03 / Made to fit together
Small elements.
Endless combinations.
Reusable elements handle the behavior. Bring your own markup and styles to turn them into something that feels like you.
Explore the elementspopover.htmlHTML
<a-popover-trigger>
<button slot="trigger" type="button">
Open menu
</button>
<a-popover>
<p>Make yourself at home.</p>
</a-popover>
</a-popover-trigger>Get Started in Seconds
Install the elements package and copy your first component:
$
bun add @atrium-ui/elements
Go deeper
Components
Pre-styled templates built with TailwindCSS. Copy them into your project, customize everything, ship immediately.
Elements
Headless Custom-Elements that handle behavior and accessibility. Style them however you want.