Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Stats

Title, value, from value and themed growth stat

Section titled “Title, value, from value and themed growth stat”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _trendUpSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>''';


const _trendDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>''';


class Stats1Example extends StatelessWidget {
  const Stats1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto flex max-w-lg flex-col gap-4 p-6',
      children: const [_IncreaseCard(), _DecreaseCard()],
    );
  }
}


class _IncreaseCard extends StatelessWidget {
  const _IncreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Flexible(
          child: Style(
            'inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50',
            children: const [
              Style('size-4', child: CurrentColorIcon(_trendUpSvg)),
              Style('sr-only', child: Text('Increase: ')),
              Style(
                'text-xs font-medium',
                display: DisplayType.inline,
                child: Text('67.81%'),
              ),
            ],
          ),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            const Style(
              'block text-sm font-medium text-gray-500 dark:text-gray-400',
              child: Text('Profit'),
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: const [
                Style(
                  'text-2xl font-medium text-gray-900 dark:text-white',
                  display: DisplayType.inline,
                  child: Text(r'$404.32 '),
                ),
                Style(
                  'text-xs text-gray-500 dark:text-gray-400',
                  display: DisplayType.inline,
                  child: Text(r'from $240.94'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}


class _DecreaseCard extends StatelessWidget {
  const _DecreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Flexible(
          child: Style(
            'inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50',
            children: const [
              Style('size-4', child: CurrentColorIcon(_trendDownSvg)),
              Style('sr-only', child: Text('Decrease: ')),
              Style(
                'text-xs font-medium',
                display: DisplayType.inline,
                child: Text('67.81%'),
              ),
            ],
          ),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            const Style(
              'block text-sm font-medium text-gray-500 dark:text-gray-400',
              child: Text('Profit'),
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: const [
                Style(
                  'text-2xl font-medium text-gray-900 dark:text-white',
                  display: DisplayType.inline,
                  child: Text(r'$240.94 '),
                ),
                Style(
                  'text-xs text-gray-500 dark:text-gray-400',
                  display: DisplayType.inline,
                  child: Text(r'from $404.32'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Title, value, icon and themed growth stat

Section titled “Title, value, icon and themed growth stat”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Stats2Example extends StatelessWidget {
  const Stats2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto flex max-w-lg flex-col gap-4 p-6',
      children: const [_IncreaseCard(), _DecreaseCard()],
    );
  }
}


const _leadingIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>''';


const _trendUpSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>''';


const _trendDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>''';


class _IncreaseCard extends StatelessWidget {
  const _IncreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Style(
          'flex items-center gap-4',
          children: [
            const Style(
              'hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block dark:bg-gray-800 dark:text-gray-300',
              child: Style('size-6', child: CurrentColorIcon(_leadingIconSvg)),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const [
                Style(
                  'text-sm text-gray-500 dark:text-gray-400',
                  child: Text('Profit'),
                ),
                Style(
                  'text-2xl font-medium text-gray-900 dark:text-white',
                  child: Text(r'$240.94'),
                ),
              ],
            ),
          ],
        ),
        Style(
          'inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendUpSvg)),
            Style('sr-only', child: Text('Increase: ')),
            Style(
              'text-xs font-medium',
              display: DisplayType.inline,
              child: Text('67.81%'),
            ),
          ],
        ),
      ],
    );
  }
}


class _DecreaseCard extends StatelessWidget {
  const _DecreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Style(
          'flex items-center gap-4',
          children: [
            const Style(
              'hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block dark:bg-gray-800 dark:text-gray-300',
              child: Style('size-6', child: CurrentColorIcon(_leadingIconSvg)),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const [
                Style(
                  'text-sm text-gray-500 dark:text-gray-400',
                  child: Text('Profit'),
                ),
                Style(
                  'text-2xl font-medium text-gray-900 dark:text-white',
                  child: Text(r'$240.94'),
                ),
              ],
            ),
          ],
        ),
        Style(
          'inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendDownSvg)),
            Style('sr-only', child: Text('Decrease: ')),
            Style(
              'text-xs font-medium',
              display: DisplayType.inline,
              child: Text('67.81%'),
            ),
          ],
        ),
      ],
    );
  }
}

Title, value and themed growth stat

Section titled “Title, value and themed growth stat”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Stats3Example extends StatelessWidget {
  const Stats3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto flex max-w-lg flex-col gap-4 p-6',
      children: const [_IncreaseCard(), _DecreaseCard()],
    );
  }
}


const _trendUpSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>''';


const _trendDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>''';


class _IncreaseCard extends StatelessWidget {
  const _IncreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Style(
              'text-sm text-gray-500 dark:text-gray-400',
              child: Text('Profit'),
            ),
            Style(
              'text-2xl font-medium text-gray-900 dark:text-white',
              child: Text(r'$240.94'),
            ),
          ],
        ),
        Style(
          'inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendUpSvg)),
            Style('sr-only', child: Text('Increase: ')),
            Style(
              'text-xs font-medium',
              display: DisplayType.inline,
              child: Text('67.81%'),
            ),
          ],
        ),
      ],
    );
  }
}


class _DecreaseCard extends StatelessWidget {
  const _DecreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Style(
              'text-sm text-gray-500 dark:text-gray-400',
              child: Text('Profit'),
            ),
            Style(
              'text-2xl font-medium text-gray-900 dark:text-white',
              child: Text(r'$240.94'),
            ),
          ],
        ),
        Style(
          'inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendDownSvg)),
            Style('sr-only', child: Text('Decrease: ')),
            Style(
              'text-xs font-medium',
              display: DisplayType.inline,
              child: Text('67.81%'),
            ),
          ],
        ),
      ],
    );
  }
}

Title, value and icon

Section titled “Title, value and icon”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Stats4Example extends StatelessWidget {
  const Stats4Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto flex max-w-lg flex-col gap-4 p-6',
      children: const [_IconLeadingCard(), _IconTrailingCard()],
    );
  }
}


const _leadingIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>''';


class _IconLeadingCard extends StatelessWidget {
  const _IconLeadingCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        const Style(
          'rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400',
          child: Style('size-8', child: CurrentColorIcon(_leadingIconSvg)),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Style(
              'text-2xl font-medium text-gray-900 dark:text-white',
              child: Text(r'$240.94'),
            ),
            Style(
              'text-sm text-gray-500 dark:text-gray-400',
              child: Text('Total Sales'),
            ),
          ],
        ),
      ],
    );
  }
}


class _IconTrailingCard extends StatelessWidget {
  const _IconTrailingCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 sm:justify-between dark:border-gray-800 dark:bg-gray-900',
      children: [
        const Style(
          'rounded-full bg-blue-100 p-3 text-blue-600 sm:order-last dark:bg-blue-500/20 dark:text-blue-400',
          child: Style('size-8', child: CurrentColorIcon(_leadingIconSvg)),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Style(
              'text-2xl font-medium text-gray-900 dark:text-white',
              child: Text(r'$240.94'),
            ),
            Style(
              'text-sm text-gray-500 dark:text-gray-400',
              child: Text('Total Sales'),
            ),
          ],
        ),
      ],
    );
  }
}

Title, value and themed growth stat, stacked style

Section titled “Title, value and themed growth stat, stacked style”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Stats5Example extends StatelessWidget {
  const Stats5Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto flex max-w-lg flex-col gap-4 p-6',
      children: const [_IncreaseCard(), _DecreaseCard()],
    );
  }
}


