Phoenix Liveview components for Shadcn UI

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.

Demo

How to start Story book.

1. Clone this repository

2. Clone https://github.com/bluzky/salad_ui at the same directory with this repo

3. Install node modules

cd assets && yarn

4. 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

View on GitHub

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.

Comments

[Rengoku Kyoujurou]

It's awesome! I love it! <3

[Sawyer Wolfe]

Interesting project! How challenging was it to port Shadcn UI to Phoenix Liveview?

[Dung Nguyen]

Sorry for late reply. There are 3 main issues:

• Components with state: select, combobox, command, ... required custom hook to provide better UX so I skip them for now.
• I have to find work around solution for tags that Shadcn can be used asChild which is not render as a tag but merge to container tag.
• There is no way to query for DOM element relative to current tag. For example when click a tab trigger I want to hide other tab contents I have to pass root id to query for all tab contents to hide. This is potential bugs if user forget to set root id.