View Source SaladUI

An attemp to bring shadcn ui components to Phoenix Liveview.

Demo at https://salad-storybook.fly.dev

Installation

1. Using salad_ui as part of your project:

• Adding salad_ui to your list of dependencies in mix.exs:

def deps do
  [
    {:salad_ui, "~> 0.12.0", only: [:dev]},
    {:tails, "~> 0.1"}
  ]
end

• Init Salad UI in your project

  #> cd your_project
  #> mix salad.init
  
  # install some components
  #> mix salad.add label button

2. Using salad_ui as a library:

• Adding salad_ui to your list of dependencies in mix.exs:

def deps do
  [
    {:salad_ui, "~> 0.12.0", only: [:dev]}
  ]
end

• Init Salad UI in your project with option --as-lib

  #> cd your_project
  #> mix salad.init --as-lib

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 SaladUI
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
• ✅ Skeleton
• ✅ Slider
• ✅ Switch
• ✅ Table
• ✅ Tabs
• ✅ Textarea
• ✅ Tooltip
• ✅ Toggle
• ✅ Toggle Group

Credits

This project could not be available without these awesome works:

• tailwind css an awesome css utility project
• tails for merging tailwind class
• shadcn/ui which this project is inspired from
• Phoenix Framework of course