mix salad.setup (SaladUI v1.0.0)

Copy Markdown View Source

Set up SaladUI in a Phoenix LiveView project.

This task configures the complete SaladUI development environment by:

  • Adding TwMerge.Cache to the application supervision tree
  • Configuring CSS color scheme variables (default: gray)
  • Copying SaladUI CSS files to assets/css/
  • Patching Tailwind CSS entrypoint with SaladUI-specific settings
  • Installing tw-animate-css utilities
  • Setting up JavaScript imports and LiveView hooks

Usage

mix salad.setup
mix salad.setup --color-scheme slate
mix salad.setup -c blue

Options

  • --color-scheme (or -c) - Color scheme to use (default: "gray") Available schemes: gray, slate, stone, neutral, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

What it does

  1. TwMerge Integration - Adds TwMerge.Cache as a supervised process for CSS class merging functionality

  2. CSS Setup

    • Copies salad_ui.css to assets/css/
    • Adds color scheme variables to app.css
    • Imports SaladUI styles into the main CSS file

  3. Tailwind Configuration

    • Patches app.css with SaladUI-specific sources and theme tokens
    • Copies tailwind.colors.json with design tokens for compatibility
    • Adds @tailwindcss/typography and tw-animate-css utilities

  4. JavaScript Setup

    • Downloads tw-animate-css
    • Patches app.js to import SaladUI components and hooks
    • Registers SaladUIHook with LiveView

After running this task

You can immediately start using SaladUI components in your templates:

<.button>Click me</.button>
<.dialog id="my-dialog">
  <.dialog_content>
    <p>Hello world!</p>
  </.dialog_content>
</.dialog>

Files modified

  • lib/[app]/application.ex - Adds TwMerge.Cache
  • assets/css/app.css - Adds color scheme and imports
  • assets/css/salad_ui.css - Created
  • assets/css/app.css - Updated with Tailwind v4 sources, plugins, and theme tokens
  • assets/tailwind.colors.json - Created for compatibility
  • assets/js/app.js - Adds SaladUI imports and hooks
  • assets/vendor/tw-animate.css - Downloaded

Example

# Use default gray color scheme
mix salad.setup

# Use slate color scheme
mix salad.setup --color-scheme slate

# Short form
mix salad.setup -c blue