Skua — headless-first, token-driven UI components for Phoenix LiveView.
Behavior is built on browser-native primitives (the Popover API, the top
layer, native <dialog>) and ships as one first-party hooks bundle — zero
third-party JavaScript. Every overlay (select, menu, dialog, drawer, date
picker, tooltip) renders in the top layer and is viewport-aware. Styling is
100% CSS tokens, so the whole app re-skins from one place.
Early release
0.1.x — the component set is broad and browser-tested, but APIs may still
shift. See PLAN.md for the roadmap and usage-rules.md for the styling
rules (also great context for AI agents working in a Skua app).
Usage
# lib/my_app_web.ex (added by `mix skua.install`)
use Skua
# assets/js/app.js
import { hooks as skuaHooks } from "skua"
const liveSocket = new LiveSocket("/live", Socket, {
hooks: { ...skuaHooks, ...appHooks }
})Theme by overriding the --skua-* tokens in your app.css :root — see
assets/css/skua.css.