Skip to main content
Hux UI Light Theme

​
What is Hux UI?

Hux UI is an open-source state-of-the-art UI library for Flutter, created by Zoe Gilbert. It provides a comprehensive set of beautiful, customizable components designed for clean and consistent user interfaces.
Designers: Access the complete Hux UI design system in Figma with all components, colors, and design tokens ready for your design workflow.

Get Started

Install Hux UI and set up your first Flutter app in minutes

Components

Explore our comprehensive collection of UI components

Examples

See Hux UI in action with practical examples

Theming

Learn how to customize themes and design tokens

​
Key Features

Clean, minimal design language with beautiful animations and smooth interactions.
Built-in light and dark theme support with automatic adaptation and design tokens.
Beautiful animated charts for data presentation with line and bar chart support.
Components adapt to different screen sizes and provide excellent cross-platform support.
Extensive customization options with design tokens and theme system.
WCAG AA compliant with proper contrast ratios and accessibility features.

​
Available Components

Hux UI includes 15+ carefully crafted components organized into logical categories:

​
Input & Forms

  • HuxButton - Multiple variants (primary, secondary, outline, ghost) with loading states and icon-only support
  • HuxInput - Enhanced text input with validation and consistent styling
  • HuxDateInput - Date input with automatic formatting and calendar picker
  • HuxCheckbox - Interactive checkbox with custom styling and labels
  • HuxSwitch - Toggle switch with smooth animations

​
Date & Time Selection

  • HuxDatePicker - Modern date picker with overlay calendar and icon-only mode
  • HuxDateInput - Integrated date input with automatic formatting

​
Layout & Display

  • HuxCard - Flexible card component with headers, actions, and tap handling
  • HuxAvatar - Circular user images with initials fallback and gradient variants
  • HuxAvatarGroup - Display multiple avatars with overlapping layouts

​
Feedback & Status

  • HuxBadge - Status indicators with semantic variants
  • HuxAlert - Message boxes with dismissible functionality
  • HuxLoading - Customizable loading indicators and overlays

​
Advanced Components

  • HuxChart - Beautiful data visualization with cristalyse integration
  • HuxContextMenu - Right-click context menus with smart positioning

​
Theme System

  • HuxTheme - Pre-configured light and dark themes
  • HuxColors - Comprehensive color palette
  • HuxTokens - Design token system for consistent theming

​
Quick Example

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hux UI Demo',
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: Scaffold(
        body: Column(
          children: [
            HuxButton(
              onPressed: () => print('Hello Hux!'),
              child: Text('Get Started'),
              variant: HuxButtonVariant.primary,
            ),
            HuxInput(
              label: 'Your Name',
              hint: 'Enter your name',
            ),
            HuxDateInput(
              label: 'Birth Date',
              onDateChanged: (date) => print('Selected: $date'),
            ),
            HuxCard(
              title: 'Welcome to Hux UI',
              subtitle: 'Build beautiful Flutter apps',
              child: Text('Start creating amazing user interfaces'),
            ),
          ],
        ),
      ),
    );
  }
}

​
Support Hux UI

If you find Hux UI helpful and would like to support its continued development, consider becoming a GitHub Sponsor! 🌟 Your support helps us:
  • 🚀 Maintain and improve Hux UI components
  • 📚 Create better documentation and examples
  • 🐛 Fix bugs and add new features faster
  • 💡 Invest in new component development
Become a GitHub Sponsor - Every contribution makes a difference!
⌘I