---
title: Hux UI
description: "An open-source state of the art UI library for Flutter 💙"
openGraph:
  title: "Hux UI - Modern Flutter UI Component Library"
  description: "An open-source state of the art UI library for Flutter 💙"
  image: "https://docs.thehuxdesign.com/images/hero-light.png"
  type: "website"
twitter:
  card: "summary_large_image"
  title: "Hux UI - Modern Flutter UI Component Library"
  description: "An open-source state of the art UI library for Flutter 💙"
  image: "https://docs.thehuxdesign.com/images/hero-light.png"
---

<img
  className="block dark:hidden"
  src="/images/hero-light.png"
  alt="Hux UI Light Theme"
/>
<img
  className="hidden dark:block"
  src="/images/hero-dark.png"
  alt="Hux UI Dark Theme"
/>

## What is Hux UI?

Hux UI is an open-source state-of-the-art UI library for Flutter, created by [Zoe Gilbert](https://github.com/lofidesigner). It provides a comprehensive set of beautiful, customizable components designed for clean and consistent user interfaces.

<Tip>
  **Try it live!** Explore all Hux UI components interactively at [ui.thehuxdesign.com](https://ui.thehuxdesign.com) 🚀
</Tip>

<Note>
  **Designers**: Access the complete Hux UI design system in [Figma](https://www.figma.com/community/file/1541197128732135637/the-hux-ui) with all components, colors, and design tokens ready for your design workflow.
</Note>

<CardGroup cols={2}>
  <Card
    title="Live Demo"
    icon="play"
    href="https://ui.thehuxdesign.com"
  >
    Try all Hux UI components interactively in your browser
  </Card>
  <Card
    title="Get Started"
    icon="rocket"
    href="/installation"
  >
    Install Hux UI and set up your first Flutter app in minutes
  </Card>
  <Card
    title="Components"
    icon="cubes"
    href="/components/index"
  >
    Explore our comprehensive collection of UI components
  </Card>
  <Card
    title="Examples"
    icon="code"
    href="/examples/basic-usage"
  >
    See Hux UI in action with practical examples
  </Card>
  <Card
    title="Theming"
    icon="palette"
    href="/theming"
  >
    Learn how to customize themes and design tokens
  </Card>
  <Card
    title="Figma Library"
    icon="figma"
    href="https://www.figma.com/community/file/1541197128732135637/the-hux-ui"
  >
    Access the complete design system for your design workflow
  </Card>
</CardGroup>

## Key Features

<AccordionGroup>
  <Accordion title="Modern Design" icon="palette">
    Clean, minimal design language with beautiful animations and smooth interactions.
  </Accordion>
  
  <Accordion title="Dark Mode Support" icon="moon">
    Built-in light and dark theme support with automatic adaptation and design tokens.
  </Accordion>
  
  <Accordion title="Data Visualization" icon="chart-line">
    Beautiful animated charts for data presentation with line and bar chart support.
  </Accordion>
  
  <Accordion title="Responsive" icon="mobile-screen">
    Components adapt to different screen sizes and provide excellent cross-platform support.
  </Accordion>
  
  <Accordion title="Customizable" icon="gear">
    Extensive customization options with design tokens and theme system.
  </Accordion>
  
  <Accordion title="Accessible" icon="universal-access">
    WCAG AA compliant with proper contrast ratios and accessibility features.
  </Accordion>
</AccordionGroup>

## Available Components

Hux UI includes 25+ 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
- **HuxTextarea** - Multi-line text input optimized for longer content with character count support
- **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
- **HuxTabs** - Organize content into multiple panels with tab navigation
- **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

```dart
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**](https://github.com/sponsors/lofidesigner) - Every contribution makes a difference!

---

## Links

- **Live Demo**: [ui.thehuxdesign.com](https://ui.thehuxdesign.com) - Interactive component playground
- **Package**: [pub.dev/packages/hux](https://pub.dev/packages/hux)
- **Source Code**: [github.com/lofidesigner/hux](https://github.com/lofidesigner/hux)
- **Issues**: [GitHub Issues](https://github.com/lofidesigner/hux/issues)
- **Documentation**: [docs.thehuxdesign.com](https://docs.thehuxdesign.com)
- **Figma Library**: [Figma Community](https://www.figma.com/community/file/1541197128732135637/the-hux-ui)
- **Changelog**: [GitHub Releases](https://github.com/lofidesigner/hux/releases)
