SaladUI - Phoenix liveview components inspired by shadui

You may know, a UI component library for React. I really love it’s design style and components. I’ve built some components for my project GitHub - bluzky/orangecms: Admin interface for your static site.

I was thinking of reimplement these components as a library. And after a few weeks, here is some thing I can show you guys.

A demo worth thousands of words

And github repos

Your contributions and feedbacks are welcome


Looks really nice. Great work!


Wow, nice, and it’s only use JS from liveview. Great work!!!


Looks great!

Small feedback for the dropdown menu: there is a delay between the click and when content appears. Would be nice to have it instant.


Nice work!


Yeah, I think it would be better not to add more dependencies. But some components are really hard to implement without using custom JS, so I have to skip them at this time.

Thanks for your feedback. I think it’s because of the animation. Maybe I can tweak it a little.

Update 05/30/2024

I’ve already added select component. It doesn’t behave the same with built-in select, but it looks better ha.
There are lots of challenge to implement client side select with LiveView.

Check it here: SaladUI - Select

Do you have any suggestion to improve it?


Just tried it and it flickers on mobile Firefox when you select an item.

Enter seems to open the select, but otherwise keyboard navigation doesn’t seem to be working.


Thanks for your feedback

I have tried, but still not find out a way to handle client side select without custom client Javascript.
Do you have any idea?

You need to dig into hooks, pretty sure.

I try to avoid using hook, but it seems in inevitable

Update May 31

Added new component: Breadcrumb and Pagination

Check them here:


Really appreciate the work on this. Been looking for feature rich component libraries to incorporate in my toolkit as well. Bookmarking this for later :slight_smile:


What kind of toolkit are you working on?

You really shouldn’t try to avoid it, it’s there for a reason and I think it would be the perfect addition to this project. I’d recommend having a look at whatb melt-ui does for svelte components.

I wonder if that library could be used as a dev dependency, compiled and integrated into hooks akin to LiveSvelte, like a light-weight version of what shadcn-svelte does… :thinking:

I’d like to help explore this when I have some spare cycles, if you don’t get to it first


I would definitely agree that shipping some hooks for necessary interactivity is reasonable. Good impulse to first try getting on without, but some components are likely trivial with a hook but convoluted or impossible without it.

I haven’t tried shipping a component with an integrated hook for others to use. I suppose you need to decide if that JS is a per-component import for app.js or figure out something smoother?


There are ways to load them dynamically as needed while hinting to the browser to prefetch and cache for performance gains. Basically a combination of promise-based import() and <script type="importmap"></script>

I’ll see about creating a PoC soon.

Anything ARIA-related is a prime candidate. Liveview has an implementation of this for wrapping tab focus on things like dropdown menus

1 Like