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

Cards

Ported from HyperUI’s Cards — see Attribution.

Base

Section titled “Base”

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 NeobrutalismCards1Example extends StatelessWidget {
  const NeobrutalismCards1Example({super.key});


  static const _calendarSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z" clip-rule="evenodd"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'block border-2 border-black bg-white p-4 text-black shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        children: [
          Style(
            'inline-flex items-center gap-1.5',
            children: [
              Style('size-4', child: CurrentColorIcon(_calendarSvg)),
              const Style(
                'text-xs/none font-semibold uppercase',
                display: DisplayType.inline,
                child: Text('April 1, 2025'),
              ),
            ],
          ),
          const Style(
            'mt-1 text-xl font-semibold',
            child: Text('How I built my first website with Nuxt, Tailwind CSS and Vercel'),
          ),
          const Style(
            'mt-2 line-clamp-2 text-pretty',
            child: Text(
              'Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, '
              'ipsa maiores deleniti consectetur nobis et eaque.',
            ),
          ),
        ],
      ),
    );
  }
}

Base stacked

Section titled “Base stacked”

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 NeobrutalismCards2Example extends StatelessWidget {
  const NeobrutalismCards2Example({super.key});


  static const _calendarSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z" clip-rule="evenodd"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'block border-2 border-black bg-white p-4 text-black shadow-[4px_4px_0_0,8px_8px_0_0,12px_12px_0_0] shadow-black hover:translate-3 hover:bg-yellow-200 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
        cursor: SystemMouseCursors.click,
        children: [
          Style(
            'inline-flex items-center gap-1.5',
            children: [
              Style('size-4', child: CurrentColorIcon(_calendarSvg)),
              const Style(
                'text-xs/none font-semibold uppercase',
                display: DisplayType.inline,
                child: Text('April 1, 2025'),
              ),
            ],
          ),
          const Style(
            'mt-1 text-xl font-semibold',
            child: Text('How I built my first website with Nuxt, Tailwind CSS and Vercel'),
          ),
          const Style(
            'mt-2 line-clamp-2 text-pretty',
            child: Text(
              'Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, '
              'ipsa maiores deleniti consectetur nobis et eaque.',
            ),
          ),
        ],
      ),
    );
  }
}

Base dashed

Section titled “Base dashed”

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 NeobrutalismCards3Example extends StatelessWidget {
  const NeobrutalismCards3Example({super.key});


  static const _calendarSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z" clip-rule="evenodd"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'group/card relative',
        children: [
          const Style(
            'absolute inset-0 border-2 border-dashed border-black bg-white dark:border-white dark:bg-gray-900',
          ),
          Style(
            'group/link relative flex h-72 flex-col justify-end border-2 border-black bg-white p-4 text-black group-hover/card:-translate-2 after:absolute hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6 dark:border-white dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
            cursor: SystemMouseCursors.click,
            children: [
              Style(
                'inline-flex items-center gap-1.5',
                children: [
                  Style('size-4', child: CurrentColorIcon(_calendarSvg)),
                  const Style(
                    'text-xs/none font-semibold uppercase',
                    display: DisplayType.inline,
                    child: Text('April 1, 2025'),
                  ),
                ],
              ),
              const Style(
                'mt-1 text-xl font-semibold',
                child: Text('How I built my first website with Nuxt, Tailwind CSS and Vercel'),
              ),
              const Style(
                'mt-2 line-clamp-2 hidden text-pretty group-hover/link:block',
                child: Text(
                  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, '
                  'ipsa maiores deleniti consectetur nobis et eaque.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Retro window

Section titled “Retro window”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'border-2 border-black bg-white text-black shadow-[4px_4px_0_0,8px_8px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white',
        children: [
          Style(
            'bg-yellow-200 p-3 dark:bg-yellow-700',
            child: Style(
              'flex items-center justify-between',
              children: [
                const Style(
                  'text-xs/none font-bold uppercase',
                  display: DisplayType.inline,
                  child: Text('System Message'),
                ),
                const Style(
                  'flex gap-1',
                  children: [
                    Style('size-3 border-2 border-black bg-white dark:border-white dark:bg-gray-900'),
                    Style('size-3 border-2 border-black bg-white dark:border-white dark:bg-gray-900'),
                  ],
                ),
              ],
            ),
          ),
          const Style(
            'border-t-2 border-black p-4 sm:p-6 dark:border-white',
            children: [
              Style('text-lg font-semibold', child: Text('Retro Window')),
              Style(
                'mt-2 text-sm text-pretty',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam nihil, sit quod quos '
                  'quibusdam quam ducimus dolore necessitatibus delectus perspiciatis.',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}