SaladUI - Phoenix liveview components inspired by shadui

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:

5 Likes

Impressed by your work! I will definitely give it a try.

1 Like

Good work! Looks very promising.

Waiting until “not ready for production” disappears from the README :slight_smile:

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

Update June 5th

Added 2 new components

small thing. it appears your card menu item is linking to the form example in your demo site.

1 Like

well done! :fire:
(and storybook :smiling_face_with_three_hearts:)

4 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

10 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

7 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! :+1: