https://github.com/bluzky/salad_ui
Phoenix Liveview component library inspired by shadcn UI
https://github.com/bluzky/salad_ui
elixir liveview phoenix phoenix-liveview tailwindcss
Last synced: 8 days ago
JSON representation
Phoenix Liveview component library inspired by shadcn UI
- Host: GitHub
- URL: https://github.com/bluzky/salad_ui
- Owner: bluzky
- License: mit
- Created: 2024-05-25T04:51:21.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-04-12T14:32:22.000Z (8 days ago)
- Last Synced: 2025-04-12T15:32:21.931Z (8 days ago)
- Topics: elixir, liveview, phoenix, phoenix-liveview, tailwindcss
- Language: Elixir
- Homepage: https://salad-storybook.fly.dev/welcome
- Size: 564 KB
- Stars: 826
- Watchers: 12
- Forks: 55
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - Phoenix Liveview - Phoenix Liveview port of shadcn/ui (Ports / Portfolios)
- awesome-shadcn-ui - Phoenix Liveview - Phoenix Liveview port of shadcn/ui (Ports / Portfolios)
- awesome-shadcn-ui - Link - 06-07 | (Ports)
README
A collection of Live View components inspired by shadcn
## 🚧 V1 is under development, for V0 source code, checkout branch v0
## [Demo storybook v0](https://salad-storybook.fly.dev/)
## Installation
1. Add `salad_ui` to your `mix.exs`
```elixir
def deps do
[
{:salad_ui, "~> 0.14"},
]
end
```
2. Add `TwMerge.Cache` to `application.ex`
```elixir
children = [
...,
TwMerge.Cache
]
```
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
```elixir
defmodule MyModule do
# import any component you need
import SaladUI.Button
def render(_) do
~H"""
<.button>Click me
"""
end
end
```
## 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. 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
| Component | v0 | v1 |
|----------------|------|------|
| Accordion | ✅ | ✅ |
| Alert | ✅ | ✅ |
| Alert Dialog | ✅ | |
| Avatar | ✅ | ✅ |
| Badge | ✅ | ✅ |
| Breadcrumb | ✅ | ✅ |
| Button | ✅ | ✅ |
| Card | ✅ | ✅ |
| Carousel | ❌ | |
| 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 | ✅ | |
| 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