## Installation
1. Add `salad_ui` to your `mix.exs`
```elixir
def deps do
[
{:salad_ui, "~> 1.0.0-beta.1"},
]
end
```
2. Choose your installation method:
### Method 1: Quick Setup (Using as Library)
For a quick start with minimal configuration:
```bash
mix salad.setup
```
This sets up SaladUI to use components directly from the library. You can start using components immediately:
```elixir
defmodule MyAppWeb.PageLive do
use MyAppWeb, :live_view
import SaladUI.Button
import SaladUI.Dialog
def render(_) do
~H"""
<.button>Click me
<.dialog id="my-dialog">
<.dialog_content>
Hello world!
""" end end ``` ### Method 2: Local Installation (Customizable) For full customization with local component files: ```bash # 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: ```elixir 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 <.dialog id="my-dialog"> <.dialog_content>Hello world!
""" 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 ```elixir 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](https://github.com/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