View Source SaladUI
This library is my attemp to port shadcn ui to Phoenix Liveview Component.
🚧 Warning: this library is under heavy development and not ready for production 🚧
Demo at https://salad-storybook.fly.dev
Installation
- Adding
salad_ui
to your list of dependencies inmix.exs
:
def deps do
[
{:salad_ui, github: "bluzky/salad_ui"}
]
end
- 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))" } }
- 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
- Configure
tails
SaladUI usetails
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.
- Clone this repo
- Clone
https://github.com/bluzky/salad_storybook
in the same directory withSaladUI
- Start storybook
cd salad_storybook mix phx.server
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