Introduction

A collection of beautiful, accessible components built entirely with Phoenix LiveView.

What is Sutra UI?

Sutra UI is a component library for Phoenix LiveView applications. Unlike traditional component libraries that rely on JavaScript frameworks, Sutra UI is built entirely with Phoenix LiveView and Elixir, using runtime colocated hooks for any client-side interactivity.

Every component is designed to be accessible out of the box, following WAI-ARIA patterns and supporting full keyboard navigation. The styling is built on Tailwind CSS v4 with CSS variables, making it easy to customize themes.

Key Features

  • Zero JavaScript Dependencies - All interactivity is powered by Phoenix LiveView's runtime colocated hooks. No npm packages required.
  • 100% Accessible - WCAG 2.1 AA compliant with full keyboard navigation, screen reader support, and proper ARIA attributes.
  • Dark Mode Built-in - Every component supports light and dark modes using CSS variables.
  • Phoenix 1.8+ Ready - Built for modern Phoenix with LiveView 1.1+ and Tailwind CSS v4.
  • Customizable - Override styles with Tailwind classes or customize the CSS variables to match your brand.

Runtime Colocated Hooks

Sutra UI uses Phoenix LiveView's runtime colocated hooks feature (introduced in Phoenix 1.8). This means JavaScript hooks are defined alongside their HEEx templates using a special script tag syntax: 

<div id="my-component" phx-hook=".MyHook">
<!-- Component content -->
</div>

<script :type={Phoenix.LiveView.ColocatedHook} name=".MyHook">
export default {
mounted() {
  // Hook logic here
}
}
</script>

Note the .MyHook naming convention with the dot prefix. This is required for colocated hooks. The hooks are automatically extracted and bundled with your application's JavaScript.

Philosophy

Sutra UI follows a "CSS-first" approach to theming. Instead of JavaScript-based theme providers, components use CSS custom properties (variables) that can be changed at the document level. This means themes work without any JavaScript and can be changed instantly.

Components are designed to be composable. Complex UIs are built by combining simple, focused components rather than using monolithic "kitchen sink" components with dozens of props.

Getting Started

Ready to start using Sutra UI? Head over to the Installation Guide to add it to your Phoenix project.