This library is my attemp to port shadcn ui to Phoenix Liveview Component.
In Construction: Salad UI is in its early stages. Expect breaking changes in minor releases until 1.0 is ready! π
- Adding
salad_ui
to your list of dependencies inmix.exs
:
def deps do
[
{:salad_ui, "~> 0.4.2"}
]
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")
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
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.
- 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