Skip to main content

Documentation Index

Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Quickstart

Get up and running with Nebux Design System by building a complete login screen with theming, validation, and real-world components.
This guide assumes you’ve already installed Nebux Design System in your project.

​
Setup theme

Configure Nebux Design System theme in your MaterialApp:
1

Import the package

import 'package:nebux_design_system/nebux_design_system.dart';
2

Configure MaterialApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: NebuxTheme.createThemeData(
        isDark: false,
        colors: NebuxColors.standardLight(),
        fontSize: NebuxFontSize.standard(),
        typography: NebuxTypography.standard(),
      ),
      darkTheme: NebuxTheme.createThemeData(
        isDark: true,
        colors: NebuxColors.standardDark(),
        fontSize: NebuxFontSize.standard(),
        typography: NebuxTypography.standard(),
      ),
      home: WelcomeScreen(),
    );
  }
}

​
Build your first screen

Create a complete welcome screen using Nebux components: 
import 'package:flutter/material.dart';
import 'package:nebux_design_system/nebux_design_system.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  State<WelcomeScreen> createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;

  Future<void> _handleLogin() async {
    setState(() => _isLoading = true);
    // Simulate API call
    await Future.delayed(Duration(seconds: 2));
    setState(() => _isLoading = false);
  }

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return NbxScaffold(
      widgetName: 'WelcomeScreen',
      appBarConfig: AppBarConfig(
        title: 'Welcome',
        showDivider: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Sign in to your account',
              style: context.nebuxTypography.heading,
            ),
            heightSpace32,
            
            // Email field
            NbxTextFieldWidget(
              NbxInputParameters(
                controller: _emailController,
                hintText: 'Enter your email',
                labelText: 'Email',
                inputType: NbxInputType.email,
                isRequired: true,
                requiredErrorMessage: 'Email is required',
                context: context,
              ),
            ),
            heightSpace16,
            
            // Password field
            NbxTextFieldWidget(
              NbxInputParameters(
                controller: _passwordController,
                hintText: 'Enter your password',
                labelText: 'Password',
                inputType: NbxInputType.password,
                showEyeIcon: true,
                isRequired: true,
                requiredErrorMessage: 'Password is required',
                context: context,
              ),
            ),
            heightSpace24,
            
            // Login button
            NbxButton(
              text: 'Sign In',
              onPressed: _handleLogin,
              styleConfig: ButtonStyleConfig(
                variant: ButtonVariant.filled,
              ),
              stateConfig: ButtonStateConfig(
                isLoading: _isLoading,
              ),
              layoutConfig: ButtonLayoutConfig(
                isExpanded: true,
              ),
            ),
            heightSpace12,
            
            // Secondary action
            NbxButton(
              text: 'Create Account',
              onPressed: () {},
              styleConfig: ButtonStyleConfig(
                variant: ButtonVariant.outline,
              ),
              layoutConfig: ButtonLayoutConfig(
                isExpanded: true,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

​
What’s included

This example demonstrates:

Theme System

Light and dark themes with consistent colors and typography

Input Validation

Built-in email and password validation with visual feedback

Loading States

Automatic loading indicators and disabled states

Spacing System

Consistent spacing using predefined constants

​
Key components used

​
NbxScaffold

Enhanced scaffold with configurable app bar: 
NbxScaffold(
  widgetName: 'WelcomeScreen',
  appBarConfig: AppBarConfig(
    title: 'Welcome',
    showDivider: true,
  ),
  body: YourContent(),
)

​
NbxTextFieldWidget

Text input with validation: 
NbxTextFieldWidget(
  NbxInputParameters(
    hintText: 'Enter your email',
    labelText: 'Email',
    inputType: NbxInputType.email,
    isRequired: true,
    context: context,
  ),
)

​
NbxButton

Configurable button with loading states: 
NbxButton(
  text: 'Sign In',
  onPressed: () {},
  styleConfig: ButtonStyleConfig(
    variant: ButtonVariant.filled,
  ),
  stateConfig: ButtonStateConfig(
    isLoading: isLoading,
  ),
)

​
Next steps

Explore Components

Discover all available UI components

Customize Themes

Learn how to create custom themes

Typography System

Master text styles and fonts

Advanced Usage

Explore advanced patterns and techniques