Essence UI - Accessible, headless UI component library for Phoenix LiveView

ilyabayel

Hi everyone!

I’d like to introduce Essence UI, a component library for Phoenix LiveView heavily inspired by Radix UI and built around a simple idea:

Your component library should handle accessibility, behavior, and layout without deciding what your application should look like.

Essence UI provides a growing collection of common UI patterns as unstyled, customizable components. Each component includes the structure, interaction logic, state management, and accessibility needed to work properly in a LiveView application.

You add the styles and turn those building blocks into a component library that follows your own design language.

Bring your own design system

Many component libraries give you finished components, but also bring their own visual identity. Essence UI takes a different approach. It’s primitives give you the difficult parts:

Accessible markup and keyboard interactions
Component state and behavior
Predictable composition
LiveView-specific logic
Reusable layout and structure
Consistent component APIs

The visual layer remains yours. You can customize the primitives with your own CSS, tokens, spacing, typography, colors, and animations to create components that feel native to your product.

Prefer ready-made components?

You don’t have to build everything from scratch. Essence UI also includes pre-styled components built on top of the same primitives. You can use them directly, customize their appearance, or treat them as examples for building your own design system.

This gives you two ways to work:

Use the unstyled primitives when you want complete control over your design.
Use the pre-styled components when you want polished UI without writing all the styles yourself.

You can also mix both approaches within the same application.

Why Essence UI?

After building several LiveView applications, I wanted a component system that offered the flexibility of headless UI libraries while remaining native to Phoenix and LiveView.

The goal of this library is to give you the ability to create unique user interfaces with minimal effort.

Project goals

Accessible components by default
Unstyled primitives with complete layout and interaction logic
Give users full control over visual design for Primitives
Pre-styled components for faster development with Themes
APIs designed specifically for Phoenix LiveView
Minimal dependencies—no Alpine.js, Tailwind, or similar frameworks required
Pure CSS for themed components
A consistent foundation for custom design systems

LiveView-only support

Essence UI currently supports LiveView pages only.

Traditional Phoenix pages rendered through controllers—sometimes referred to as dead views—are not supported at the moment. Some components rely on LiveView-specific lifecycle, state, and interaction features, so they should not be expected to work outside LiveView.

For now, I want to keep the project focused on providing the best possible LiveView experience. If there is enough interest in dead view support, I will consider adding it in the future.

Current status

Essence UI is still under active development, but it has reached the point where I’d like to share it with the community and gather feedback before expanding the component set.

I’d especially appreciate feedback on: