bluzky/salad_ui

SaladUI is a Phoenix LiveView component library that provides a comprehensive suite of accessible, interactive UI elements such as dialogs, menus, and charts. It integrates with Tailwind CSS v4 for styling and utilizes a custom JavaScript framework to manage client-side state, animations, and accessibility features. The system includes automated installation tasks and a Storybook environment to facilitate integration and testing within Phoenix applications.

11 changes.

This period focused on the creation and stabilization of the SaladUI component library for Phoenix LiveView, introducing a comprehensive suite of UI components and core integration helpers. The work involved upgrading dependencies to Phoenix LiveView 1.0 and Tailwind CSS v4, implementing shadcn-compatible theming, and establishing a robust test suite to ensure component reliability.

9 changes.

This period focused on building the SaladUI component library from the ground up, establishing a JavaScript framework with state machines and accessibility features for interactive UI elements. The work included integrating the library with Phoenix LiveView, upgrading the CSS infrastructure to Tailwind CSS v4, and creating automated installation tasks to facilitate adoption.

The application now includes a comprehensive set of CSS color themes (blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, and zinc) located in priv/static/assets/colors, each providing both light and dark mode variable definitions compatible with the shadcn UI system. Additionally, a new salad\_ui.css file introduces custom styling for scroll areas and an indeterminate progress animation, while a tailwind.colors.json file maps these CSS variables to Tailwind utility classes, enabling consistent theming across the interface.

priv · high confidence

This change introduces the SaladUI library, a collection of Phoenix LiveView UI components. The diff adds the initial implementations for the Accordion, AlertDialog, Breadcrumb, Chart, Collapsible, Command, HoverCard, Icon, Pagination, Popover, Progress, and RadioGroup components, along with the core LiveView integration helpers in SaladUI.LiveView and SaladUI.JS for handling server commands and client-side dispatching.

_lib/salad\ui · high confidence

A new entry point file has been added to the assets/salad\_ui directory, exporting the core Component class, a registration function, and the SaladUIHook. This establishes the public API surface for the SaladUI library, allowing consumers to import and register custom components via the central registry.

_assets/salad\ui · high confidence

This change adds the foundational JavaScript layer for SaladUI components, including a base Component class, a state machine for handling transitions and animations, and a registry/factory system for instantiating components. It introduces core utilities such as a collection manager for handling item selection and focus, a focus trap for modal dialogs, a click-outside monitor, a portal utility for DOM relocation, and a positioning engine for floating elements like popovers and tooltips. The framework also includes a Phoenix LiveView hook to bridge server and client states, ensuring components are correctly mounted, updated, and destroyed during DOM patches.

_assets/salad\ui/core · high confidence

The \assets/salad\_ui/components\ directory now contains a comprehensive set of new UI components (accordion, chart, collapsible, command, dialog, dropdown menu, hover card, menu, popover, radio group, select, slider, and switch) built on a new internal framework. This framework introduces a state-machine-driven architecture with explicit event mapping (mouse/keyboard), ARIA configuration, and collection management (registry, roving focus, selection) to handle complex interactions like nested items and keyboard navigation. The components also integrate with external libraries (Chart.js) and core utilities (FocusTrap, ClickOutsideMonitor, PositionedElement) to provide accessible, interactive UI elements.

_assets/salad\ui/components · high confidence

Added \mix salad.install\ and \mix salad.setup\ tasks to automate the integration of SaladUI into Phoenix applications. The \salad.setup\ task configures the development environment by adding TwMerge.Cache to the supervision tree, setting up CSS color schemes, patching Tailwind CSS configurations, and installing JavaScript hooks. The \salad.install\ task copies component source files and JavaScript assets into the project, allowing for customizable module prefixes and color schemes via command-line arguments.

lib/mix/tasks · high confidence

The \lib/salad\_ui.ex\ module has been initialized as the main entry point for the SaladUI library, replacing the previous minimal setup. It now provides extensive documentation and, crucially, automatically imports a wide range of UI components (such as Accordion, Alert, Button, Dialog, Form, and Chart) when the library is used. Additionally, it replaces the external \Tails\ dependency for CSS class merging with an internal implementation using \TwMerge\, ensuring the library is self-contained for styling utilities.

lib · high confidence

The storybook location now includes the foundational configuration files required to run the Salad UI component library in isolation. This includes a Dockerfile for containerized builds, Elixir formatter and gitignore rules, and a complete Tailwind CSS setup (including color palettes and configuration) to style the components. Additionally, JavaScript entry points are provided to load the Salad UI components and hooks into the Phoenix LiveView environment, enabling developers to view and test the UI components locally.

storybook · high confidence

The installation helpers now automatically patch CSS and JavaScript files to support Tailwind CSS v4 and the tw-animate.css library. The Tailwind patcher updates stylesheets by replacing legacy v3 imports with the new v4 import, injects a theme block for semantic color and radius tokens, and adds necessary directives (such as source paths and the dark mode variant) to ensure runtime-generated classes are detected. The JavaScript patcher modifies LiveSocket initialization to append new hooks and content after existing imports, ensuring client-side components integrate correctly. Additionally, a dedicated installer downloads the tw-animate.css file to the vendor directory to enable animation support.

lib/mix/tasks/helpers · high confidence

