SaladUI

This library is my attemp to port shadcn ui to Phoenix Liveview Component.

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

In Construction: Salad UI is in its early stages. Expect breaking changes in minor releases until 1.0 is ready! 🚀

Installation

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

def deps do
  [
    {:salad_ui, "~> 0.4.2"}
  ]
end

2. Add custom color

   • Goto https://ui.shadcn.com/themes.
   • Choose a color → Copy code → Paste to your app.css file
   • Create new file tailwind.colors.json in your assets directory and paste following content

     {
     "accent": {
     "DEFAULT": "hsl(var(--accent))",
     "foreground": "hsl(var(--accent-foreground))"
     },
     "background": "hsl(var(--background))",
     "border": "hsl(var(--border))",
     "card": {
     "DEFAULT": "hsl(var(--card))",
     "foreground": "hsl(var(--card-foreground))"
     },
     "destructive": {
     "DEFAULT": "hsl(var(--destructive))",
     "foreground": "hsl(var(--destructive-foreground))"
     },
     "foreground": "hsl(var(--foreground))",
     "input": "hsl(var(--input))",
     "muted": {
     "DEFAULT": "hsl(var(--muted))",
     "foreground": "hsl(var(--muted-foreground))"
     },
     "popover": {
     "DEFAULT": "hsl(var(--popover))",
     "foreground": "hsl(var(--popover-foreground))"
     },
     "primary": {
     "DEFAULT": "hsl(var(--primary))",
     "foreground": "hsl(var(--primary-foreground))"
     },
     "ring": "hsl(var(--ring))",
     "secondary": {
     "DEFAULT": "hsl(var(--secondary))",
     "foreground": "hsl(var(--secondary-foreground))"
     }
     }

3. Configure tailwind

   • Tell tailwind to extract class from SaladUI
   • Add custom color
   • Add tailwind plugin

     module.exports = {
     content: [
     "../deps/salad_ui/lib/**/*.ex",
     ],
     theme: {
     extend: {
     colors: require("./tailwind.colors.json"),
     },
     },
     plugins: [
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("tailwindcss-animate"),
     ...
     ]
     }

• Install tailwindcss-animate

  cd assets
  npm i -D tailwindcss-animate
  # or yarn
  yarn add -D tailwindcss-animate

4. Configure tails SaladUI use tails to properly merge Tailwindcss classes

# config/config.exs

config :tails, colors_file: Path.join(File.cwd!(), "assets/tailwind.colors.json")

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
• ✅ 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