nash_ui 1.1.0

A modern, scalable Flutter Design System built with Material 3, providing design tokens, themes, responsive framework, animations, widgets, and templates.

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 and curves.
• 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.
• Widget catalog — buttons, inputs, cards, selection, media, feedback, lists, indicators, dialogs, charts, loading states and misc widgets.
• Navigation — bottom navigation, navigation rail, sidebar, drawer, top navigation and breadcrumb.
• Full-screen templates — login, register, forgot password, dashboard, settings, profile, chat, learning, finance, medical, e-commerce, social, admin and analytics.
• Utilities — validators, formatters 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.0.1

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: '[e-mail]'),
          ],
        ),
      ),
    );
  }
}

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
Inputs	NashTextField, PasswordField, EmailField, NumberField, PhoneField, SearchField, OtpField, NashDropdown, DateField, MultiSelect
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
Navigation	NashNavigationRail, BottomNavBar, NavDrawer, Breadcrumb, NashAppBar, NashTabBar
Dialogs	NashDialog, NashBottomSheet, ActionSheet, NashPopupMenu
Charts	LineChart, BarChart, PieChart
Loading	NashLoader, CircularProgress, LinearProgress, Skeleton, SkeletonList, SkeletonGrid, Shimmer, LoadingScreen
Indicators	NashBadge, progress indicators
Misc	NashCalendar, NashRating, NashStepper, NashTimeline, NashTag
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.