NTB Vistech Widgets

A Flutter widget library for NTB applications, with NTB-themed inputs, buttons, navigation, feedback components, and design tokens built on top of shadcn_ui.

Features

• NTB-themed UI building blocks for forms, navigation, feedback, and screens
• Shared light and dark theme configuration via NTBTheme
• Re-exported shadcn_ui, remixicon, and lottie for easier integration
• Components designed for consistent styling across NTB apps

Included components

Area	Components
Inputs	NTBButton, NTBInput, NTBCheckbox, NTBSwitch, NTBRadioButton, NTBDatePicker, NTBMultiDropdown
Feedback	NTBBadge, NTBAvatar, NTBAccordion, NTBToast, NTBLabel, NTBSpinner
Navigation	NTBAppBar, NTBBottomSheet, NTBBottomMenu, NTBBottomMenuItem
Layout and screens	NTBListTileButtonGroup, NTBDivider, NTBSettingsPageWidget, NTBSplashPage, NTBLoginLandingPage, NTBLoginEmailPage

Installation

Add the package to your app:

dependencies:
  ntb_vistech_widgets: ^1.0.0

Then run:

flutter pub get

Basic setup

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

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

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

  @override
  Widget build(BuildContext context) {
    return ShadApp(
      theme: NTBTheme.getTheme(
        NTBTheme.lightColorScheme,
        Brightness.light,
      ),
      home: const Scaffold(),
    );
  }
}

Usage

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            NTBInput(
              placeholder: const Text('Email'),
            ),
            const SizedBox(height: 12),
            NTBBadge(
              label: const Text('Verified'),
              variant: NTBBadgeVariant.verified,
            ),
            const SizedBox(height: 12),
            NTBButton(
              label: 'Continue',
              icon: const Icon(Icons.arrow_forward),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

Theming

Use the provided NTB theme helpers to keep colors, typography, and spacing aligned with the design system:

final lightTheme = NTBTheme.getTheme(
  NTBTheme.lightColorScheme,
  Brightness.light,
);

final darkTheme = NTBTheme.getTheme(
  NTBTheme.darkColorScheme,
  Brightness.dark,
);

Developer documentation

Repository setup, Widgetbook usage, publishing steps, and contribution workflow live in DEVELOPMENT.md.

Changelog

See CHANGELOG.md for release history.

License

MIT License. See LICENSE.

---

Made with ❤️ by NTB