Nash UI

A modern, scalable, production-ready Flutter Design System built on Material 3.

nash_ui provides an opinionated design-token engine, theme factories, a responsive framework, an animation library, a complete catalog of reusable widgets, and full-screen UI templates — everything you need to ship beautiful, consistent apps faster.

---

Features

• Design tokens — colors, typography, spacing, radius, shadows, gradients, borders, opacity, dimensions, icons, durations, curves, elevation, and image tokens.
• Theme engine — NashTheme.light(), NashTheme.dark(), NashTheme.amoled() and fully custom themes via a ThemeExtension.
• Responsive framework — AppResponsive, screen types, breakpoints and responsive number extensions (10.w, 20.h, 16.r, 5.v).
• Animation library — fade, slide, scale, rotate, bounce, shake, ripple, hover, hero, page and shared-axis transitions, with reduced motion support.
• Accessibility — WCAG AA/AAA compliance tokens, focus ring, touch targets, semantic announcements, and platform-adaptive widgets.
• Widget catalog — buttons, inputs, cards, selection, media, feedback, lists, indicators, dialogs, charts, loading states, drag & drop, rich text editor, pickers, stepper, data table, notifications, and misc widgets.
• Navigation — bottom navigation, navigation rail, sidebar, drawer, top navigation and breadcrumb.
• Localization — number, currency, date, time, and compact formatting.
• Full-screen templates — login, register, forgot password, dashboard, settings, profile, chat, learning, finance, medical, e-commerce, social, admin and analytics.
• Utilities — validators, formatters, token exporter, and date/color/number/ animation/file/image/permission/device helpers.
• Quality — fully documented public API, unit/widget/golden tests and a GitHub Actions CI/CD workflow.

Getting started

Add the dependency

From pub.dev:

flutter pub add nash_ui

Or add it directly to your pubspec.yaml:

dependencies:
  nash_ui: ^1.4.0

Then run:

flutter pub get

Quick start

import 'package:flutter/material.dart';
import 'package:nash_ui/nash_ui.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: NashTheme.light(),
      darkTheme: NashTheme.dark(),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: NashAppBar(title: 'Dashboard'),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: const <Widget>[
            PrimaryButton(
              label: 'Get started',
              icon: Icons.rocket_launch_outlined,
            ),
            SizedBox(height: 16),
            NashTextField(label: 'Email', hint: 'you@example.com'),
          ],
        ),
      ),
    );
  }
}

Themes

Every theme factory is built from a seed color using the Material 3 color system.

Theme	Description
NashTheme.light()	Default light theme from the brand palette.
NashTheme.dark()	Dark theme from the brand palette.
NashTheme.amoled()	True-black (AMOLED) theme.
NashTheme.custom(colorScheme: ...)	Fully custom theme from any ColorScheme.

MaterialApp(
  theme: NashTheme.light(seedColor: const Color(0xFF10B981)),
  darkTheme: NashTheme.dark(seedColor: const Color(0xFF10B981)),
  themeMode: ThemeMode.system,
)

See Themes for details on tokens and customization.

Responsive

final AppScreenType type = AppResponsive.screenTypeOf(context);
if (type.isDesktop) {
  return const NashSidebar(...);
}
return const BottomNavBar(...);

For pixel-perfect scaling against a design reference:

AppResponsive(
  designWidth: 390,
  designHeight: 844,
  child: const MyApp(),
)

See Responsive for the full breakpoint reference.

Widget catalog

