View Source README

A collection of Live View components inspired by shadcn

Demo | Documentation | Support project

Tests Module Version Hex Docs Total Download Last Updated

Demo storybook

Buy Me a Coffee at ko-fi.com

Installation

  1. Add salad_ui to your mix.exs
    def deps do
    [
     {:salad_ui, "~> 0.14"},
    ]
    end
    
    
    2. Add `TwMerge.Cache` to `application.ex`
    
    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

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