Build Better, Ship Faster
Built on standard Custom-Elements. Use the same component in React today, Vue tomorrow, vanilla next week. A single dependency.
Why Atrium?
🔧 Framework Agnostic
Built on Custom-Elements, not adapters. Use the same component in React today, vanilla tomorrow. Works everywhere.♿ Accessible by Default
WAI-ARIA patterns, keyboard navigation, focus management — baked in, not optional. Accessibility isn't an afterthought.🧩 Compose into anything
Components are composed from highly reusable custom-elements.<a-popover-trigger>
<!-- Use any component as a trigger -->
<button type="button" slot="trigger">
{{ label }}
</button>
<a-popover class="group">
<!-- Put anything in the popover -->
<div>
Lorem Ipsum
</div>
</a-popover>
</a-popover-trigger>Get Started in Seconds
Install the elements package and copy your first component:
$
bun add @sv/elements
$
npx @sv/components button
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.