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. 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.

  • 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
  1. 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
  • 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:

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

🌟 Contributors

😘 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