I'm a fan of Shadcn UI library for its neat and clean components. Recently, I'm playing with Phoenix Liveview components, and I though why don't I port Shadcn UI to Phoenix Liveview.
My goal is keeping the tags as much similar to original library as possible. And not to build wrapper components as default generated CoreComponents.
Here is a sample page that ported:
And the result is what you can found on https://salad-storybook.fly.dev/.
GitHub repo:
bluzky
/
salad_storybook
Phoenix liveview components inspired by shadui
SaladStorybook
Salad UI is a collection of phoenix live view component inspired by shadui Currently these components are under heavy development and cannot be used as separated library.
How to start Story book.
-
Clone this repository
-
Clone https://github.com/bluzky/salad_ui at the same directory with this repo
-
Install node modules
cd assets && yarn
- Install dependency & start
mix deps.get
mix phx.server
Now you can visit localhost:4000 from your browser.
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
It's still my experiment and not ready for production. You can play with it and share your feedback, that would help me a lot.
Thanks.
Top comments (3)
It's awesome! I love it! <3
Interesting project! How challenging was it to port Shadcn UI to Phoenix Liveview?
Sorry for late reply. There are 3 main issues:
asChildwhich is not render as a tag but merge to container tag.