Introducing *Composables UI*: a collection of mode...

# feed

[Alex Styl]

Introducing Composables UI: a collection of modern, fully accessible components for Compose Multiplatform

What makes this component library special is that it adapts to different devices

For example, buttons are larger and rounder on touch devices, making them easier to press. When a mouse is available, they become more compact and sharper to save space.

All components are built on top of Compose Unstyled, so they are fully accessible and keyboard-nav ready out of the box.

✅ 20 components
✅ fully accessible out of the box
✅ sample multiplatform app you can try in the browser
✅ lots of live previews and code samples
✅ available as a Gradle dependency or copy/paste

Docs and sample app: https://composables.com/ui
GitHub: https://github.com/composablehorizons/composables-ui

[Mark Murphy]

Very cool!

I'm curious where the dividing line is between Compose Unstyled and Composables UI. You have components in both.

[Alex Styl]

I don't 😄 They serve a different purpose. Unstyled contains primitives, UI contains components.

Compose Unstyled is all unstyled primitives. It brings in the UX and building blocks to build components with. They render nothing on the screen by default.

Composables UI is the ready to go component library to build apps with. It is prestyled and includes components that you won't find on Unstyled because they are too opinionated, such as NavigationBars and Toolbars

[Alex Styl]

Think of it like:

Compose Unstyled sits on top of Compose Foundation and brings APIs for building component libraries such as theming and primitives. 1% of developers needs this.

Composables UI sits on top of Compose Unstyled and it's your ready to go component library with beautiful defaults, opinionated styling and design tokens. 99% of developers needs this.

[Mark Murphy]

Thanks!

The reason why I asked is that when I look over the "Components" list in Composables UI, and then look over the "Primitives" list in Compose Unstyled, there are items that appear in both (bottom sheet, checkbox, etc.). Hence, at a quick glance, it's not all that obvious (IMHO) when you want which of them.

Maybe a compare-and-contrast page/blog post might help.

[Alex Styl]

Blog post is in the making. Thanks for the qs, will make sure to include

[אליהו הדס]

Awesome !! Thanks you