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

Tabs

Ported from HyperUI’s Tabs — see Attribution. hyperui’s own static gallery capture for this pattern component type shows one representative pose (first tab already active) — no interactive tab-switching to port, same convention as application/tabs and the toggles/checkboxes/accordions ports.

Base

Section titled “Base”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      children: [
        Style(
          'border-b-2 border-black px-2 dark:border-white',
          child: Style(
            '-mb-0.5 flex',
            children: const [
              Style(
                'border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:focus:ring-yellow-600',
                child: Text('Profile'),
              ),
              Style(
                'border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
                child: Text('Account'),
              ),
              Style(
                'border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
                child: Text('Notifications'),
              ),
            ],
          ),
        ),
        const Style(
          'mt-4',
          child: Style(
            'text-black dark:text-white',
            child: Text(
              'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta '
              'quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio '
              'consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus '
              'perspiciatis!',
            ),
          ),
        ),
      ],
    );
  }
}

Contained

Section titled “Contained”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      children: [
        Style(
          'border-b-2 border-black dark:border-white',
          child: Style(
            '-mb-0.5 flex',
            children: const [
              Style(
                'border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:focus:ring-yellow-600',
                child: Text('Profile'),
              ),
              Style(
                'border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
                child: Text('Account'),
              ),
              Style(
                'border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
                child: Text('Notifications'),
              ),
            ],
          ),
        ),
        const Style(
          '-mt-0.5 border-2 border-black p-4 shadow-[4px_4px_0_0] shadow-black dark:border-white dark:shadow-white',
          child: Style(
            'text-black dark:text-white',
            child: Text(
              'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta '
              'quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio '
              'consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus '
              'perspiciatis!',
            ),
          ),
        ),
      ],
    );
  }
}

Pills

Section titled “Pills”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      children: [
        Style(
          '-mb-0.5 flex gap-3',
          children: const [
            Style(
              'border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:shadow-white dark:focus:ring-yellow-600',
              child: Text('Profile'),
            ),
            Style(
              'border-2 border-black px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:text-white dark:shadow-white dark:focus:ring-yellow-600',
              child: Text('Account'),
            ),
            Style(
              'border-2 border-black px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:text-white dark:shadow-white dark:focus:ring-yellow-600',
              child: Text('Notifications'),
            ),
          ],
        ),
        const Style(
          'mt-4',
          child: Style(
            'text-black dark:text-white',
            child: Text(
              'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta '
              'quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio '
              'consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus '
              'perspiciatis!',
            ),
          ),
        ),
      ],
    );
  }
}

Vertical

Section titled “Vertical”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex gap-8',
        children: [
          Style(
            'border-r-2 border-black py-2 dark:border-white',
            child: Style(
              '-mr-0.5 flex flex-col',
              children: const [
                Style(
                  'border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:focus:ring-yellow-600',
                  child: Text('General'),
                ),
                Style(
                  'border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
                  child: Text('Privacy'),
                ),
                Style(
                  'border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600',
                  child: Text('Security'),
                ),
              ],
            ),
          ),
          const Style(
            'flex-1 py-2',
            child: Style(
              'text-black dark:text-white',
              child: Text(
                'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic '
                'dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste '
                'odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, '
                'temporibus perspiciatis!',
              ),
            ),
          ),
        ],
      ),
    );
  }
}