diff --git a/demo/lib/components/alert.dart b/demo/lib/components/alert.dart
index 1f67ccf..f5ab030 100644
--- a/demo/lib/components/alert.dart
+++ b/demo/lib/components/alert.dart
@@ -13,23 +13,19 @@ Widget buildCheckboxUseCase(BuildContext context) {
     child: SizedBox(
       width: 300,
       child: RemixAlert(
-        title: StyledText(
-          context.knobs.string(
-            label: 'Title',
-            initialValue: 'Error',
-          ),
+        title: context.knobs.string(
+          label: 'Title',
+          initialValue: 'Error',
         ),
-        subtitle: StyledText(
-          context.knobs.string(
-            label: 'Subtitle',
-            initialValue: 'Your session has expired. Please log in again.',
-          ),
+        subtitle: context.knobs.string(
+          label: 'Subtitle',
+          initialValue: 'Your session has expired. Please log in again.',
         ),
-        leading: context.knobs.boolean(
-          label: 'Leading',
+        icon: context.knobs.boolean(
+          label: 'icon',
           initialValue: false,
         )
-            ? const StyledIcon(Icons.warning_amber_rounded)
+            ? Icons.warning_amber_rounded
             : null,
       ),
     ),
diff --git a/demo/lib/components/avatar.dart b/demo/lib/components/avatar.dart
index 7a6e2ab..ecca996 100644
--- a/demo/lib/components/avatar.dart
+++ b/demo/lib/components/avatar.dart
@@ -15,7 +15,7 @@ Widget buildCheckboxUseCase(BuildContext context) {
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         RemixAvatar(
-          style: AvatarStyles(
+          style: RemixAvatarStyle(
             container: Style(
               box.height(60),
               box.width(60),
@@ -23,41 +23,34 @@ Widget buildCheckboxUseCase(BuildContext context) {
               box.color(
                 Colors.cyanAccent.shade200.withAlpha(60),
               ),
-            ),
-            icon: Style(
+              icon.size(30),
               icon.color(Colors.cyanAccent),
             ),
           ),
-          child: const StyledIcon(Icons.person),
+          imageBuilder: (style) => const StyledIcon(Icons.person),
         ),
         const SizedBox(width: 10),
         RemixAvatar(
-          style: AvatarStyles.base().copyWith(
+          style: RemixAvatarStyle.base().copyWith(
             container: Style(
               box.height(50),
               box.width(50),
             ),
-            icon: Style(
-              icon.size(30),
-            ),
           ),
-          child: const StyledIcon(Icons.access_alarms_rounded),
+          imageBuilder: (style) =>
+              const StyledIcon(Icons.access_alarms_rounded),
         ),
         const SizedBox(width: 10),
         RemixAvatar(
-          backgroundImage: const NetworkImage(
+          image: NetworkImage(
             'https://avatars.githubusercontent.com/u/14010287?v=4',
           ),
-          style: AvatarStyles.base().copyWith(
+          style: RemixAvatarStyle.base().copyWith(
             container: Style(
               box.height(40),
               box.width(40),
             ),
-            icon: Style(
-              icon.size(30),
-            ),
           ),
-          // child: const StyledIcon(Icons.access_alarms_rounded),
         ),
       ],
     ),
diff --git a/demo/lib/components/badge.dart b/demo/lib/components/badge.dart
index ba4509b..f2e09ec 100644
--- a/demo/lib/components/badge.dart
+++ b/demo/lib/components/badge.dart
@@ -11,22 +11,10 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 Widget buildCheckboxUseCase(BuildContext context) {
   return Center(
     child: RemixBadge(
-      label: context.knobs.stringOrNull(
+      label: context.knobs.string(
         label: "Label",
         initialValue: "Label",
       ),
-      leadingIcon: context.knobs.boolean(
-        label: "Leading icon",
-        initialValue: false,
-      )
-          ? const StyledIcon(Icons.star_rounded)
-          : null,
-      trailingIcon: context.knobs.boolean(
-        label: "Trailing icon",
-        initialValue: false,
-      )
-          ? const StyledIcon(Icons.alarm)
-          : null,
     ),
   );
 }
diff --git a/demo/lib/components/card.dart b/demo/lib/components/card.dart
index 4c71278..1d0fb93 100644
--- a/demo/lib/components/card.dart
+++ b/demo/lib/components/card.dart
@@ -14,10 +14,10 @@ Widget buildCheckboxUseCase(BuildContext context) {
       child: RemixCard(
         child: RemixListTile(
           leading: RemixAvatar(
-            child: StyledText('LF'),
+            fallbackLabel: 'LF',
           ),
-          title: StyledText('Title'),
-          subtitle: StyledText('Subtitle'),
+          title: 'Title',
+          subtitle: 'Subtitle',
         ),
       ),
     ),
diff --git a/demo/lib/components/list_tile.dart b/demo/lib/components/list_tile.dart
index c846d39..b4389a2 100644
--- a/demo/lib/components/list_tile.dart
+++ b/demo/lib/components/list_tile.dart
@@ -12,7 +12,7 @@ Widget buildCheckboxUseCase(BuildContext context) {
   return Center(
     child: RemixListTile(
       leading: RemixAvatar(
-        style: AvatarStyles.base().copyWith(
+        style: RemixAvatarStyle.base().copyWith(
           container: Style(
             height(60),
             width(60),
@@ -22,19 +22,15 @@ Widget buildCheckboxUseCase(BuildContext context) {
             ),
           ),
         ),
-        child: StyledText('LF'),
+        fallbackLabel: 'LF',
       ),
-      title: StyledText(
-        context.knobs.string(
-          label: 'Title',
-          initialValue: 'Title',
-        ),
+      title: context.knobs.string(
+        label: 'Title',
+        initialValue: 'Title',
       ),
-      subtitle: StyledText(
-        context.knobs.string(
-          label: 'Subtitle',
-          initialValue: 'Subtitle',
-        ),
+      subtitle: context.knobs.string(
+        label: 'Subtitle',
+        initialValue: 'Subtitle',
       ),
       trailing: Icon(
         Icons.arrow_forward_ios,
diff --git a/demo/lib/main.directories.g.dart b/demo/lib/main.directories.g.dart
index 8b13789..2616f50 100644
--- a/demo/lib/main.directories.g.dart
+++ b/demo/lib/main.directories.g.dart
@@ -1 +1,150 @@
+// coverage:ignore-file
+// ignore_for_file: type=lint
+// ignore_for_file: unused_import, prefer_relative_imports, directives_ordering
 
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+// **************************************************************************
+// AppGenerator
+// **************************************************************************
+
+// ignore_for_file: no_leading_underscores_for_library_prefixes
+import 'package:demo/components/alert.dart' as _i2;
+import 'package:demo/components/avatar.dart' as _i3;
+import 'package:demo/components/badge.dart' as _i4;
+import 'package:demo/components/button.dart' as _i5;
+import 'package:demo/components/card.dart' as _i6;
+import 'package:demo/components/checkbox.dart' as _i7;
+import 'package:demo/components/divider.dart' as _i8;
+import 'package:demo/components/list_tile.dart' as _i9;
+import 'package:demo/components/radio.dart' as _i10;
+import 'package:demo/components/switch.dart' as _i11;
+import 'package:widgetbook/widgetbook.dart' as _i1;
+
+final directories = <_i1.WidgetbookNode>[
+  _i1.WidgetbookFolder(
+    name: 'components',
+    children: [
+      _i1.WidgetbookFolder(
+        name: 'alert',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixAlert',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i2.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'avatar',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixAvatar',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i3.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'badge',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixBadge',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i4.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'button',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixButton',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i5.buildButtonUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'card',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixCard',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i6.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'checkbox',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixCheckbox',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i7.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'divider',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixDivider',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i8.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'list_tile',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixListTile',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i9.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'radio',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixRadio',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i10.buildRadioUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'switch',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixSwitch',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i11.buildRadioUseCase,
+            ),
+          )
+        ],
+      ),
+    ],
+  )
+];
diff --git a/lib/components/alert/alert.dart b/lib/components/alert/alert.dart
index d850403..99d93c1 100644
--- a/lib/components/alert/alert.dart
+++ b/lib/components/alert/alert.dart
@@ -1,33 +1,40 @@
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:remix_ui/components/alert/alert.style.dart';
-import 'package:remix_ui/components/card/card.style.dart';
 
+import '../../helpers/widget_builder.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixAlert extends StatelessWidget
-    implements RemixComponentRecipe<AlertStyles> {
+    implements RemixComponentRecipe<RemixAlertStyle> {
   const RemixAlert({
     super.key,
-    this.leading,
+    this.icon,
     this.title,
     this.subtitle,
     this.style,
     this.variants = const [],
+    this.leadingBuilder,
+    this.titleBuilder,
+    this.subtitleBuilder,
   });
 
-  final Widget? leading;
-  final Widget? title;
-  final Widget? subtitle;
+  final IconData? icon;
+  final String? title;
+  final String? subtitle;
+
+  final RemixWidgetBuilder<RemixAlertStyle>? leadingBuilder;
+  final RemixWidgetBuilder<RemixAlertStyle>? titleBuilder;
+  final RemixWidgetBuilder<RemixAlertStyle>? subtitleBuilder;
 
   @override
-  final AlertStyles? style;
+  final RemixAlertStyle? style;
 
   @override
   final List<Variant> variants;
 
-  AlertStyles buildStyle(List<Variant> variants) {
-    final result = style == null ? AlertStyles.base() : style!;
+  RemixAlertStyle buildStyle(List<Variant> variants) {
+    final result = style == null ? RemixAlertStyle.base() : style!;
     return result.applyVariants(variants);
   }
 
@@ -35,30 +42,41 @@ class RemixAlert extends StatelessWidget
   Widget build(BuildContext context) {
     final style = buildStyle(variants);
 
+    final leadingWidget = leadingBuilder != null
+        ? leadingBuilder!(style)
+        : icon != null
+            ? StyledIcon(icon, style: style.icon)
+            : null;
+
+    final titleWidget = titleBuilder != null
+        ? titleBuilder!(style)
+        : title != null
+            ? StyledText(
+                title!,
+                style: style.title,
+                inherit: false,
+              )
+            : null;
+
+    final subtitleWidget = subtitleBuilder != null
+        ? subtitleBuilder!(style)
+        : subtitle != null
+            ? StyledText(
+                subtitle!,
+                style: style.subtitle,
+                inherit: false,
+              )
+            : null;
+
     return HBox(
       style: style.outerRowContainer,
       children: [
-        if (leading != null)
-          MixProvider.build(
-            context,
-            style: style.icon,
-            builder: (_) => leading!,
-          ),
+        if (leadingWidget != null) leadingWidget,
         VBox(
           style: style.innerColumnContainer,
           children: [
-            if (title != null)
-              MixProvider.build(
-                context,
-                style: style.title,
-                builder: (_) => title!,
-              ),
-            if (subtitle != null)
-              MixProvider.build(
-                context,
-                style: style.subtitle,
-                builder: (_) => subtitle!,
-              ),
+            if (titleWidget != null) titleWidget,
+            if (subtitleWidget != null) subtitleWidget,
           ],
         ),
       ],
diff --git a/lib/components/alert/alert.style.dart b/lib/components/alert/alert.style.dart
index e9bb26a..75b7bed 100644
--- a/lib/components/alert/alert.style.dart
+++ b/lib/components/alert/alert.style.dart
@@ -1,7 +1,7 @@
 import 'package:mix/mix.dart';
 
-class AlertStyles extends StyleRecipe<AlertStyles> {
-  const AlertStyles({
+class RemixAlertStyle extends StyleRecipe<RemixAlertStyle> {
+  const RemixAlertStyle({
     this.outerRowContainer = const Style.empty(),
     this.innerColumnContainer = const Style.empty(),
     this.title = const Style.empty(),
@@ -15,8 +15,8 @@ class AlertStyles extends StyleRecipe<AlertStyles> {
   final Style subtitle;
   final Style icon;
 
-  factory AlertStyles.base() {
-    return AlertStyles(
+  factory RemixAlertStyle.base() {
+    return RemixAlertStyle(
       outerRowContainer: _outerRowContainer(),
       innerColumnContainer: _innerColumnContainer(),
       title: _title(),
@@ -26,8 +26,8 @@ class AlertStyles extends StyleRecipe<AlertStyles> {
   }
 
   @override
-  AlertStyles applyVariants(List<Variant> variants) {
-    return AlertStyles(
+  RemixAlertStyle applyVariants(List<Variant> variants) {
+    return RemixAlertStyle(
       outerRowContainer: outerRowContainer.applyVariants(variants),
       innerColumnContainer: innerColumnContainer.applyVariants(variants),
       title: title.applyVariants(variants),
@@ -37,7 +37,7 @@ class AlertStyles extends StyleRecipe<AlertStyles> {
   }
 
   @override
-  AlertStyles merge(AlertStyles? other) {
+  RemixAlertStyle merge(RemixAlertStyle? other) {
     if (other == null) return this;
     return copyWith(
       outerRowContainer: outerRowContainer.merge(other.outerRowContainer),
@@ -50,14 +50,14 @@ class AlertStyles extends StyleRecipe<AlertStyles> {
   }
 
   @override
-  AlertStyles copyWith({
+  RemixAlertStyle copyWith({
     Style? outerRowContainer,
     Style? innerColumnContainer,
     Style? title,
     Style? subtitle,
     Style? icon,
   }) {
-    return AlertStyles(
+    return RemixAlertStyle(
       outerRowContainer: outerRowContainer ?? this.outerRowContainer,
       innerColumnContainer: innerColumnContainer ?? this.innerColumnContainer,
       title: title ?? this.title,
diff --git a/lib/components/avatar/avatar.dart b/lib/components/avatar/avatar.dart
index b5e02f7..e2ed630 100644
--- a/lib/components/avatar/avatar.dart
+++ b/lib/components/avatar/avatar.dart
@@ -1,51 +1,62 @@
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
+import '../../helpers/widget_builder.dart';
 import 'avatar.style.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixAvatar extends StatelessWidget
-    implements RemixComponentRecipe<AvatarStyles> {
+    implements RemixComponentRecipe<RemixAvatarStyle> {
   const RemixAvatar({
     super.key,
-    this.child,
-    this.backgroundImage,
-    this.foregroundImage,
+    this.image,
+    this.imageBuilder,
+    this.fallbackLabel,
+    this.fallbackLabelBuilder,
     this.style,
     this.variants = const [],
   });
 
-  final Widget? child;
-  final ImageProvider<Object>? backgroundImage;
-  final ImageProvider<Object>? foregroundImage;
+  final ImageProvider<Object>? image;
+  final String? fallbackLabel;
+  final RemixWidgetBuilder<RemixAvatarStyle>? fallbackLabelBuilder;
+  final RemixWidgetBuilder<RemixAvatarStyle>? imageBuilder;
 
   @override
-  final AvatarStyles? style;
+  final RemixAvatarStyle? style;
 
   @override
   final List<Variant> variants;
 
-  Style buildStyle(List<Variant> variants) {
-    var styles = style == null ? AvatarStyles.base() : style!;
-    styles = styles.applyVariants(variants);
-
-    return Style.combine([
-      styles.container,
-      styles.icon,
-      styles.label,
-      styles.image,
-      if (backgroundImage != null)
-        Style(box.decoration.image(backgroundImage!)),
-      if (foregroundImage != null)
-        Style(box.foregroundDecoration.image(foregroundImage!)),
-    ]);
+  RemixAvatarStyle buildStyle(List<Variant> variants) {
+    var styles = style == null ? RemixAvatarStyle.base() : style!;
+
+    return styles.applyVariants(variants);
   }
 
   @override
   Widget build(BuildContext context) {
+    final style = buildStyle(variants);
+
+    final imageWidget = imageBuilder != null
+        ? imageBuilder!(style)
+        : image != null
+            ? StyledImage(
+                image: image!,
+                style: style.image,
+                inherit: false,
+              )
+            : null;
+
+    final fallbackLabelWidget = fallbackLabelBuilder != null
+        ? fallbackLabelBuilder!(style)
+        : fallbackLabel != null
+            ? StyledText(fallbackLabel!, style: style.fallbackLabel)
+            : null;
+
     return Box(
-      style: buildStyle(variants),
-      child: child,
+      style: style.container,
+      child: imageWidget ?? fallbackLabelWidget,
     );
   }
 }
diff --git a/lib/components/avatar/avatar.style.dart b/lib/components/avatar/avatar.style.dart
index 215e61a..37200c5 100644
--- a/lib/components/avatar/avatar.style.dart
+++ b/lib/components/avatar/avatar.style.dart
@@ -1,58 +1,51 @@
 import 'package:mix/mix.dart';
 
-class AvatarStyles extends StyleRecipe<AvatarStyles> {
-  const AvatarStyles({
+class RemixAvatarStyle extends StyleRecipe<RemixAvatarStyle> {
+  const RemixAvatarStyle({
     this.container = const Style.empty(),
-    this.icon = const Style.empty(),
-    this.label = const Style.empty(),
+    this.fallbackLabel = const Style.empty(),
     this.image = const Style.empty(),
   });
 
   final Style container;
-  final Style icon;
-  final Style label;
+  final Style fallbackLabel;
   final Style image;
 
-  factory AvatarStyles.base() {
-    return AvatarStyles(
+  factory RemixAvatarStyle.base() {
+    return RemixAvatarStyle(
       container: _container(),
-      icon: _icon(),
-      label: _label(),
+      fallbackLabel: _label(),
       image: _image(),
     );
   }
 
   @override
-  AvatarStyles applyVariants(List<Variant> variants) {
-    return AvatarStyles(
+  RemixAvatarStyle applyVariants(List<Variant> variants) {
+    return RemixAvatarStyle(
       container: container.applyVariants(variants),
-      icon: icon.applyVariants(variants),
-      label: label.applyVariants(variants),
+      fallbackLabel: fallbackLabel.applyVariants(variants),
       image: image.applyVariants(variants),
     );
   }
 
   @override
-  AvatarStyles copyWith({
+  RemixAvatarStyle copyWith({
     Style? container,
-    Style? icon,
-    Style? label,
+    Style? fallbackLabel,
     Style? image,
   }) {
-    return AvatarStyles(
+    return RemixAvatarStyle(
       container: this.container.merge(container),
-      icon: this.icon.merge(icon),
-      label: this.label.merge(label),
+      fallbackLabel: this.fallbackLabel.merge(fallbackLabel),
       image: this.image.merge(image),
     );
   }
 
   @override
-  AvatarStyles merge(AvatarStyles? other) {
+  RemixAvatarStyle merge(RemixAvatarStyle? other) {
     return copyWith(
       container: other?.container,
-      icon: other?.icon,
-      label: other?.label,
+      fallbackLabel: other?.fallbackLabel,
       image: other?.image,
     );
   }
@@ -68,11 +61,6 @@ Style _container() => Style(
       clip.oval(),
     );
 
-Style _icon() => Style.icon(
-      icon.size(18),
-      icon.color.grey(),
-    );
-
 Style _label() => Style.text(
       text.style.fontSize(16),
       text.style.color.black54(),
diff --git a/lib/components/badge/badge.dart b/lib/components/badge/badge.dart
index 2244f23..5cf5b73 100644
--- a/lib/components/badge/badge.dart
+++ b/lib/components/badge/badge.dart
@@ -5,44 +5,35 @@ import 'badge.style.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixBadge extends StatelessWidget
-    implements RemixComponentRecipe<BadgeStyles> {
+    implements RemixComponentRecipe<RemixBadgeStyle> {
   const RemixBadge({
     super.key,
-    this.label,
-    this.leadingIcon,
-    this.trailingIcon,
+    required this.label,
     this.style,
     this.variants = const [],
   });
 
-  final String? label;
-  final Widget? leadingIcon;
-  final Widget? trailingIcon;
+  final String label;
 
   @override
-  final BadgeStyles? style;
+  final RemixBadgeStyle? style;
 
   @override
   final List<Variant> variants;
 
-  Style buildStyle(List<Variant> variants) {
-    var styles = style == null ? BadgeStyles.base() : style!;
-    styles = styles.applyVariants(variants);
-
-    return styles.outerRowContainer.merge(styles.icon).merge(styles.label);
+  RemixBadgeStyle buildStyle(List<Variant> variants) {
+    var styles = style == null ? RemixBadgeStyle.base() : style!;
+    return styles.applyVariants(variants);
   }
 
   @override
   Widget build(BuildContext context) {
-    return PressableBox(
-      onPressed: () {},
-      child: HBox(
-        style: buildStyle(variants),
-        children: [
-          if (leadingIcon != null) leadingIcon!,
-          if (label != null) StyledText(label!),
-          if (trailingIcon != null) trailingIcon!,
-        ],
+    final style = buildStyle(variants);
+    return Box(
+      style: style.container,
+      child: StyledText(
+        label,
+        style: style.label,
       ),
     );
   }
diff --git a/lib/components/badge/badge.style.dart b/lib/components/badge/badge.style.dart
index b66e491..113ccef 100644
--- a/lib/components/badge/badge.style.dart
+++ b/lib/components/badge/badge.style.dart
@@ -1,58 +1,51 @@
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
-class BadgeStyles extends StyleRecipe<BadgeStyles> {
-  const BadgeStyles({
-    this.outerRowContainer = const Style.empty(),
-    this.icon = const Style.empty(),
+class RemixBadgeStyle extends StyleRecipe<RemixBadgeStyle> {
+  const RemixBadgeStyle({
+    this.container = const Style.empty(),
     this.label = const Style.empty(),
   });
 
-  final Style outerRowContainer;
-  final Style icon;
+  final Style container;
   final Style label;
 
-  factory BadgeStyles.base() {
-    return BadgeStyles(
-      outerRowContainer: _outerRowContainer(),
-      icon: _icon(),
+  factory RemixBadgeStyle.base() {
+    return RemixBadgeStyle(
+      container: _container(),
       label: _label(),
     );
   }
 
   @override
-  BadgeStyles applyVariants(List<Variant> variants) {
-    return BadgeStyles(
-      outerRowContainer: outerRowContainer.applyVariants(variants),
-      icon: icon.applyVariants(variants),
+  RemixBadgeStyle applyVariants(List<Variant> variants) {
+    return RemixBadgeStyle(
+      container: container.applyVariants(variants),
       label: label.applyVariants(variants),
     );
   }
 
   @override
-  BadgeStyles copyWith({
-    Style? outerRowContainer,
-    Style? icon,
+  RemixBadgeStyle copyWith({
+    Style? container,
     Style? label,
   }) {
-    return BadgeStyles(
-      outerRowContainer: this.outerRowContainer.merge(outerRowContainer),
-      icon: this.icon.merge(icon),
+    return RemixBadgeStyle(
+      container: this.container.merge(container),
       label: this.label.merge(label),
     );
   }
 
   @override
-  BadgeStyles merge(BadgeStyles? other) {
+  RemixBadgeStyle merge(RemixBadgeStyle? other) {
     return copyWith(
-      outerRowContainer: other?.outerRowContainer,
-      icon: other?.icon,
+      container: other?.container,
       label: other?.label,
     );
   }
 }
 
-Style _outerRowContainer() => Style(
+Style _container() => Style(
       flex.mainAxisAlignment.center(),
       flex.mainAxisSize.min(),
       flex.crossAxisAlignment.center(),
@@ -66,11 +59,6 @@ Style _outerRowContainer() => Style(
       ),
     );
 
-Style _icon() => Style.icon(
-      icon.size(12),
-      icon.color.white(),
-    );
-
 Style _label() => Style.text(
       text.style.fontSize(12),
       text.style.fontWeight.w600(),
diff --git a/lib/components/button/button.dart b/lib/components/button/button.dart
index 29e19e8..9db9a25 100644
--- a/lib/components/button/button.dart
+++ b/lib/components/button/button.dart
@@ -6,7 +6,7 @@ import 'package:remix_ui/components/button/button.variants.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixButton extends StatelessWidget
-    implements RemixComponentRecipe<ButtonStyles> {
+    implements RemixComponentRecipe<RemixButtonStyle> {
   const RemixButton({
     super.key,
     this.label,
@@ -33,26 +33,25 @@ class RemixButton extends StatelessWidget
   final VoidCallback? onPressed;
 
   @override
-  final ButtonStyles? style;
+  final RemixButtonStyle? style;
 
   @override
   final List<Variant> variants;
 
-  ButtonStyles buildStyle(List<Variant> variants) {
-    final result = style == null ? ButtonStyles.baseForm() : style!;
+  RemixButtonStyle buildStyle(List<Variant> variants) {
+    final result = style == null ? RemixButtonStyle.baseForm() : style!;
     return result.applyVariants(variants);
   }
 
-  List<Widget> _buildChildren(BuildContext context, ButtonStyles style) {
-    if (loading) {
-      return _buildLoadingChildren(context, style);
-    }
-    return _buildDefaultChildren(style);
+  List<Widget> _buildChildren(BuildContext context, RemixButtonStyle style) {
+    return loading
+        ? _buildLoadingChildren(context, style)
+        : _buildDefaultChildren(style);
   }
 
   List<Widget> _buildLoadingChildren(
     BuildContext context,
-    ButtonStyles buttonStyle,
+    RemixButtonStyle buttonStyle,
   ) =>
       [
         _buildLoadingIndicator(MixData.create(context, buttonStyle.icon)),
@@ -77,7 +76,7 @@ class RemixButton extends StatelessWidget
     );
   }
 
-  List<Widget> _buildDefaultChildren(ButtonStyles style) => [
+  List<Widget> _buildDefaultChildren(RemixButtonStyle style) => [
         if (iconLeft != null) StyledIcon(iconLeft, style: style.icon),
         if (label != null) StyledText(label!, style: style.label),
         if (iconRight != null) StyledIcon(iconRight, style: style.icon),
diff --git a/lib/components/button/button.style.dart b/lib/components/button/button.style.dart
index 3892b43..f37e7f2 100644
--- a/lib/components/button/button.style.dart
+++ b/lib/components/button/button.style.dart
@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:remix_ui/components/button/button.variants.dart';
 
-class ButtonStyles extends StyleRecipe<ButtonStyles> {
-  const ButtonStyles({
+class RemixButtonStyle extends StyleRecipe<RemixButtonStyle> {
+  const RemixButtonStyle({
     this.container = const Style.empty(),
     this.icon = const Style.empty(),
     this.label = const Style.empty(),
@@ -13,19 +13,19 @@ class ButtonStyles extends StyleRecipe<ButtonStyles> {
   final Style icon;
   final Style label;
 
-  factory ButtonStyles.baseForm() {
-    return ButtonStyles(
+  factory RemixButtonStyle.baseForm() {
+    return RemixButtonStyle(
       container: _container(),
       icon: _icon(),
       label: _label(),
     );
   }
 
-  factory ButtonStyles.build([
-    ButtonStyles? other,
+  factory RemixButtonStyle.build([
+    RemixButtonStyle? other,
     List<Variant> variants = const [],
   ]) {
-    return ButtonStyles(
+    return RemixButtonStyle(
       container: _container(),
       icon: _icon(),
       label: _label(),
@@ -33,8 +33,8 @@ class ButtonStyles extends StyleRecipe<ButtonStyles> {
   }
 
   @override
-  ButtonStyles applyVariants(List<Variant> variants) {
-    return ButtonStyles(
+  RemixButtonStyle applyVariants(List<Variant> variants) {
+    return RemixButtonStyle(
       container: container.applyVariants(variants),
       icon: icon.applyVariants(variants),
       label: label.applyVariants(variants),
@@ -42,12 +42,12 @@ class ButtonStyles extends StyleRecipe<ButtonStyles> {
   }
 
   @override
-  ButtonStyles copyWith({
+  RemixButtonStyle copyWith({
     Style? container,
     Style? icon,
     Style? label,
   }) {
-    return ButtonStyles(
+    return RemixButtonStyle(
       container: this.container.merge(container),
       icon: this.icon.merge(icon),
       label: this.label.merge(label),
@@ -55,7 +55,7 @@ class ButtonStyles extends StyleRecipe<ButtonStyles> {
   }
 
   @override
-  ButtonStyles merge(ButtonStyles? other) {
+  RemixButtonStyle merge(RemixButtonStyle? other) {
     return copyWith(
       container: other?.container,
       icon: other?.icon,
diff --git a/lib/components/card/card.dart b/lib/components/card/card.dart
index d15dab3..3d397eb 100644
--- a/lib/components/card/card.dart
+++ b/lib/components/card/card.dart
@@ -24,7 +24,7 @@ class PresableRemixCard extends RemixCard {
 }
 
 class RemixCard extends StatelessWidget
-    implements RemixComponentRecipe<CardStyles> {
+    implements RemixComponentRecipe<RemixCardStyle> {
   const RemixCard({
     super.key,
     required this.child,
@@ -35,7 +35,7 @@ class RemixCard extends StatelessWidget
   factory RemixCard.pressable(
     Widget child, {
     void Function()? onTap,
-    CardStyles? style,
+    RemixCardStyle? style,
   }) {
     return PresableRemixCard(
       style: style,
@@ -47,13 +47,13 @@ class RemixCard extends StatelessWidget
   final Widget child;
 
   @override
-  final CardStyles? style;
+  final RemixCardStyle? style;
 
   @override
   final List<Variant> variants;
 
-  CardStyles buildStyle(List<Variant> variants) {
-    final result = style == null ? CardStyles.base() : style!;
+  RemixCardStyle buildStyle(List<Variant> variants) {
+    final result = style == null ? RemixCardStyle.base() : style!;
 
     return result.applyVariants(variants);
   }
diff --git a/lib/components/card/card.style.dart b/lib/components/card/card.style.dart
index 976ce7e..4d3ee05 100644
--- a/lib/components/card/card.style.dart
+++ b/lib/components/card/card.style.dart
@@ -1,27 +1,27 @@
 import 'package:mix/mix.dart';
 
-class CardStyles extends StyleRecipe<CardStyles> {
-  const CardStyles({
+class RemixCardStyle extends StyleRecipe<RemixCardStyle> {
+  const RemixCardStyle({
     this.container = const Style.empty(),
   });
 
   final Style container;
 
-  factory CardStyles.base() {
-    return CardStyles(
+  factory RemixCardStyle.base() {
+    return RemixCardStyle(
       container: _container(),
     );
   }
 
   @override
-  CardStyles applyVariants(List<Variant> variants) {
-    return CardStyles(
+  RemixCardStyle applyVariants(List<Variant> variants) {
+    return RemixCardStyle(
       container: container.applyVariants(variants),
     );
   }
 
   @override
-  CardStyles merge(CardStyles? other) {
+  RemixCardStyle merge(RemixCardStyle? other) {
     if (other == null) return this;
     return copyWith(
       container: container.merge(other.container),
@@ -29,10 +29,10 @@ class CardStyles extends StyleRecipe<CardStyles> {
   }
 
   @override
-  CardStyles copyWith({
+  RemixCardStyle copyWith({
     Style? container,
   }) {
-    return CardStyles(
+    return RemixCardStyle(
       container: container ?? this.container,
     );
   }
diff --git a/lib/components/checkbox/checkbox.dart b/lib/components/checkbox/checkbox.dart
index 1071428..02065de 100644
--- a/lib/components/checkbox/checkbox.dart
+++ b/lib/components/checkbox/checkbox.dart
@@ -6,7 +6,7 @@ import 'package:remix_ui/components/checkbox/checkbox.variants.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixCheckbox extends StatelessWidget
-    implements RemixComponentRecipe<CheckboxStyles> {
+    implements RemixComponentRecipe<RemixCheckboxStyle> {
   const RemixCheckbox({
     super.key,
     this.label,
@@ -27,13 +27,13 @@ class RemixCheckbox extends StatelessWidget
   final ValueChanged<bool>? onChanged;
 
   @override
-  final CheckboxStyles? style;
+  final RemixCheckboxStyle? style;
 
   @override
   final List<Variant> variants;
 
-  CheckboxStyles buildStyle(List<Variant> variants) {
-    final result = style == null ? CheckboxStyles.baseForm() : style!;
+  RemixCheckboxStyle buildStyle(List<Variant> variants) {
+    final result = style == null ? RemixCheckboxStyle.baseForm() : style!;
 
     return result.applyVariants(variants);
   }
diff --git a/lib/components/checkbox/checkbox.style.dart b/lib/components/checkbox/checkbox.style.dart
index 4134015..175813a 100644
--- a/lib/components/checkbox/checkbox.style.dart
+++ b/lib/components/checkbox/checkbox.style.dart
@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:remix_ui/components/checkbox/checkbox.variants.dart';
 
-class CheckboxStyles extends StyleRecipe<CheckboxStyles> {
-  const CheckboxStyles({
+class RemixCheckboxStyle extends StyleRecipe<RemixCheckboxStyle> {
+  const RemixCheckboxStyle({
     required this.flexContainer,
     required this.innerContainer,
     required this.icon,
@@ -15,8 +15,8 @@ class CheckboxStyles extends StyleRecipe<CheckboxStyles> {
   final Style icon;
   final Style label;
 
-  factory CheckboxStyles.baseForm() {
-    return CheckboxStyles(
+  factory RemixCheckboxStyle.baseForm() {
+    return RemixCheckboxStyle(
       flexContainer: _flexContainerStyle(),
       innerContainer: _innerContainerStyle(),
       icon: _iconStyle(),
@@ -25,8 +25,8 @@ class CheckboxStyles extends StyleRecipe<CheckboxStyles> {
   }
 
   @override
-  CheckboxStyles applyVariants(List<Variant> variants) {
-    return CheckboxStyles(
+  RemixCheckboxStyle applyVariants(List<Variant> variants) {
+    return RemixCheckboxStyle(
       flexContainer: flexContainer.applyVariants(variants),
       innerContainer: innerContainer.applyVariants(variants),
       icon: icon.applyVariants(variants),
@@ -35,13 +35,13 @@ class CheckboxStyles extends StyleRecipe<CheckboxStyles> {
   }
 
   @override
-  CheckboxStyles copyWith({
+  RemixCheckboxStyle copyWith({
     Style? flexContainer,
     Style? innerContainer,
     Style? icon,
     Style? label,
   }) {
-    return CheckboxStyles(
+    return RemixCheckboxStyle(
       innerContainer: this.innerContainer.merge(innerContainer),
       icon: this.icon.merge(icon),
       label: this.label.merge(label),
@@ -50,7 +50,7 @@ class CheckboxStyles extends StyleRecipe<CheckboxStyles> {
   }
 
   @override
-  CheckboxStyles merge(CheckboxStyles? other) {
+  RemixCheckboxStyle merge(RemixCheckboxStyle? other) {
     return copyWith(
       flexContainer: other?.flexContainer,
       innerContainer: other?.innerContainer,
diff --git a/lib/components/divider/divider.dart b/lib/components/divider/divider.dart
index 5546143..3f0bbf9 100644
--- a/lib/components/divider/divider.dart
+++ b/lib/components/divider/divider.dart
@@ -5,7 +5,7 @@ import 'divider.style.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixDivider extends StatelessWidget
-    implements RemixComponentRecipe<DividerStyles> {
+    implements RemixComponentRecipe<RemixDividerStyle> {
   const RemixDivider({
     super.key,
     this.style,
@@ -13,13 +13,13 @@ class RemixDivider extends StatelessWidget
   });
 
   @override
-  final DividerStyles? style;
+  final RemixDividerStyle? style;
 
   @override
   final List<Variant> variants;
 
-  DividerStyles buildStyle(List<Variant> variants) {
-    var styles = style == null ? DividerStyles.base() : style!;
+  RemixDividerStyle buildStyle(List<Variant> variants) {
+    var styles = style == null ? RemixDividerStyle.base() : style!;
     return styles.applyVariants(variants);
   }
 
diff --git a/lib/components/divider/divider.style.dart b/lib/components/divider/divider.style.dart
index 3b64978..33c04cb 100644
--- a/lib/components/divider/divider.style.dart
+++ b/lib/components/divider/divider.style.dart
@@ -1,36 +1,36 @@
 import 'package:mix/mix.dart';
 
-class DividerStyles extends StyleRecipe<DividerStyles> {
-  const DividerStyles({
+class RemixDividerStyle extends StyleRecipe<RemixDividerStyle> {
+  const RemixDividerStyle({
     this.container = const Style.empty(),
   });
 
   final Style container;
 
-  factory DividerStyles.base() {
-    return DividerStyles(
+  factory RemixDividerStyle.base() {
+    return RemixDividerStyle(
       container: _container(),
     );
   }
 
   @override
-  DividerStyles applyVariants(List<Variant> variants) {
-    return DividerStyles(
+  RemixDividerStyle applyVariants(List<Variant> variants) {
+    return RemixDividerStyle(
       container: container.applyVariants(variants),
     );
   }
 
   @override
-  DividerStyles copyWith({
+  RemixDividerStyle copyWith({
     Style? container,
   }) {
-    return DividerStyles(
+    return RemixDividerStyle(
       container: this.container.merge(container),
     );
   }
 
   @override
-  DividerStyles merge(DividerStyles? other) {
+  RemixDividerStyle merge(RemixDividerStyle? other) {
     return copyWith(
       container: other?.container,
     );
diff --git a/lib/components/list_tile/list_tile.dart b/lib/components/list_tile/list_tile.dart
index 5ceec27..f557455 100644
--- a/lib/components/list_tile/list_tile.dart
+++ b/lib/components/list_tile/list_tile.dart
@@ -1,11 +1,12 @@
-import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:mix/mix.dart';
 
+import '../../helpers/widget_builder.dart';
 import 'list_tile.style.dart';
 import '../../utils/component_recipe.dart';
 
 class RemixListTile extends StatelessWidget
-    implements RemixComponentRecipe<ListTileStyles> {
+    implements RemixComponentRecipe<RemixListTileStyle> {
   const RemixListTile({
     super.key,
     this.title,
@@ -14,47 +15,54 @@ class RemixListTile extends StatelessWidget
     this.trailing,
     this.style,
     this.variants = const [],
+    this.titleBuilder,
+    this.subtitleBuilder,
   });
 
-  final Widget? title;
-  final Widget? subtitle;
+  final String? title;
+  final String? subtitle;
   final Widget? leading;
   final Widget? trailing;
 
+  final RemixWidgetBuilder<RemixListTileStyle>? titleBuilder;
+  final RemixWidgetBuilder<RemixListTileStyle>? subtitleBuilder;
+
   @override
-  final ListTileStyles? style;
+  final RemixListTileStyle? style;
 
   @override
   final List<Variant> variants;
 
-  ListTileStyles buildStyle(List<Variant> variants) {
-    var styles = style == null ? ListTileStyles.base() : style!;
+  RemixListTileStyle buildStyle(List<Variant> variants) {
+    var styles = style == null ? RemixListTileStyle.base() : style!;
     return styles.applyVariants(variants);
   }
 
   @override
   Widget build(BuildContext context) {
-    final styles = buildStyle(variants);
+    final style = buildStyle(variants);
+
+    final titleWidget = titleBuilder != null
+        ? titleBuilder!(style)
+        : title != null
+            ? StyledText(title!, style: style.title)
+            : null;
+
+    final subtitleWidget = subtitleBuilder != null
+        ? subtitleBuilder!(style)
+        : subtitle != null
+            ? StyledText(subtitle!, style: style.subtitle)
+            : null;
 
     return HBox(
-      style: styles.outerRowContainer,
+      style: style.outerRowContainer,
       children: [
         if (leading != null) leading!,
         VBox(
-          style: styles.innerColumnContainer,
+          style: style.innerColumnContainer,
           children: [
-            if (title != null)
-              MixProvider.build(
-                context,
-                style: styles.title,
-                builder: (mix) => title!,
-              ),
-            if (subtitle != null)
-              MixProvider.build(
-                context,
-                style: styles.subtitle,
-                builder: (mix) => subtitle!,
-              ),
+            if (titleWidget != null) titleWidget,
+            if (subtitleWidget != null) subtitleWidget,
           ],
         ),
         const Spacer(),
diff --git a/lib/components/list_tile/list_tile.style.dart b/lib/components/list_tile/list_tile.style.dart
index 621e6d4..430e841 100644
--- a/lib/components/list_tile/list_tile.style.dart
+++ b/lib/components/list_tile/list_tile.style.dart
@@ -1,7 +1,7 @@
 import 'package:mix/mix.dart';
 
-class ListTileStyles extends StyleRecipe<ListTileStyles> {
-  const ListTileStyles({
+class RemixListTileStyle extends StyleRecipe<RemixListTileStyle> {
+  const RemixListTileStyle({
     this.outerRowContainer = const Style.empty(),
     this.innerColumnContainer = const Style.empty(),
     this.title = const Style.empty(),
@@ -13,8 +13,8 @@ class ListTileStyles extends StyleRecipe<ListTileStyles> {
   final Style title;
   final Style subtitle;
 
-  factory ListTileStyles.base() {
-    return ListTileStyles(
+  factory RemixListTileStyle.base() {
+    return RemixListTileStyle(
       outerRowContainer: _outerRowContainer(),
       innerColumnContainer: _innerColumnContainer(),
       title: _title(),
@@ -23,8 +23,8 @@ class ListTileStyles extends StyleRecipe<ListTileStyles> {
   }
 
   @override
-  ListTileStyles applyVariants(List<Variant> variants) {
-    return ListTileStyles(
+  RemixListTileStyle applyVariants(List<Variant> variants) {
+    return RemixListTileStyle(
       outerRowContainer: outerRowContainer.applyVariants(variants),
       innerColumnContainer: innerColumnContainer.applyVariants(variants),
       title: title.applyVariants(variants),
@@ -33,13 +33,13 @@ class ListTileStyles extends StyleRecipe<ListTileStyles> {
   }
 
   @override
-  ListTileStyles copyWith({
+  RemixListTileStyle copyWith({
     Style? outerRowContainer,
     Style? innerColumnContainer,
     Style? title,
     Style? subtitle,
   }) {
-    return ListTileStyles(
+    return RemixListTileStyle(
       outerRowContainer: this.outerRowContainer.merge(outerRowContainer),
       innerColumnContainer:
           this.innerColumnContainer.merge(innerColumnContainer),
@@ -49,7 +49,7 @@ class ListTileStyles extends StyleRecipe<ListTileStyles> {
   }
 
   @override
-  ListTileStyles merge(ListTileStyles? other) {
+  RemixListTileStyle merge(RemixListTileStyle? other) {
     return copyWith(
       outerRowContainer: other?.outerRowContainer,
       innerColumnContainer: other?.innerColumnContainer,
diff --git a/lib/components/radio/radio.dart b/lib/components/radio/radio.dart
index 99ca948..4d4f369 100644
--- a/lib/components/radio/radio.dart
+++ b/lib/components/radio/radio.dart
@@ -6,7 +6,7 @@ import 'radio.style.dart';
 import 'radio.variants.dart';
 
 class RemixRadio extends StatelessWidget
-    implements RemixComponentRecipe<RadioStyles> {
+    implements RemixComponentRecipe<RemixRadioStyle> {
   const RemixRadio({
     super.key,
     this.label,
@@ -23,13 +23,13 @@ class RemixRadio extends StatelessWidget
   final ValueChanged<bool>? onChanged;
 
   @override
-  final RadioStyles? style;
+  final RemixRadioStyle? style;
 
   @override
   final List<Variant> variants;
 
-  RadioStyles buildStyle(List<Variant> variants) {
-    final result = style == null ? RadioStyles.baseForm() : style!;
+  RemixRadioStyle buildStyle(List<Variant> variants) {
+    final result = style == null ? RemixRadioStyle.baseForm() : style!;
     return result.applyVariants(variants);
   }
 
diff --git a/lib/components/radio/radio.style.dart b/lib/components/radio/radio.style.dart
index 3b2b155..f5f09dc 100644
--- a/lib/components/radio/radio.style.dart
+++ b/lib/components/radio/radio.style.dart
@@ -3,8 +3,8 @@ import 'package:mix/mix.dart';
 
 import 'radio.variants.dart';
 
-class RadioStyles extends StyleRecipe<RadioStyles> {
-  const RadioStyles({
+class RemixRadioStyle extends StyleRecipe<RemixRadioStyle> {
+  const RemixRadioStyle({
     this.outerContainer = const Style.empty(),
     this.innerContainer = const Style.empty(),
     this.label = const Style.empty(),
@@ -16,8 +16,8 @@ class RadioStyles extends StyleRecipe<RadioStyles> {
   final Style label;
   final Style row;
 
-  factory RadioStyles.baseForm() {
-    return RadioStyles(
+  factory RemixRadioStyle.baseForm() {
+    return RemixRadioStyle(
       outerContainer: _outerContainerStyle(),
       innerContainer: _innerContainerStyle(),
       label: _labelStyle(),
@@ -26,8 +26,8 @@ class RadioStyles extends StyleRecipe<RadioStyles> {
   }
 
   @override
-  RadioStyles applyVariants(List<Variant> variants) {
-    return RadioStyles(
+  RemixRadioStyle applyVariants(List<Variant> variants) {
+    return RemixRadioStyle(
       outerContainer: outerContainer.applyVariants(variants),
       innerContainer: innerContainer.applyVariants(variants),
       label: label.applyVariants(variants),
@@ -36,13 +36,13 @@ class RadioStyles extends StyleRecipe<RadioStyles> {
   }
 
   @override
-  RadioStyles copyWith({
+  RemixRadioStyle copyWith({
     Style? outerContainer,
     Style? innerContainer,
     Style? label,
     Style? row,
   }) {
-    return RadioStyles(
+    return RemixRadioStyle(
       innerContainer: this.innerContainer.merge(innerContainer),
       outerContainer: this.outerContainer.merge(outerContainer),
       label: this.label.merge(label),
@@ -51,7 +51,7 @@ class RadioStyles extends StyleRecipe<RadioStyles> {
   }
 
   @override
-  RadioStyles merge(RadioStyles? other) {
+  RemixRadioStyle merge(RemixRadioStyle? other) {
     return copyWith(
       outerContainer: other?.outerContainer,
       innerContainer: other?.innerContainer,
diff --git a/lib/components/switch/switch.dart b/lib/components/switch/switch.dart
index cfec0c4..65704d8 100644
--- a/lib/components/switch/switch.dart
+++ b/lib/components/switch/switch.dart
@@ -6,7 +6,7 @@ import 'switch.style.dart';
 import 'switch.variants.dart';
 
 class RemixSwitch extends StatelessWidget
-    implements RemixComponentRecipe<SwitchStyles> {
+    implements RemixComponentRecipe<RemixSwitchStyle> {
   const RemixSwitch({
     super.key,
     this.disabled = false,
@@ -21,13 +21,13 @@ class RemixSwitch extends StatelessWidget
   final ValueChanged<bool>? onChanged;
 
   @override
-  final SwitchStyles? style;
+  final RemixSwitchStyle? style;
 
   @override
   final List<Variant> variants;
 
-  SwitchStyles buildStyle(List<Variant> variants) {
-    final result = style == null ? SwitchStyles.baseForm() : style!;
+  RemixSwitchStyle buildStyle(List<Variant> variants) {
+    final result = style == null ? RemixSwitchStyle.baseForm() : style!;
     return result.applyVariants(variants);
   }
 
diff --git a/lib/components/switch/switch.style.dart b/lib/components/switch/switch.style.dart
index 0858975..09b0cf6 100644
--- a/lib/components/switch/switch.style.dart
+++ b/lib/components/switch/switch.style.dart
@@ -3,8 +3,8 @@ import 'package:mix/mix.dart';
 
 import 'switch.variants.dart';
 
-class SwitchStyles extends StyleRecipe<SwitchStyles> {
-  const SwitchStyles({
+class RemixSwitchStyle extends StyleRecipe<RemixSwitchStyle> {
+  const RemixSwitchStyle({
     this.outerFlexContainer = const Style.empty(),
     this.innerContainer = const Style.empty(),
   });
@@ -12,34 +12,34 @@ class SwitchStyles extends StyleRecipe<SwitchStyles> {
   final Style outerFlexContainer;
   final Style innerContainer;
 
-  factory SwitchStyles.baseForm() {
-    return SwitchStyles(
+  factory RemixSwitchStyle.baseForm() {
+    return RemixSwitchStyle(
       outerFlexContainer: _outerFlexContainerStyle(),
       innerContainer: _innerContainerStyle(),
     );
   }
 
   @override
-  SwitchStyles applyVariants(List<Variant> variants) {
-    return SwitchStyles(
+  RemixSwitchStyle applyVariants(List<Variant> variants) {
+    return RemixSwitchStyle(
       outerFlexContainer: outerFlexContainer.applyVariants(variants),
       innerContainer: innerContainer.applyVariants(variants),
     );
   }
 
   @override
-  SwitchStyles copyWith({
+  RemixSwitchStyle copyWith({
     Style? outerFlexContainer,
     Style? innerContainer,
   }) {
-    return SwitchStyles(
+    return RemixSwitchStyle(
       innerContainer: this.innerContainer.merge(innerContainer),
       outerFlexContainer: this.outerFlexContainer.merge(outerFlexContainer),
     );
   }
 
   @override
-  SwitchStyles merge(SwitchStyles? other) {
+  RemixSwitchStyle merge(RemixSwitchStyle? other) {
     return copyWith(
       outerFlexContainer: other?.outerFlexContainer,
       innerContainer: other?.innerContainer,
diff --git a/lib/helpers/widget_builder.dart b/lib/helpers/widget_builder.dart
new file mode 100644
index 0000000..82e15d1
--- /dev/null
+++ b/lib/helpers/widget_builder.dart
@@ -0,0 +1,4 @@
+import 'package:flutter/widgets.dart';
+import 'package:mix/mix.dart';
+
+typedef RemixWidgetBuilder<T extends StyleRecipe<T>> = Widget Function(T style);