Phoenix LiveView Components
Build beautiful interfaces with pure Phoenix
A carefully crafted collection of accessible, themeable components. No JavaScript dependencies. Add the library, import the CSS, and make it yours.
New in v0.4.0
More primitives for real product interfaces
Build richer LiveView workflows with new primitives for AI output, multi-step forms, calendars, timelines, menus, uploads, and structured data.
Zero Dependencies
Pure LiveView with colocated hooks. No npm packages, no bundler headaches.
Fully Accessible
Semantic markup, keyboard behavior, and screen reader support where components need it.
Themeable
CSS variables for complete control. Light and dark modes out of the box.
Own Your Code
Phoenix-native components with CSS-first styling and colocated hooks.
Quick Start
Add to your Phoenix project
One dependency. Run the installer. Start building. The installer wires up CSS and imports so you can start with real components immediately.
Read the full guidedefp deps do
[
{:sutra_ui, "~> 0.4.0"}
]
end
Components
Production-ready UI
Every component is designed for real applications. Accessible, composable, and beautifully crafted.
Manage account details.
Configure settings.
Notifications
You have 3 unread messages.
Confirm your action
This action cannot be undone. Are you sure you want to continue?
Ready to build something beautiful?
Get started with Sutra UI in minutes. Browse the documentation, explore components, and start building.