<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek" -->

---
title: The Compose Styles API Is Everything I Wished For
description: Jetpack Compose is introducing a new experimental Styles API that provides a more intuitive alternative to visual modifiers. The API lets developers define...
canonical: https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: The Compose Styles API Is Everything I Wished For | daily.dev
og:description: Jetpack Compose is introducing a new experimental Styles API that provides a more intuitive alternative to visual modifiers. The API lets developers define...
og:url: https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek
og:image: https://api.daily.dev/og/posts/j93xBG4EK.png
og:image:alt: The Compose Styles API Is Everything I Wished For
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# The Compose Styles API Is Everything I Wished For

**[Philipp Lackner](https://daily.dev/sources/philipplackner)** · 30 min read · 1 upvotes · 0 comments

## Summary

Jetpack Compose is introducing a new experimental Styles API that provides a more intuitive alternative to visual modifiers. The API lets developers define reusable style objects bundling multiple visual properties (background, shape, font size, padding, content color) and apply them to any composable via the `stylable` modifier. Key features include interactive state styles (pressed, hovered, focused, disabled) linked via `MutableStyleState` and `InteractionSource`, built-in animation support for style transitions, CSS-like style inheritance and hierarchy (child composables inherit parent styles, with last-write-wins override semantics), and style chaining via the `then` function for building design system hierarchies. The API also supports extending the style scope with custom composition locals for accessing theme colors safely. Unlike modifiers, styles are non-additive and purely visual, making design system construction significantly cleaner.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.youtube.com/watch?v=3oJs2i_os1Y>

## Questions this post answers

### What is the new Jetpack Compose Styles API and how does it differ from modifiers?

The Compose Styles API introduces a 'stylable' modifier that lets developers bundle visual attributes like background color, shape, font size, and text alignment into a single reusable Kotlin style object, applied with one line of code. Unlike modifiers, styles are not additive (last property set wins regardless of order), support hierarchical inheritance and chaining via a then function, and allow state-based variants for pressed, hovered, focused, and disabled states with built-in animation support.

_Developers building custom Compose design systems can track experimental APIs like this on daily.dev._

### How do I enable the experimental Compose Styles API is inherited text style feature?

Set the compose foundation flags is inherited text style enabled property to true in the main activity, which requires opting into the experimental API. This flag is needed for content color styling to properly propagate to basic Text composables, since without it the text composable won't respect that inherited styling setting.

_Teams adopting experimental Compose features rely on daily.dev to stay ahead of API changes before shipping._

### How do you make a Jetpack Compose style respond to a button's pressed or disabled state?

Link an interaction source to a mutable style state created with remember, then bind that style state to the stylable modifier's styleState parameter. Inside the style block, define pressed, hovered, focused, or disabled sub-blocks (which can be nested) specifying different properties like background color; these can be wrapped in an animate block, optionally with a custom animation spec such as tween with a duration, to transition smoothly between states.

_Android developers wiring up interactive styling states can find implementation walkthroughs like this via daily.dev._

## Similar posts on daily.dev

- [Leverage the essentials: Jetpack Compose best practices](https://daily.dev/posts/leverage-the-essentials-jetpack-compose-best-practices-xxhv9qgoo) · Medium · 0 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#android](https://daily.dev/tags/android), [#kotlin](https://daily.dev/tags/kotlin), [#jetpack-compose](https://daily.dev/tags/jetpack-compose)

[View this post on daily.dev](https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"The Compose Styles API Is Everything I Wished For","url":"https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek"},"datePublished":"2026-07-12T11:13:28.778Z","dateModified":"2026-09-13T21:41:05.255Z","description":"Jetpack Compose is introducing a new experimental Styles API that provides a more intuitive alternative to visual modifiers. The API lets developers define...","image":"https://i.ytimg.com/vi/3oJs2i_os1Y/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/3oJs2i_os1Y/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Philipp Lackner","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Philipp Lackner","logo":"https://media.daily.dev/image/upload/s--WOEWUbRT--/f_auto/v1725038407/logos/philipplackner","url":"https://daily.dev/sources/philipplackner"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,android,kotlin,jetpack-compose","timeRequired":"PT30M","video":{"@type":"VideoObject","name":"The Compose Styles API Is Everything I Wished For","description":"Jetpack Compose is introducing a new experimental Styles API that provides a more intuitive alternative to visual modifiers. The API lets developers define...","thumbnailUrl":"https://i.ytimg.com/vi/3oJs2i_os1Y/sddefault.jpg","uploadDate":"2026-07-12T11:13:28.778Z","duration":"PT30M","url":"https://api.daily.dev/r/j93xBG4EK","embedUrl":"https://www.youtube.com/embed/3oJs2i_os1Y"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Philipp Lackner","item":"https://daily.dev/sources/philipplackner"},{"@type":"ListItem","position":3,"name":"The Compose Styles API Is Everything I Wished For"}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-compose-styles-api-is-everything-i-wished-for-j93xbg4ek#faq","mainEntity":[{"@type":"Question","name":"What is the new Jetpack Compose Styles API and how does it differ from modifiers?","acceptedAnswer":{"@type":"Answer","text":"The Compose Styles API introduces a 'stylable' modifier that lets developers bundle visual attributes like background color, shape, font size, and text alignment into a single reusable Kotlin style object, applied with one line of code. Unlike modifiers, styles are not additive (last property set wins regardless of order), support hierarchical inheritance and chaining via a then function, and allow state-based variants for pressed, hovered, focused, and disabled states with built-in animation support. Developers building custom Compose design systems can track experimental APIs like this on daily.dev."}},{"@type":"Question","name":"How do I enable the experimental Compose Styles API is inherited text style feature?","acceptedAnswer":{"@type":"Answer","text":"Set the compose foundation flags is inherited text style enabled property to true in the main activity, which requires opting into the experimental API. This flag is needed for content color styling to properly propagate to basic Text composables, since without it the text composable won't respect that inherited styling setting. Teams adopting experimental Compose features rely on daily.dev to stay ahead of API changes before shipping."}},{"@type":"Question","name":"How do you make a Jetpack Compose style respond to a button's pressed or disabled state?","acceptedAnswer":{"@type":"Answer","text":"Link an interaction source to a mutable style state created with remember, then bind that style state to the stylable modifier's styleState parameter. Inside the style block, define pressed, hovered, focused, or disabled sub-blocks (which can be nested) specifying different properties like background color; these can be wrapped in an animate block, optionally with a custom animation spec such as tween with a duration, to transition smoothly between states. Android developers wiring up interactive styling states can find implementation walkthroughs like this via daily.dev."}}]}
```

