Skip to Content
Mix logo

An Expressive StylingSystem for Flutter

Effortlessly style your widgets and build design systems.

Features

Expressive by design, precise by nature.

Mix takes advantage of Dart's type system and fluent APIs to make styling composable, reactive, and delightful to write.

Intuitive Styling

Define size, color, and shape in a single fluent chain. Each method returns a new style — readable, composable, and type-safe.

See the styling guide
Loading source...
Waiting...

Context-Reactive Variants

Declare hover behavior inline — color, scale, and shadow all react to state without conditional logic.

Explore variants
Loading source...
Waiting...

Powerful Animations

Define keyframe timelines with multiple property tracks directly inside styles. No external animation controllers needed.

Animation docs
Loading source...
Waiting...

Design System Buttons

Define a base button once, then compose variants by adding just what differs. Text styling flows through via inherited defaults.

Build your own widget
Loading source...
Waiting...

Text Directives

Apply uppercase and capitalize transforms directly in the style. Directives stay attached through merges and composition.

Directives guide
Loading source...
Waiting...
Get Started

Add Mix to your project.

$flutter pub add mix

Ready to build?

Explore the full API, learn the patterns, and start building your design system with Mix.