For what I’m building right now I’m essentially offering multiple options:
Ship the JavaScript with the hex dependency, which gets picked up automatically IF the default esbuild setup is used. Then either import the hook per component (e.g. import { Menu } from “…”) which minimises bundle size slightly OR have a convenience Hooks import that can be added as { …Hooks } which adds everything in one go but does include components you’re not using.
Or the same but published to npm for integration with more complex asset pipelines.
2 Likes
Very good point about providing multiple ways to use them. Hooks work well if the liveview.js is used, even on dead views as it still runs the mounted() callback, but there is a need to support projects that don’t use LV and have their own requirements for importing and using js, for example could we even support some kind of Alpine integration?
There’s no need to reinvent the wheel. Phoenix, phoenix_html, phoenix_live_view have been shipping with JS as part of their hex packages for years, way before phoenix_live_view was created. Essentially you configure your bundler to treat their folder in deps as yet another node_modules dependency.
1 Like
Thanks @03juan, @lawik, and @cschmatzler for your suggestions.
I’m focusing on implementing the components first, then I will come back and improve their UX later. Melt-ui look interesting, I will take a look
1 Like
Update June 4th
Added 4 new components:
-
Slider SaladUI - Slider
This one take me lots of time to build customize slider with nearly zero JS
-
Skeleton SaladUI - Skeleton
-
Progress bar SaladUI - Progress
-
Scroll area SaladUI - Scroll Area
6 Likes
Impressed by your work! I will definitely give it a try.
2 Likes
Good work! Looks very promising.
Waiting until “not ready for production” disappears from the README 
2 Likes
Currently, there is no test for these components, so I’m not confident to release yet.
I’m looking for how to test component behaviors
1 Like
small thing. it appears your card menu item is linking to the form example in your demo site.
1 Like
well done! 
(and storybook 
)
5 Likes
Thank you, I have updated it.
1 Like
Updated June 7th
I’ve added a new demo page using SaladUI
https://salad-storybook.fly.dev/demo/dashboard-one
Desktop
Mobile
11 Likes
Update Jun 8th
Release SaladUI
I decide to release on Hex: salad_ui | Hex
I know there are bugs, so please raise an issue on Github if you found one.
Added demo section
https://salad-storybook.fly.dev/examples/demo
With some new dashboard example
What’s next
- I’m building a simple tool to convert from Shadcn React template to heex.
- SaladUI provide building blocks to build rich components. So I’m thinking of building some commonly used block to reduce boilerplate code
8 Likes
If I try to open Slider https://salad-storybook.fly.dev/salad_ui_component/slider it fails with Internal Server Error
Re, select component:
It’s in my plans for a more comprehensive course on that input:
I need some help deciding on the “features and so forth” but will most likely try to follow closely to Radix ui.
It’s going to be a headless form web-component. So will be javascript heavy. But consumer friendly.
You can join my community here if you’de like to be notified about it:
2 Likes
Thanks for the interesting project!
What I’m playing with now is LiveVue from @Jskalc together with shadcn-vue which is using Radix UI under the hood.
I’m trying to convert styling into UnoCSS, but with Tailwind it seems to work well and looks really promising! I think to create live_view “proxy” components which would use shadcn-vue more primitive components underneath. It should help with UX a lot, at least in theory, keeping the main logic inside LiveView.
4 Likes
Oh I see the error. Thanks you
I don’t have much experience with Vue, but I believe that it provides better UX with complicated components such as select, combobox, …
1 Like
Great work! 