Category	Widgets
Buttons	PrimaryButton, SecondaryButton, OutlineButton, NashTextButton, NashIconButton, FloatingButton, LoadingButton, NashGlassButton, NashGradientBorderButton, NashSlideButton, NashSplitButton, NashHoldButton, NashSocialButton, NashButtonGroup
Inputs	NashTextField, PasswordField, EmailField, NumberField, PhoneField, SearchField, OtpField, NashDropdown, DateField, MultiSelect, NashRichTextEditor
Selection	NashCheckbox, NashRadio, NashSwitch, NashChip, NashSegmentedButton
Cards	NashCard, GlassCard, GlowCard, GradientCard, StatisticCard, DashboardCard, ProductCard, UserCard, MedicalCard, LearningCard
Media	NashAvatar, NashImage, NashNetworkImage
Feedback	NashSnackbar, NashBanner, NashTooltip, NashNotificationCenter
Navigation	NashNavigationRail, BottomNavBar, NavDrawer, Breadcrumb, NashAppBar, NashTabBar
Dialogs	NashDialog, NashBottomSheet, ActionSheet, NashPopupMenu, NashAdaptiveDialog, NashAdaptiveActionSheet
Charts	LineChart, BarChart, PieChart
Loading	NashLoader, CircularProgress, LinearProgress, Skeleton, SkeletonList, SkeletonGrid, Shimmer, LoadingScreen
Indicators	NashBadge, progress indicators
Data	NashEnhancedDataTable, NashTablePagination, NashDraggableList, NashDropZone, NashDraggable
Pickers	showNashStyledTimePicker, showNashDateRangeDialog, showNashDurationPicker, showNashTimeRangePicker
Stepper	NashStepper (horizontal/vertical), NashStepState
Adaptive	NashAdaptiveScaffold, NashAdaptiveSwitch, NashAdaptiveProgress, NashPlatform
Accessibility	NashFocusRing, NashTouchTarget, NashAccessibilityProvider, NashSemanticsAnnouncer, NashAccessibleButton
Misc	NashCalendar, NashRating, NashTimeline, NashTag, NashReducedMotion, NashZIndexed
UX screens	Loading, empty state, no internet, 404, error, success, maintenance, permission, update required

See Widgets for the full API reference.

Templates

Full-screen, production-ready layouts:

AuthTemplates.login, AuthTemplates.signup, AuthTemplates.forgotPassword, DashboardHeader, SettingsTemplate, ProfileTemplate, ChatTemplate, LearningTemplate, FinanceTemplate, MedicalTemplate, EcommerceTemplate, SocialTemplate, AdminTemplate, AnalyticsTemplate.

See Templates.

Utilities

Validators (Validators), formatters (NashFormatter), and helpers for dates, colors, numbers, animations, files, images, permissions and devices. See Utilities.

Documentation

Guide	Description
Getting started	Setup, dependency and first app
Design tokens	Colors, typography, spacing, radius, shadows
Themes	Light/dark/AMOLED/custom themes
Responsive	Breakpoints and screen helpers
Animations	Motion library reference
Widgets	Widget catalog with examples
Templates	Full-screen template layouts
Utilities	Validators, formatters and helpers
Testing	Unit, widget, golden and integration tests

Example application

A complete demo app is included under example/ showcasing theme switching, responsive preview, the animation gallery, the widget catalog, forms, charts, a dashboard and the template gallery.

cd example
flutter run

Testing

flutter analyze
flutter test                # unit + widget + golden tests
flutter test --update-goldens test/golden_test.dart   # refresh golden images

cd example
flutter test integration_test/app_test.dart -d windows  # integration tests

See Testing.

License

Nash UI is licensed under the Nash UI Free Use License (NU-FUL) v1.0.

• Free for Application Development: You may install and use Nash UI as a dependency in personal, educational, open-source, client, commercial, and enterprise Flutter applications completely free of charge and royalty-free.
• Application Ownership: You retain full, exclusive ownership and licensing rights over your own application source code, assets, and business logic that integrate Nash UI.
• Source Code Protection: You may not modify, fork, copy, redistribute, sublicense, resell, or create derivative packages/libraries from the Nash UI source code without prior written permission from the copyright holder.

Copyright © 2026 Nashwan Taha Nheli. All rights reserved.

See the LICENSE file for the complete terms and conditions.

Disclaimer: This license is a custom proprietary free-use license (source-available for dependency use, not an OSI-approved open-source license). Commercial users should review the full terms with their legal counsel.