SaladUI - Phoenix liveview components inspired by shadui

Your Libraries & OS Mentoring Libraries
, , , , ,
101

Turns out it worked when reinstalling with: --as-lib.
When you don’t use it as a lib and just copy paste code from examples without importing any components is it expected to crash ?

1 Like
102

Great job!!

1 Like
103

Without --as-lib you have to manually install all components used in this dashboard.
You can do that with command mix salad.add component1 component2

104

Hi. Thanks for the library.

  1. Is there a preferred installation method? I presume --as-lib is secondary because you have to add the parameter.
  2. If I’m installing SaladUI’s core components, such as Button, I’m getting call is ambiguous, which I guess the idea is to remove it from the existing core_components?
105

We’re excited to announce SaladUI v1 alpha, our accessible component library for Phoenix LiveView!

What’s New

  • Enhanced Accessibility: Improved ARIA support and keyboard navigation
  • Mini JS Framework: State machine-based component architecture
  • Advanced Component System: Better tools for building complex interactive components
  • Server-Client Commands: Improved API to control components from the server
  • Better Event Handling: Standardized event system across all components

Try it at Salad UI - Dropdown Menu
Github repo: GitHub - bluzky/salad_ui: Phoenix Liveview component library inspired by shadcn UI

There are many bugs, outdated document. I’m spending most of time on my team project so I’ll gradually update. Please open issue.

We welcome your feedback!

9 Likes
106

Congrats for your progress on the road to v1 @bluzky.

I really want to thank you for work on salad_ui. A good UI component library was a major gap in the ecosystem to fullfill on Phoenix and Liveview’s promise of fast and sustainable fullstack development.

Right now there are few options popping up, but we really like salad_ui. We think it is a good choice to go with shadcn’s approach of neutral stying and it’s good structural foundation allowing for systematic theming, and the escape hatch to alter the components at will when they are colocated with the project. This should allow a product’s UI to evolve as custom requirements, such as branding, emerge.

The fact that salad_ui is based on shadcn also allows us to implement a UI forkflow starting in Figma, where the designer designs our product features with one of the many Figma community libraries of shadcn. From there on the developer rebuilds a well planned and crafted UI in the Liveview application with salad_ui.

We are just getting started, but salad_ui is carrying our frontend. We are looking forward to contribute, for example with a guide on adopting salad_ui, when our experience is a bit more consolidated. Thank you, and be asured that your project’s improvements are being used.

1 Like
107

This is awesome! Great work.

Curious if you have plans to support keyboard navigation for some of these components, e.g. Command?

Also, it looks like the embedded demos are showing an internal server error at the moment. :slightly_smiling_face:

108

Thanks @jam, I’m working to fix those examples, migrate from v0 to v1 break many pages.
I’ve deployed the fixes, pls check

1 Like
109

@holgerwiehen I’m super happy to see your comment.

v1 is going to break some component because I’m working to standardize the attributes and events handling. So I’m thinking of a tool to migrate v0 to v1 components (if I have time :D), but not easy thought.

I’m also planning to improve document, SaladUI provides many tools that support to build new component hook easily.