Phoenix LiveView Components

Build beautiful interfaces with pure Phoenix

A carefully crafted collection of accessible, themeable components. No JavaScript dependencies. Just copy, paste, and make it yours.

Pure LiveView with colocated hooks. No npm packages, no bundler headaches.

WCAG 2.1 AA compliant. Keyboard navigation and screen readers built in.

CSS variables for complete control. Light and dark modes out of the box.

Copy components into your project. No runtime dependency, just source code.

Quick Start

Add to your Phoenix project

One dependency. Run the installer. Start building. Components are copied to your project so you own every line.

    mix.exs
  

    defp deps do
  [
    {:sutra_ui, "~> 0.1"}
  ]
end
  

Components

Every component is designed for real applications. Accessible, composable, and beautifully crafted.

Default Secondary Success Error

Email address

Manage your account details and preferences.

Notifications

You have 3 unread messages

Configure how you receive notifications.

Get started with Sutra UI in minutes. Browse the documentation, explore components, and start building.