I started as a UX designer and recently jumped into frontend development. Pretty quickly, I noticed something annoying - I kept wasting tons of time polishing the same UI components over and over again.
You know exactly what I'm talking about: launching a text field that breaks when there's an error, buttons that look awful in dark mode, loading spinners that stick out like a sore thumb.
That's why I created Hux UI. It takes care of all the stuff we end up building anyway, but does it right from the start.
Why Hux UI solves your problems
Instead of copying and pasting the same button component between projects (and definitely forgetting some important detail), you get components that:
Work right away - No more spending hours making a simple button look decent
Handle accessibility automatically - WCAG AA contrast checks are built right in
Actually work with themes - Light and dark mode without the headaches
Include the details you always forget - Error states, loading states, proper sizing
Getting started
flutter pub add hux
Or add it to your pubspec.yaml:
dependencies:
hux: ^latest_version
Check out the official documentation for more details.
Wrap your app:
MaterialApp(
theme: HuxTheme.lightTheme,
darkTheme: HuxTheme.darkTheme,
home: YourApp(),
)
Start using components:
HuxButton(
onPressed: _handleSubmit,
isLoading: _isSubmitting,
primaryColor: Colors.blue, // Text color gets calculated automatically
child: Text('Submit'),
)
How Hux UI is different from regular Flutter components
Hux UI takes all the repetitive work out of building Flutter UIs. Instead of writing the same styling and state management code over and over, you get components that handle everything automatically - from loading states to accessibility to theme switching.
Smart defaults that save you time
// This handles loading states, proper sizing, theme changes
HuxButton(
onPressed: () {},
isLoading: true, // Shows spinner automatically, disables button
child: Text('Save'),
)
// vs dealing with this mess every single time:
ElevatedButton(
onPressed: isLoading ? null : () {},
child: isLoading
? SizedBox(width: 20, height: 20, child: CircularProgressIndicator())
: Text('Save'),
)
Accessibility handled automatically
The contrast calculation system automatically picks text colors that people can actually read:
HuxButton(
primaryColor: Color(0xFF1A5F7A), // Dark blue
child: Text('Button'), // Text becomes white for readability
)
HuxButton(
primaryColor: Color(0xFFE8F4F8), // Light blue
child: Text('Button'), // Text becomes black for readability
)
Forms that work properly
Forms that don't make users angry:
HuxTextField(
label: 'Email',
hint: 'Enter your email', // Built in, so you won't forget it
prefixIcon: Icon(Icons.email),
validator: (value) => value?.contains('@') == true ? null : 'Invalid email',
// Error states, focus states, sizing all handled
)
Complete component list
Hux UI comes with everything you need to build professional-looking apps without spending hours on styling. Each component is designed to work seamlessly with the others while handling all the edge cases you typically forget about.
Core components for everyday use
HuxButton - Primary, secondary, outline, ghost styles, auto-contrast, loading states
HuxTextField - Labels, hints, validation, icons, proper error styling
HuxCard - Consistent containers with optional headers and actions
Advanced components for better UX
HuxLoading - Spinners and overlays that match your theme HuxChart - Line and bar charts with proper theming (uses cristalyse under the hood) HuxContextMenu - Right-click menus with smart positioning
Should you use hux UI in your project?
The decision depends on your project needs and development style. Hux UI works best when you want to focus on building features rather than styling components, but it might not be the right fit if you need heavily customized designs.
Perfect for these situations
Good fit if you:
Want to stop rebuilding the same basic components
Care about accessibility but don't want to become a WCAG expert
Need consistent theming across light and dark mode
Ship MVPs regularly and want things to look good by default
Maybe not ideal for these cases
Maybe not if you:
Need heavily customized components with unique behaviors
Already have a comprehensive design system
Prefer building everything from scratch
What makes hux UI technically solid
Hux UI isn't just about convenience - it's built on solid technical foundations. Everything is designed to work with Flutter's latest standards while maintaining performance and accessibility across all devices.
Built on modern Flutter standards
Built on Material 3 foundation. Uses semantic design tokens instead of hardcoded colors. All components use WCAG AA contrast calculations. Theme-aware from the ground up. Minimal dependencies (cristalyse for charts, feather icons, google fonts).
Performance and accessibility first
Every component is optimized for smooth performance and includes built-in accessibility features. This means your app works well for everyone without extra effort on your part.
See hux UI in action - login form example
Here's a login form that would take 30+ minutes to style properly from scratch:
Form(
child: Column(
children: [
HuxTextField(
label: 'Email',
hint: 'Enter your email',
prefixIcon: Icon(FeatherIcons.mail),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value?.isEmpty ?? true) return 'Email required';
if (!value!.contains('@')) return 'Invalid email';
return null;
},
),
SizedBox(height: 16),
HuxTextField(
label: 'Password',
hint: 'Enter your password',
prefixIcon: Icon(FeatherIcons.lock),
obscureText: true,
validator: (value) =>
value?.length ?? 0 < 6 ? 'Password too short' : null,
),
SizedBox(height: 24),
HuxButton(
onPressed: _login,
isLoading: _isLoading,
child: Text('Sign In'),
),
],
),
)
Everything just works: proper spacing, theme changes, error states, loading handling.
Start using hux UI today
The library is small enough to understand quickly but handles enough edge cases that you'll actually save time. Perfect for prototypes, MVPs, or when you just want to focus on your app logic instead of styling buttons for the hundredth time.
flutter pub add hux
What problems do you always run into when building Flutter UIs? Let me know if there are common patterns I should add!
