hey looking for the best CMP library to make compo...

# compose

[Kevin]

hey looking for the best CMP library to make components like https://www.shadcn.io/ . whats the best component library for CMP at the moment?

[Rey (Kingg22)]

I think (in my knowledge) no exist something equivalent to shadcn, but you have Material3 of CMP and I heard about compose unstyled if you want to create components with more control of the style.
My recommendation is to create your own components using one or both of the above mentioned.

[Meet]

@Kevin this are link i hope it helpful
https://www.lumoui.com/ by @maximus

https://composables.com/docs/compose-unstyled/overview by @Alex Styl

https://github.com/Coding-Meet/CMP-MVI-Template/tree/main/composeApp/src/commonMain/kotlin/com/example/cmp_mvi_template/ui by me

[Filip Wiesner]

Yeah, the closest thing to shadcn is lumo-ui, as Meet mentioned, because it provides the "incremental adoption of components" feature of shadcn. However, the most stable and feature-rich base for your components seems to be Compose Unstyled.
To be honest, I don't have much experience with either of them; I just tried Compose Unstyled recently.

[Kevin]

To be honest, I don't have much experience with either of them; I just tried Compose Unstyled recently.

@Filip Wiesner what was your epxerience like with it

[Filip Wiesner]

@Kevin The theming system is solid, the components that are there are good and "unstyled" as promised, which is fine, but I'd prefer the shadcn approach of good defaults and the freedom to change anything because it's in my codebase. That way, I wouldn't have to "compete" with the naming of the library (e.g., I want my button to be named "Button"). For what is actually there, I'd give a B+ 😄 But again, I just started using it recently (not even a week).
So far, the most annoying thing for me is the fact that the default indication is not platform-specific. I would expect to see a ripple on Android and something else on other platforms, but the default indication effect is just some gray overlay for all platforms. So to have a ripple, I had to import the material package anyway 😕 Other than that, I am missing IconButton and ProgressIndicator and stuff like that, but I expected there wouldn't be everything, so I am fine with it. I just must find the right balance of custom components.
Sorry for the random thoughts. I didn't have time to form a proper opinion yet, so these are more like ramblings 😄 Is there anything specific you'd like to know?

[maximus]

Shadcn was built mostly on top of Radix UI. Later, it added components from other open source projects such as React DayPicker.

When I started Lumo, I was hoping we could build something similar to Shadcn. It works really well for atomic components that the plugin already supports, like buttons and checkboxes.

Shadcn uses Radix UI for most of its atomic components, which means the component code it generates in your project is small, clean, and exactly what you need. There is no unnecessary logic or structure.

In Compose, this is harder to achieve. There is no white label UI library that provides high level, headless components in the same way Radix does.

Lumo works well for some atomic components, but for components like sliders, text fields, or bottom sheets, it ends up generating a lot of underlying logic that you would not want to maintain yourself. That becomes technical debt over time.

So in Compose, it is definitely possible to build something like Shadcn, and LumoUI shows that to some extent. But we still do not have the right foundation to generate clean, concise code. Unstyled components help, but the ecosystem is not mature enough yet to make that approach really shine.

[Filip Wiesner]

So is Lumo in a waiting mode until such system appears?

[Alex Styl]

100% agreed with what already discussed here

The goal of Unstyled is to be the layer you can use to build component libraries such as Material Compose, Lumo or any component library you need for your projects

Primitives for sliders, text fields, bottom sheets and most components in Lumo are already available in Unstyled and I've been actively working on bringing more (feel free to suggest yours). There is a lot of work in the API design so that you folks can build anything you want without the library getting in your way.

Btw, @Filip Wiesner all valid pointers for Unstyled. I absolutely hate the fact you still need to import Material to use the ripple and what you mentioned about the namespace, which I've noted to sort out in a future release.

Keep in mind that you won't see stuff like an "IconButton" in Unstyled. Unstyled brings you the UX patterns for components and no stylistic choices. IconButtons are for component libraries such as Material and Lumo to bring in using Unstyled's Button component. ProgressIndication is available btw.

[Kevin]

@Alex Styl im going to give unstyled a try. we have a CMP project and this seems like the best for us atm out there

[Alex Styl]

Cheers @Kevin. Let me know asap if you have any issues with it (either dm or the repo)

[Alex Styl]

I prioritize all blockers people have with the library

[maximus]

@Filip Wiesner - no its not. I think the way forward will be to use Unstyled and contribute to unstyled where needed as well. So agreeing with your point here

[Filip Wiesner]

Keep in mind that you won't see stuff like an "IconButton" in Unstyled

Fair enough 👌 I think I just need to find the right balance/taste of what to expect from Unstyled. I was going into unstyled as "Flexible Material" but now I see the idea is different
And byt progress indicator I meant more of an indeterminate progress indicator. Something I can slap on a screen when it's loading and i don't want to bother with skeletons.

[Alex Styl]

just need to find the right balance/taste of what to expect from Unstyled

this really depends on your situation:

You want to use Material, but you don't want to use some of its components (ie not customizable, or buggy) -> use Material + Unstyled components + MaterialTheme for styling.

You want full control over your apps looks (ie have your own design specs) and don't want to implement component's UX, keyboard interactions, focus, accessibility -> Skip Material, go full Unstyled (use theming + components)

You just want to build apps (don't care about implementing components, or about design systems) -> Use Material Compose, any libraries like Lumo or Composables One.

[Alex Styl]

Re indeterminate progress, I haven't figured out the right unstyled API for it yet

[Adrijan Rogan]

Thumbs up from me for unstyled, I'm using it for an android app (no cmp sadly) without material components (except material-ripple). Initially added it for bottom sheets (way better than m3 in my experience) and have used more components since without issues