Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bluzky/salad_ui
Phoenix Liveview component library inspired by shadcn UI
https://github.com/bluzky/salad_ui
elixir liveview phoenix phoenix-liveview tailwindcss
Last synced: 3 months ago
JSON representation
Phoenix Liveview component library inspired by shadcn UI
- Host: GitHub
- URL: https://github.com/bluzky/salad_ui
- Owner: bluzky
- License: mit
- Created: 2024-05-25T04:51:21.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-19T03:35:15.000Z (4 months ago)
- Last Synced: 2024-07-19T11:58:21.191Z (4 months ago)
- Topics: elixir, liveview, phoenix, phoenix-liveview, tailwindcss
- Language: Elixir
- Homepage: https://salad-storybook.fly.dev/welcome
- Size: 148 KB
- Stars: 269
- Watchers: 14
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - Phoenix Liveview - Phoenix Liveview port of shadcn/ui (Ports / Portfolios)
- awesome-shadcn-ui - SaladUI - Phoenix Liveview port of shadcn/ui (Ports)
- awesome-shadcn-ui - SaladUI - Phoenix Liveview port of shadcn/ui (Ports)
README
# SaladUI
[](https://hex.pm/packages/salad_ui)
[](https://hexdocs.pm/salad_ui/)
[](https://hex.pm/packages/salad_ui)
[](https://github.com/bluzky/salad_ui/commits/main)
This library is my attemp to port [shadcn ui](https://ui.shadcn.com/) to Phoenix Liveview Component.
## [Demo at https://salad-storybook.fly.dev](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`:
```elixir
def deps do
[
{:salad_ui, "~> 0.4.2"}
]
end
```
2. Add custom color
- Goto [https://ui.shadcn.com/themes](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
```elixir
# 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
```ex
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