Compose Unstyled

Unstyled, fully accessible components and theming APIs for building fully custom design systems in Jetpack Compose.

[Alex Styl @alexstyl]

New open source is up:

Material 3 Compose Unstyled

A recreation of Material 3 in Jetpack Compose built with Compose Unstyled.

https://t.co/TdWfr4A6ot

[Alex Styl @alexstyl]

Compose Unstyled 2.2.0 is out!

🎯 focus-visible support for focusRing
🏎️ faster Bottom Sheet layout measurements
🛑 fixed Bottom Sheet touch fling visual glitch
🧱 Scrim now lives in modal/dialog artifacts

More polished primitives, fewer edge cases. https://t.co/KNUH8wA3Pa

[Alex Styl @alexstyl]

Introducing Compose Unstyled 2.0: the API for building Jetpack Compose component libraries.

Now with 100% less styling and 100% more modules.

[Alex Styl @alexstyl]

Soon

[Alex Styl @alexstyl]

Compose Unstyled 1.49.7 is now available

🤖 Apply visualTransformation when TextField is non-editable
✍️ Add textDecoration parameter to Text & TextField
🎯 Automatically focus dialog panel content when displayed
🍎 Fix iOS DropdownMenu enter animations
🪟 Fix Modals updating System UI appearance

tl;dr: a lot of bug fixes

https://t.co/Uv6TvbTOVr

[Alex Styl @alexstyl]

🔥 Awesome to see @ComposeUnstyled being used in over 100 million plus Android devices world wide.

Want your product to be featured in the showcase?

Kindly fill in the form in the reply.

I would love to feature you.

[Alex Styl @alexstyl]

Here is your chance to contribute to @ComposeUnstyled:

Create a GithubAction that runs `./gradlew test` on PR.

More and more people are asking to contribute to the project, so now it's a good time to introduce a CI.

If you know how to use Github Actions or want to learn, there is no better candidate than this.

Full details at: https://t.co/GkrHKYSuCW

[Alex Styl @alexstyl]

The Compose Unstyled boilerplates now come with Preview Support

Shoutout to lfabiani on Github for the PR

[Alex Styl @alexstyl]

✨ Introducing the official Compose Unstyled boilerplates

2 free open-source template projects to get started building with Compose Unstyled in seconds.

Both boilerplates are minimal, and are a great starting point for your projects.

Include:
- ✅ Fully custom theme based on design tokens
- ✅ Example themable components
- ✅ Boilerplate for Android, iOS, Desktop and Web apps
- ✅ Auto-code reload for faster development (Compose Hot Reload on CMP)
- ✅ `.gitignore`
- ✅ No Material dependencies

Links to both in the reply.

[Alex Styl @alexstyl]

✨ Introducing Compose Ripple Indication

Adds the shiny Material ripple effect in every app and design system.

- No need for Material Compose
- Works on every platform

Github and playground app in the reply below.

[Alex Styl @alexstyl]

If you are building with Compose Unstyled and you share it on X, make sure to tag it with #composeunstyled

Would love to see your work!

[Alex Styl @alexstyl]

AI is stealing my job

thanks to the new [🧠 AI Buttons] I added to the @ComposeUnstyled docs today.

Ask any question you want about the library and how to create custom components directly to the LLMs.

You can either copy the page directly to use with any LLM or ask @ChatGPTapp, and @claudeai.

[Alex Styl @alexstyl]

Just shipped a new Compose Unstyled component: 💬 Tooltip

🎯 Handles focus, hover and long press interactions
🦻 Screen reader support out of the box
🔝 Arrow (caret) support

and of course fully customizable

Watch to learn what this bad boy can do.

Live demo and code examples in the reply below.

[Alex Styl @alexstyl]

⚡️ Introducing Composables One

Universal Components for Compose UI, so that you can build apps that look like yours, not Google's.

The reason why I built this is because Material Compose is not built with multiplatform in mind.

It is missing keyboard navigation, and controls looks oversized on desktop and web.

(Material looks kind of funky on iOS but that's a preference)

Instead of fighting Material for customizations, I went ahead and built every component from scratch with a clean modern look that looks great on every platform.

Today I am making them available to everyone.

Official blog announcement in the reply.

[Alex Styl @alexstyl]

⭐️ New in @ComposeUnstyled 1.43.1

Added three new APIs for building responsive apps with:

🪟 currentWindowContainerSize(): returns the DpSize of the container your component is hosted

📚 Stack: Place items horizontally or vertically dynamically. Handy when used with the window container size.

🎯 minimumInteractiveComponentSize(): specify the minimum interactive size for your components. This is a new property for your themes. This way you can make your interactive elements bigger on touch devices but smaller on desktop/web.

[Alex Styl @alexstyl]

⚡️ Compose Unstyled v1.40.0 is out!

Use Android XML themes directly in Jetpack Compose.

The new resolveThemeX() API helps you migrate your Views to Composables by gradually moving your XML themes into your Compose Theme.

[Alex Styl @alexstyl]

Introducing Compose Unstyled

Compose Unstyled is an API for implementing any design system in Jetpack Compose and Compose Multiplatform.

🎨 Token based Theming API
🍱 20+ renderless components
🎹 Keyboard navigation
🤟 Fully a11y

Link in the reply

[Alex Styl @alexstyl]

You asked for this

@ComposeUnstyled's latest unstyled component is: ✅✅✅TriStateCheckbox

Tri state checkboxes have 3 states - One, Off and Intermediate.

They are typically used in tables, where you want a way to quickly select all items.

Docs and live demo in the reply:

[Alex Styl @alexstyl]

🧌 IT'S ALIVE!

The latest version of @ComposeUnstyled adds a few handy styling modifiers:

💍 outline – draws an border *around* your composable. As opposed to border, this one does not affect layout.

🎯 focusRing – draws the outline of your composable, but only when the component gains focus. This is handy for keyboard navigation.

You can try them out live straight from your browser (thanks Compose Web) by following the link in the reply

[Alex Styl @alexstyl]

✨ New day, new bottom sheet improvement.

Made the bottom sheet feel snappier by instantly dismissing the scrim (window dimming) when tapping outside.

Previously the sheet had to be removed fully before removing the dimming.

Coming up in the next release of @ComposeUnstyled