Essence UI

Accessible, themeable Phoenix LiveView components inspired by Radix UI.

Installation

Add to your mix.exs dependencies and run mix deps.get:

{:essence_ui, "~> 0.2.0"}

CSS (Themes)

Import the prebuilt stylesheet from your app CSS entrypoint (path relative to that file):

@import "../deps/essence_ui/priv/static/essence-ui.css";

JavaScript hooks

Interactive primitives and themed overlays need LiveView hooks. Import them into your app.js:

import { hooks as essenceHooks } from "../deps/essence_ui/assets/js/essence_ui"



const liveSocket = new LiveSocket("/live", Socket, {

  hooks: { ...essenceHooks },

  params: { _csrf_token: csrfToken },

})

Usage

import EssenceUI.Components

<.theme accent_color="indigo" gray_color="slate" radius="medium">

  <.flex gap="3" align="center">

    <.text size="3">Hello from Essence UI</.text>

    <.button>Get started</.button>

  </.flex>

</.theme>

Headless primitives live under EssenceUI.Primitives.*.

Docs site (this repo)

The documentation site and CRM demo live in the website/ directory as a separate Mix app (:essence_ui_web) that depends on this library via {:essence_ui, path: ".."}.

# library (root)

mix setup

mix test



# docs site

cd website

mix setup

mix phx.server

Visit localhost:4000.

E2E (Playwright) from website/assets/:

cd website

npm --prefix assets ci

npx --prefix assets playwright install chromium

npm --prefix assets run test:e2e

Publishing to Hex

Package metadata lives in mix.exs (package/0, description/0, docs/0). Before publishing:

mix hex.build          # preview tarball contents

mix docs               # build ExDoc locally

mix hex.publish        # requires a Hex user (`mix hex.user register`)

Learn more