SutraUI (Sutra UI v0.3.0)

Sutra UI - We define the rules, so you don't have to.

A pure Phoenix LiveView UI component library with 44 accessible components, CSS-first theming, and colocated JavaScript hooks. Built for Phoenix 1.8+ and Tailwind CSS v4.

Quick Start

# mix.exs
{:sutra_ui, "~> 0.3.0"}

# lib/my_app_web.ex
defp html_helpers do
  quote do
    use SutraUI
  end
end

# assets/css/app.css
@import "tailwindcss";
@source "../../deps/sutra_ui/lib";
@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

See the Installation Guide for detailed setup instructions.

Requirements

Dependency	Version	Notes
Elixir	1.14+
Phoenix	1.8+	Required for colocated hooks
Phoenix LiveView	1.1+	`ColocatedHook` support
Tailwind CSS	v4	CSS-first configuration

Why Phoenix 1.8+?

Sutra UI uses colocated hooks - JavaScript hooks defined alongside components. No separate hooks.js file needed.

Components by Category

Foundation

Basic building blocks for any interface.

Component	Description
`SutraUI.Button`	Buttons with 6 variants and 4 sizes
`SutraUI.Badge`	Status indicators
`SutraUI.Spinner`	Loading indicators
`SutraUI.Kbd`	Keyboard shortcut display

Form Controls

Complete form toolkit with validation support.

Component	Description
`SutraUI.Input`	Text, email, password, number, date inputs
`SutraUI.Textarea`	Multi-line text input
`SutraUI.Checkbox`	Checkbox input
`SutraUI.Switch`	Toggle switch
`SutraUI.RadioGroup`	Radio button groups
`SutraUI.Select`	Searchable dropdown (hook)
`SutraUI.Slider`	Range slider (hook)
`SutraUI.RangeSlider`	Dual-handle range (hook)
`SutraUI.LiveSelect`	Async searchable select (hook)
`SutraUI.Label`	Form labels
`SutraUI.SimpleForm`	Form with auto-styling
`SutraUI.InputGroup`	Input with prefix/suffix
`SutraUI.FilterBar`	Filter controls layout

Layout

Structure and organize content.

Component	Description
`SutraUI.Card`	Content container
`SutraUI.Header`	Page headers
`SutraUI.Table`	Data tables
`SutraUI.Item`	List items
`SutraUI.Drawer`	Navigation drawer (hook)

Feedback

Communicate status and progress.

Component	Description
`SutraUI.Alert`	Alert messages
`SutraUI.Toast`	Toast notifications (hook)
`SutraUI.Progress`	Progress bars
`SutraUI.Skeleton`	Loading placeholders
`SutraUI.Empty`	Empty states
`SutraUI.LoadingState`	Loading indicators

Overlay

Layered UI elements.

Component	Description
`SutraUI.Dialog`	Modal dialogs (hook)
`SutraUI.Popover`	Click-triggered popups (hook)
`SutraUI.Tooltip`	Hover tooltips (CSS-only)
`SutraUI.DropdownMenu`	Dropdown menus (hook)
`SutraUI.Command`	Command palette (hook)

Navigation

Help users move through your app.

Component	Description
`SutraUI.Tabs`	Tab panels (hook)
`SutraUI.Accordion`	Collapsible sections (hook)
`SutraUI.Breadcrumb`	Breadcrumb trails
`SutraUI.Pagination`	Page navigation
`SutraUI.NavPills`	Pill navigation
`SutraUI.TabNav`	Tab-style navigation

Display

Present content and media.

Component	Description
`SutraUI.Avatar`	User avatars
`SutraUI.Carousel`	Image carousels (hook)
`SutraUI.ThemeSwitcher`	Light/dark toggle (hook)

Theming

Sutra UI uses CSS variables compatible with shadcn/ui themes.

:root {
  --primary: oklch(0.65 0.20 260);
  --primary-foreground: oklch(0.98 0 0);
}

See the Theming Guide for complete customization options.

Accessibility

All components follow WAI-ARIA patterns with:

Semantic HTML elements
Keyboard navigation
Focus management
Screen reader support

See the Accessibility Guide for details.

Guides

Installation - Setup and configuration
Theming - Customize colors and styles
Accessibility - ARIA and keyboard support
JavaScript Hooks - Colocated hook patterns

Quick Reference

Components Cheatsheet - All components at a glance
Forms Cheatsheet - Form patterns and validation

Summary

Functions

__using__(opts)

Use Sutra UI in your Phoenix application.

Functions

using(opts)

(macro)

Use Sutra UI in your Phoenix application.

This macro imports all available Sutra UI components for use in your templates.

Example

defmodule MyAppWeb do
  def html_helpers do
    quote do
      use SutraUI
    end
  end
end