This release upgrades the library to version 1.0.0-beta.3 with significant breaking changes: the \tails\ dependency is replaced by \tw\_merge\ (extracted from \turboprop\), requiring users to add \TwMerge.Cache\ to their application's children list, and the \Collapsible\ component no longer uses a builder pattern. New features include a \Sidebar\ component, an \as\_child\ tag for merging multiple SaladUI tags, and a \dynamic\ tag for dynamic rendering. The release also updates the README with installation instructions for both library and local installation modes.

(repo-wide) · high confidence

The CSS build system has been upgraded to Tailwind CSS v4, replacing the previous configuration with a new \app.css\ and \storybook.css\ that utilize the modern \@import\ and \@plugin\ directives. This change introduces a new \tailwind.theme.css\ file that explicitly maps design tokens (such as colors, radii, and sidebar variables) to CSS custom properties, ensuring consistency with the shadcn component library. Additionally, the configuration now explicitly sources styles from the \config\, \lib\, and \salad\_ui\ directories, and includes the \tw-animate.css\ vendor library to support updated animation capabilities.

assets/css · high confidence

A new CSS file, tw-animate.css, has been added to the vendor assets to provide animation utilities compatible with Tailwind CSS v4. This file replaces the previous tailwindcss-animate approach by defining CSS @property variables and keyframes for enter/exit transitions (such as opacity, scale, and blur) and accordion animations, ensuring that dialog and component lifecycle animations function correctly under the new Tailwind version.

assets/vendor · high confidence

Added test support modules for component and Mix task testing; Added unit tests for JS and Tailwind CSS patchers; Added unit tests for SaladUI component library; Added unit tests for SaladUI components and core utilities; Removed placeholder test from SaladUI test suite.

The assets directory now includes configuration files for code quality and styling: an ESLint configuration (eslint.config.js) that sets up recommended rules and environment globals for both application and test files, a Prettier configuration (prettier.config.js) enforcing trailing commas, and a Tailwind color mapping file (tailwind.colors.json) that defines semantic color variables for UI components.

assets · high confidence

The application now uses Tailwind CSS v4 (version 4.3.0) for styling. The configuration defines two build targets: a default target that compiles \assets/css/app.css\ to \priv/static/assets/app.css\, and a storybook target that compiles \assets/css/storybook.css\ to \priv/static/assets/storybook.css\.

config · high confidence

The library has been upgraded to support Phoenix LiveView 1.0 (specifically \~\> 1.2) and Tailwind CSS v4, replacing the previous \tails\ dependency with \tw\_merge\. This change also bumps the project version to 1.0.0 and updates the Elixir requirement to \~\> 1.14. Additionally, the Storybook environment has been updated to use \phoenix\_storybook\ v1.3.0 and includes Chart.js for component visualization.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 60 → 58 (-1.8)
• Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 59 → 60 (+0.9)
• Architecture 99 → 99 (-0.8)
• Maturity 68 → 72 (+3.8)
• Readiness 51 → 66 (+15.2)
• Security 83 → 83 (-0.1)
• Accessibility 49 (new)

• Coverage not included — suite not readable by the collector
• Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
• Duplicated block (16 lines × 2) (lib/mix/tasks/salad.install.ex)
• Duplicated block (18 lines × 2) (storybook/storybook/salad_ui_component/badge.story.exs)
• Duplicated block (37 lines × 2) (storybook/storybook/salad_ui_component/hover_card.story.exs)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High IaC: DS-0029 (storybook/Dockerfile)
• High: security finding (details withheld)
• High: security finding (details withheld)
• Medium CVE: EEF-[CVE redacted] (storybook/mix.lock)
• Medium CVE: EEF-[CVE redacted] (storybook/mix.lock)
• Medium CVE: EEF-[CVE redacted] (storybook/mix.lock)
• Medium CVE: [GHSA redacted] (assets/package-lock.json)
• Medium IaC: CKV_DOCKER_2 (storybook/Dockerfile)
• No exposed public API
• …and 5 more

• ClassTooLong: ToastComponent (assets/salad_ui/components/toast.js)
• CollectionRegistry.getItem (cognitive 18) (assets/salad_ui/core/collection.js)
• Documentation: no installation or build instructions (docs/DOCUMENTATION_PLAN.md)
• Duplicated block (18 lines × 2) (lib/mix/tasks/salad.install.ex)
• Duplicated block (23 lines × 2) (storybook/storybook/salad_ui_component/badge.story.exs)
• Duplicated block (33 lines × 2) (lib/mix/tasks/salad.install.ex)
• Duplicated block (35 lines × 2) (lib/salad_ui/alert.ex)
• Duplicated block (53–61 lines × 2) (storybook/storybook/salad_ui_component/hover_card.story.exs)
• Duplicated block (8 lines × 2) (lib/salad_ui/dropdown_menu.ex)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High IaC: DS-0029 (storybook/Dockerfile)
• High IaC: DS-0029 (storybook/Dockerfile)
• High: security finding (details withheld)
• High: security finding (details withheld)
• …and 48 more

• 3 commits — 2 feature/other, 1 fixes

• (root) — 3 commits

• fix: fix: register component_lifecycle.md as doc extra, remove dead CLAUDE.md link
• change: Update README to remove beta release note
• change: release v1.0.0

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

bluzky/salad_ui was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.