Meet Hux UI: The Flutter library I wish I had a year ago

You know that feeling when you're building something and you keep thinking "there has to be a better way to do this"? That's exactly how Hux UI was born.

After spending way too much time recreating the same buttons, cards, and input fields across different projects (and watching them get implemented differently each time), I decided to build the component library I actually wanted to use.

What's Inside

Hux UI isn't trying to be everything to everyone. It's a focused set of components that cover the stuff you use every day, but done really well.

HuxButtons

I got tired of recreating the same button variations everywhere, so I built four that cover most use cases: primary, secondary, outline, and ghost. Three sizes that actually make sense together.

The thing I'm proudest of is the loading state handling. Instead of having to conditionally render spinners and disable buttons manually, you just flip the isLoading parameter and it handles everything. And when you use custom colors, the contrast calculation system I built automatically figures out whether to use white or black text so your buttons stay readable.

HuxCards

I built these because I was constantly rebuilding the same container pattern. Clean borders, consistent padding, optional headers and subtitles. If you need an action button in the corner, there's a spot for it. You can make them tappable or just use them as containers. The styling stays consistent whether you're in light or dark mode.

HuxTextField

I got tired of shipping text fields and then realizing during testing that we forgot to add hints or proper error states. Now they're built in by default, so you won't forget them. Labels, validation, icons, different sizes - all the stuff you end up needing anyway, but available from the start. The whole thing adapts to your theme automatically.

HuxLoading

Loading states are one of those things that seem simple until you have to implement them everywhere. I built a few different options: small spinners for inline use, and a full overlay component for when you need to block the whole screen. They all use the same design language and handle the edge cases properly.

HuxChart

Built on cristalyse for the heavy lifting, but wrapped in Hux styling. Line charts, bar charts, with titles and proper theming. Your data should look as good as the rest of your app.

HuxContextMenu

I added these because proper right-click interactions make apps feel more professional. The positioning is smart enough to avoid going off-screen, and I made sure they work properly on web (disabling the browser's default context menu). It's one of those details that users notice when it's missing.

The Theme System

This is where I got a bit obsessed. Every component uses semantic design tokens that adapt to light and dark mode. No hardcoded colors, no "oops this looks terrible in dark mode" surprises.

The color system follows design best practices: primitive colors separate from semantic tokens. Your primary brand color can be anything, and everything else adjusts accordingly.

Why I built it this way

I wanted components that are:

• Consistent: They all feel like they belong together

• Accessible: WCAG AA compliance isn't optional

• Themeable: Light and dark mode should just work

• Practical: Built for real projects, not just demos

Getting Started

flutter pub add hux

Then wrap your app with the theme:

MaterialApp(
  theme: HuxTheme.lightTheme,
  darkTheme: HuxTheme.darkTheme,
  // your app here
)

And start using components:

HuxButton(
  onPressed: () => print('Hello'),
  child: Text('Click me'),
)

The Real Talk

This isn't a massive design system with 47 different button variants and components for every edge case. It's the components you actually use, built really well.

I'm using it in my own projects, which means it has to work in the real world, not just in demos. Every component gets battle-tested, and accessibility isn't something I tacked on at the end.

If you're tired of rebuilding the same components over and over, or if you just want something that looks good out of the box, give it a shot.

It's open source, available on pub.dev, and hopefully saves you some time so you can focus on the stuff that actually makes your app unique.

---

Check out Hux UI on pub.dev or the GitHub repo to get started.