SlopUI (SlopUI v0.1.0)

SlopUI is a semantic, themeable, accessible component library for Phoenix LiveView built on modern vanilla CSS.

Setup

Add the dependency, then in your *_web.ex html_helpers:

import MyAppWeb.CoreComponents, except: [button: 1, input: 1, table: 1]
use SlopUI

Exclude any other overlapping CoreComponents functions in older apps. See the README for CSS bundler configuration and existing hook integration.

Import the CSS into your app.css (esbuild resolves slop_ui via NODE_PATH=deps, which new Phoenix apps configure by default):

@import "slop_ui/css";

import { hooks as slopHooks } from "slop_ui"
const liveSocket = new LiveSocket("/live", Socket, { hooks: { ...slopHooks } })

And render the theme boot script in your root layout <head> so the persisted theme applies before first paint:

<.theme_script />

Every class is prefixed sl- and names the thing (sl-button, sl-card-title). Variants and sizes are data-* attributes; states are ARIA attributes or native pseudo-classes, never extra classes.
All styles live under the sl cascade layer, so your own unlayered CSS always wins.
Theming is a matter of overriding custom properties. See tokens.css.

Translates a changeset error tuple into a string.

Translates a LiveView upload error atom into a string. Configure your own translator with config :slop_ui, translate_upload_error: {Mod, :fun}.

@spec translate_error({String.t(), keyword()}) :: String.t()

Translates a changeset error tuple into a string.

Configure your own translator (for example, Gettext) with:

config :slop_ui, translate_error: {MyAppWeb.CoreComponents, :translate_error}

@spec translate_upload_error(atom()) :: String.t()

Translates a LiveView upload error atom into a string. Configure your own translator with config :slop_ui, translate_upload_error: {Mod, :fun}.