Modules
SlopUI is a semantic, themeable, accessible component library for Phoenix LiveView built on modern vanilla CSS.
Accordion on native <details> elements. Works without JavaScript; the hook only adds arrow-key movement between headers.
Inline alerts.
Avatars and avatar groups.
Badges and status pills.
Buttons and button groups.
Cards.
A scroll-snap carousel with buttons, dots and optional autoplay.
Command palette.
Date, date-range and time pickers, plus an inline calendar.
Modal dialogs on the native <dialog> element.
Small building blocks: skeleton, progress, spinner, kbd, separator, breadcrumbs, pagination.
Form fields with labels, descriptions and errors wired together with the
correct id/for/aria-describedby/aria-invalid relationships.
Hover cards: rich previews that open when a trigger is hovered or focused.
Specialised inputs: slider, number, pin, tag, rating, password and color.
Layout primitives: composition, not utilities. A stack spaces children vertically, a cluster groups them horizontally with wrapping, a grid auto-fits columns.
Markdown rendering with MDEx. MDEx is an
optional dependency: add {:mdex, "~> 0.13"} to use this component.
A Markdown editor in the GitHub style: a textarea with a formatting toolbar, keyboard shortcuts, list continuation, a Write/Preview switch, and image upload by paste, drop or button through LiveView uploads.
Dropdown menus built on the popover API and anchor positioning.
Anchored popovers with arbitrary content.
A scroll container with thin styled scrollbars and optional edge shadows.
Custom select (select-only combobox) and editable combobox with autocomplete.
Application shell: sidebar, topbar, navigation, auth layout, indicator.
Two panes with a draggable, keyboard-operable divider.
Page structure: page header, empty state, description list.
Data tables.
Tabs following the WAI-ARIA tabs pattern.
Light/dark/system theme support.
Toast notifications, including LiveView flash integration.
Tooltips.
Tree views (WAI-ARIA tree pattern) for file browsers, navigation and hierarchies.
File upload dropzone and entry list for LiveView uploads.
The library's own Gettext backend. It holds the slop_ui domain template
(priv/gettext/slop_ui.pot) and English defaults.
The small set of icons the library's own chrome uses (close buttons,
chevrons, status glyphs, the editor toolbar). They are
Phosphor Icons in the regular weight, vendored
here so the library carries no icon dependency (MIT, see priv/phosphor/LICENSE).
Compile-time icon sets.
Phoenix.LiveView.JS helpers for driving SlopUI components from the client
without a server round trip.
Kitchen-sink page helpers.
The kitchen sink's own icon sets, showing use SlopUI.Icons.
Renders API reference tables for components straight from their
Phoenix.Component metadata (attr/slot declarations) and @doc strings,
so the kitchen sink can never drift from the code.
Full-page templates rendered without the kitchen sink chrome.
The shared shell used by the app-style templates.
Mix Tasks
Boots the kitchen sink on a random port, drives headless Chrome through the
DevTools protocol, and measures every token pairing for each palette in
light and dark, with and without data-contrast="more".
Boots the kitchen sink on a random port and drives headless Chrome through
the DevTools protocol, running the scenarios in dev/smoke/tests/*.mjs.
Each scenario opens a sink page, performs real clicks and key presses, and
asserts on the resulting DOM, so every hook's behaviour (open/close, arrow
keys, focus management, value changes) is checked end to end.