neobrutalism_ui

A reusable, platform-adaptive neobrutalism component package for Flutter. It works below both MaterialApp and CupertinoApp; the widgets do not require a Material, Scaffold, or CupertinoTheme ancestor.

neobrutalism_ui components

The default light and dark palettes intentionally use yellow (#FFDC58) as their primary color. Every color, border, radius, shadow, animation, type style, and platform behavior can be replaced through NeoThemeData.

Setup

Add the package and place NeoTheme in the app builder:

MaterialApp(
  builder: (context, child) => NeoTheme(
    data: NeoThemeData.light(),
    child: child!,
  ),
  home: const MyHomePage(),
);

The same integration works with Cupertino:

CupertinoApp(
  builder: (context, child) => NeoTheme(
    data: NeoThemeData.dark(),
    child: child!,
  ),
  home: const MyHomePage(),
);

Without an explicit NeoTheme, widgets use a brightness-aware default theme.

NeoNavbar is a horizontally scrollable top bar for compact and desktop layouts. NeoBottomBar is its mobile counterpart. Both are controlled components and accept any value type.

const destinations = [
  NeoNavDestination(
    value: 'home',
    icon: Icon(Icons.home_outlined),
    selectedIcon: Icon(Icons.home),
    label: Text('Home'),
  ),
  NeoNavDestination(
    value: 'profile',
    icon: Icon(Icons.person_outline),
    selectedIcon: Icon(Icons.person),
    label: Text('Profile'),
  ),
];

NeoNavbar<String>(
  value: currentRoute,
  leading: const Text('MY APP'),
  destinations: destinations,
  onChanged: navigateTo,
);

NeoBottomBar<String>(
  value: currentRoute,
  destinations: destinations,
  onChanged: navigateTo,
);

Components

The package ports every component on the Neobrutalism components Figma page, plus a few additions Flutter apps need that the web original has no equivalent for.

Layout and display

Component	Notes
`NeoAccordion`	Composed of `NeoAccordionItem`; single or multi expand.
`NeoAvatar`	Image, initials, or fallback child.
`NeoBadge`	Filled and outlined variants.
`NeoBreadcrumb`	Composed of `NeoBreadcrumbItem`.
`NeoCard`	With `NeoCardHeader`, `NeoCardContent`, `NeoCardFooter`.
`NeoCarousel`	Page-snapping, with optional indicators.
`NeoCollapsible`	Single show/hide region.
`NeoImageCard`	Image-first card with caption.
`NeoMarquee`	Continuous horizontal scroller.
`NeoResizable`	Draggable split panes.
`NeoScrollArea`	Styled scrollbar container.
`NeoSkeleton`	Loading placeholder.
`NeoSurface`	Base border/shadow primitive the others build on.
`NeoTabs`	Composed of `NeoTabItem`.

Forms and selection

Component	Notes
`NeoButton`	Default, neutral, reverse, and noShadow variants.
`NeoCalendar`	Month grid with selection.
`NeoCheckbox`	Tristate supported.
`NeoCombobox`	Filterable select.
`NeoDatePicker`	Calendar in a popover.
`NeoInputOtp`	Segmented one-time-code field.
`NeoLabel`	Form field label.
`NeoRadioGroup`	Composed of `NeoRadioOption`.
`NeoSelect`	Composed of `NeoSelectOption`.
`NeoSlider`	Single value.
`NeoSwitch`	On/off toggle.
`NeoTextField`	Single line.
`NeoTextarea`	Multi line.

Data

Component	Notes
`NeoDataTable`	Composed of `NeoDataColumn`; sortable.
`NeoPagination`	Page navigation control.
`NeoProgress`	Determinate bar.
`NeoSpinner`	Indeterminate activity indicator.
`NeoTable`	Static table.

Component	Notes
`NeoCommand`	Command palette, composed of `NeoCommandItem`.
`NeoContextMenu`	Long-press / right-click menu.
`NeoDropdownMenu`	Anchored menu.
`NeoMenubar`	Composed of `NeoMenubarItem`.
`NeoNavigationMenu`	Composed of `NeoNavigationItem`.
`NeoPopover`	Anchored floating panel.

Menus share NeoMenuEntry and NeoMenuPanel as their entry and surface types.

Overlays and feedback

Component	Notes
`NeoAlert`	Inline banner.
`NeoAlertDialog`	Confirm/cancel dialog.
`NeoDialog`	Generic modal.
`NeoDrawer`	Edge-anchored panel.
`NeoHoverCard`	Hover-triggered preview.
`NeoSheet`	Bottom sheet.
`NeoSonner`	Toast host; emits `NeoToast`.
`NeoTooltip`	Hover/long-press label.

Package additions

Component	Notes
`NeoNavbar`	Scrollable top bar; takes `NeoNavDestination`.
`NeoBottomBar`	Mobile counterpart to `NeoNavbar`.

Overlay helpers showNeoDialog, showNeoAlertDialog, showNeoDrawer, and showNeoSheet use Flutter's navigator/overlay primitives, so they behave consistently in Material and Cupertino applications.

Custom theme

final theme = NeoThemeData.light(
  colors: NeoColors.light().copyWith(
    primary: const Color(0xFFFFDC58),
  ),
).copyWith(
  borderWidth: 3,
  shadowOffset: const Offset(5, 5),
  borderRadius: const BorderRadius.all(Radius.circular(4)),
);

Use NeoPlatformStyle.material, NeoPlatformStyle.cupertino, or the default NeoPlatformStyle.adaptive when platform-specific interaction feedback is needed.

Example

A runnable gallery of every component lives in example/. Run it with cd example && flutter run.

Attribution

The visual language and component API are inspired by neobrutalism-components, an MIT-licensed shadcn/ui component collection by Samuel Breznjak, and its companion Neobrutalism components Figma file published to the Figma Community. This package is an independent Flutter implementation and does not depend on React, Radix, Tailwind CSS, Material, or Cupertino at runtime beyond Flutter itself.