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
- Adding
salad_uito 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.cssfile - Create new file
tailwind.colors.jsonin 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
tailsSaladUI usetailsto properly merge Tailwindcss classes
# config/config.exs
config :tails, colors_file: Path.join(File.cwd!(), "assets/tailwind.colors.json")Here is how to start develop SaladUI on local machine.
- Clone this repo
- Clone
https://github.com/bluzky/salad_storybookin the same directory withSaladUI - Start storybook
cd salad_storybook
mix phx.server
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent