View Source README
A collection of Live View components inspired by shadcn
Demo storybook

Installation
- Add
salad_ui
to yourmix.exs
children = [ ..., TwMerge.Cache ]def deps do [ {:salad_ui, "~> 0.14.0"}, ] end 2. Add `TwMerge.Cache` to `application.ex`
3. Setup `salad_ui`
3.1 **Using `salad_ui` as part of your project:**
> This way you can install only components that you want to use or you want to edit SaladUI's component source code to fit your need.
> If you just want to use SaladUI's components, see **Using as library** below.
- Init Salad UI in your project
#> cd your_project #> mix salad.init
install some components
#> mix salad.add label button
3.2 **Using `salad_ui` as a library:**
- Init Salad UI in your project with option `--as-lib`
#> cd your_project #> mix salad.init --as-lib
- Using in your project
defmodule MyModule do
# import any component you need
import SaladUI.Button
def render(_) do
~H"""
<.button>Click me</.button>
"""
end
end
## 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. Clone `https://github.com/bluzky/salad_storybook` in the same directory with **Salad UI**
3. Start storybook
cd salad_storybook mix phx.server
## Unit Testing
In your project folder make sure the dependencies are installed by running `mix deps.get`, then once completed you can run:
- `mix test` to run tests once or,
- `mix test.watch` to watch file and run tests on file changes.
To run the failing tests only, just run `mix test.watch --stale`.
It's also important to note that you must format your code with `mix format` before sending a pull request, otherwise the build in github will fail.
## List of components
- ✅ Accordion
- ✅ Alert
- ✅ Alert Dialog
- ✅ Avatar
- ✅ Badge
- ✅ Breadcrumb
- ✅ Button
- ✅ Card
- [ ] Carousel
- ✅ Chart
- ✅ Checkbox
- ✅ Collapsible
- [ ] Combobox
- [ ] Command
- [ ] Context Menu
- ✅ Dialog
- [ ] Drawer
- ✅ Dropdown Menu
- ✅ Form
- ✅ Hover Card
- ✅ Input
- [ ] Input OTP
- ✅ Label
- ✅ Pagination
- ✅ Popover
- ✅ Progress
- ✅ Radio Group
- ✅ Scroll Area
- ✅ Select
- ✅ Separator
- ✅ Sheet
- ✅ Sidebar
- ✅ Skeleton
- ✅ Slider
- ✅ Switch
- ✅ Table
- ✅ Tabs
- ✅ Textarea
- ✅ Tooltip
- ✅ Toggle
- ✅ Toggle Group
## 🌟 Contributors
<p align="center">
<a href="https://github.com/bluzky/salad_ui/graphs/contributors">
<img src="https://contrib.rocks/image?repo=bluzky/salad_ui&max=300&columns=14" width="600"/></a>
</p>
## 😘 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