A collection of Live View components inspired by shadcn

Demo | Documentation | Support project

🚧 V1 is now beta release

Demo storybook v1

Installation

1. Add salad_ui to your mix.exs

def deps do
  [
    {:salad_ui, "~> 1.0.0-beta.3"},
  ]
end

2. Choose your installation method:

Method 1: Quick Setup (Using as Library)

For a quick start with minimal configuration:

mix salad.setup

This sets up SaladUI to use components directly from the library. You can start using components immediately:

defmodule MyAppWeb.PageLive do
  use MyAppWeb, :live_view
  import SaladUI.Button
  import SaladUI.Dialog

  def render(_) do
    ~H"""
    <.button>Click me</.button>
    <.dialog id="my-dialog">
      <.dialog_content>
        <p>Hello world!</p>
      </.dialog_content>
    </.dialog>
    """
  end
end

Method 2: Local Installation (Customizable)

For full customization with local component files:

# Default installation
mix salad.install

# With custom prefix and color scheme
mix salad.install --prefix MyUI --color-scheme slate

This copies all component files to your project under lib/my_app_web/components/ui/ where you can customize them:

defmodule MyAppWeb.PageLive do
  use MyAppWeb, :live_view
  import MyAppWeb.Components.UI.Button
  import MyAppWeb.Components.UI.Dialog

  def render(_) do
    ~H"""
    <.button>Click me</.button>
    <.dialog id="my-dialog">
      <.dialog_content>
        <p>Hello world!</p>
      </.dialog_content>
    </.dialog>
    """
  end
end

What Each Method Does

mix salad.setup

• ✅ Sets up Tailwind CSS and color schemes
• ✅ Configures JavaScript hooks and components
• ✅ Ready to use immediately
• ❌ Components cannot be customized
• ❌ Uses external package dependencies

mix salad.install

• ✅ Sets up Tailwind CSS and color schemes
• ✅ Copies all component source code locally
• ✅ Copies all JavaScript files locally
• ✅ Full customization possible
• ✅ No external runtime dependencies
• ✅ Custom module prefixes

More configuration

1. Custom error translate function

config :salad_ui, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}

🛠️ Development

Here is how to start develop SaladUI on local machine.

1. Clone this repo
2. Go into storybook folder
3. Start storybook

cd storybook
mix phx.server

Unit Testing

All v1 component are not covered by UnitTest. Currently I'm working on an important project so I don't have much time for this. If you're interested in this project, please help to add Unit Test if possible. 🙏

List of components

Component	v0	v1
Accordion	✅	✅
Alert	✅	✅
Alert Dialog	✅	✅
Avatar	✅	✅
Badge	✅	✅
Breadcrumb	✅	✅
Button	✅	✅
Card	✅	✅
Carousel	❌
Checkbox	✅	✅
Collapsible	✅	✅
Combobox	❌
Command	❌	✅ @ilyabayel
Context Menu	❌
Dialog	✅	✅
Drawer	❌
Dropdown Menu	✅	✅
Form	✅	✅
Hover Card	✅	✅
Input	✅	✅
Input OTP	❌
Label	✅	✅
Pagination	✅	✅
Popover	✅	✅
Progress	✅	✅
Radio Group	✅	✅
Scroll Area	✅	✅
Select	✅	✅
Separator	✅	✅
Sheet	✅	✅
Skeleton	✅	✅
Slider	✅	✅
Switch	✅	✅
Table	✅	✅
Tabs	✅	✅
Textarea	✅	✅
Tooltip	✅	✅

🌟 Contributors

😘 Credits

This project could not be available without these awesome works:

• tailwind css an awesome css utility project
• turboprop I borrow code from here for merging tailwinds classes
• shadcn/ui which this project is inspired from
• Phoenix Framework of course