const _trendUpSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>''';


const _trendDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>''';


class _IncreaseCard extends StatelessWidget {
  const _IncreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Style(
              'text-sm text-gray-500 dark:text-gray-400',
              child: Text('Profit'),
            ),
            Style(
              'text-2xl font-medium text-gray-900 dark:text-white',
              child: Text(r'$240.94'),
            ),
          ],
        ),
        Style(
          'mt-1 flex gap-1 text-green-600',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendUpSvg)),
            Style('sr-only', child: Text('Increase: ')),
            Style(
              'flex gap-2 text-xs',
              children: [
                Style('font-medium', child: Text('67.81%')),
                Style(
                  'text-gray-500 dark:text-gray-400',
                  child: Text('Since last week'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}


class _DecreaseCard extends StatelessWidget {
  const _DecreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Style(
              'text-sm text-gray-500 dark:text-gray-400',
              child: Text('Profit'),
            ),
            Style(
              'text-2xl font-medium text-gray-900 dark:text-white',
              child: Text(r'$240.94'),
            ),
          ],
        ),
        Style(
          'mt-1 flex gap-1 text-red-600',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendDownSvg)),
            Style('sr-only', child: Text('Decrease: ')),
            Style(
              'flex gap-2 text-xs',
              children: [
                Style('font-medium', child: Text('67.81%')),
                Style(
                  'text-gray-500 dark:text-gray-400',
                  child: Text('Since last week'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Title, value, icon and themed growth stat, stacked style

Section titled “Title, value, icon and themed growth stat, stacked style”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Stats6Example extends StatelessWidget {
  const Stats6Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto flex max-w-lg flex-col gap-4 p-6',
      children: const [_IncreaseCard(), _DecreaseCard()],
    );
  }
}


const _leadingIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>''';


const _trendUpSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>''';


const _trendDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>''';


class _IncreaseCard extends StatelessWidget {
  const _IncreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Style(
          'flex items-center justify-between',
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const [
                Style(
                  'text-sm text-gray-500 dark:text-gray-400',
                  child: Text('Profit'),
                ),
                Style(
                  'text-2xl font-medium text-gray-900 dark:text-white',
                  child: Text(r'$240.94'),
                ),
              ],
            ),
            const Style(
              'rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400',
              child: Style('size-8', child: CurrentColorIcon(_leadingIconSvg)),
            ),
          ],
        ),
        Style(
          'mt-1 flex gap-1 text-green-600',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendUpSvg)),
            Style('sr-only', child: Text('Increase: ')),
            Style(
              'flex gap-2 text-xs',
              children: [
                Style('font-medium', child: Text('67.81%')),
                Style(
                  'text-gray-500 dark:text-gray-400',
                  child: Text('Since last week'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}


class _DecreaseCard extends StatelessWidget {
  const _DecreaseCard();


  @override
  Widget build(BuildContext context) {
    return Style(
      'rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900',
      children: [
        Style(
          'flex items-center justify-between',
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: const [
                Style(
                  'text-sm text-gray-500 dark:text-gray-400',
                  child: Text('Profit'),
                ),
                Style(
                  'text-2xl font-medium text-gray-900 dark:text-white',
                  child: Text(r'$240.94'),
                ),
              ],
            ),
            const Style(
              'rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400',
              child: Style('size-8', child: CurrentColorIcon(_leadingIconSvg)),
            ),
          ],
        ),
        Style(
          'mt-1 flex gap-1 text-red-600',
          children: const [
            Style('size-4', child: CurrentColorIcon(_trendDownSvg)),
            Style('sr-only', child: Text('Decrease: ')),
            Style(
              'flex gap-2 text-xs',
              children: [
                Style('font-medium', child: Text('67.81%')),
                Style(
                  'text-gray-500 dark:text-gray-400',
                  child: Text('Since last week'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}