Skip to main content

Revert `variant` handling in V3

General Feedback

HeroUI is a great library, the best I might say. I’ve been a user for years both on the web and even on desktop with apps like Rclone UI, also joined the PRO membership.

In essence, I love your work, and I want this great relationship to continue ❤️

We have to talk about the new variant handling, specifically about danger. One thing I disliked about all other libraries is they made danger/red as a variant instead of a color. HeroUI V2 handled it best by having it as a color.

btw, shadow variant will be missed too, but I get the reasons to remove it. danger however is a different thing and needs to be looked at imo.

The V3 Chip component has danger as a color prop, as it should. These differences hurt both users and llms.

Thanks

Posted by FTCHD ·
5 comments

Log in to comment and vote

Comments5

  • Junior Garcia

    Team•

    Sep 13, 2025

    Hey @FTCHD thanks for taking the time and for being a loyal user 🙏🏻

    I really appreciate this feedback — we’re discussing it internally. Our goal with v3 is to make things simpler for both agents and humans. We learned this while building heroui.chat: it’s much easier to have direct intent when using semantic variants (e.g. primary, secondary, danger) and giving them a clear meaning:

    Variant

    Purpose

    Usage

    Primary

    Main action to move forward

    1 per context

    Secondary

    Alternative actions

    Multiple allowed

    Tertiary

    Dismissive actions (cancel, skip)

    Use sparingly

    Danger

    Destructive actions

    When needed

    In comparison, v2 had a lot of properties without clear context (e.g. variant = solid/flat/bordered, color = primary/secondary/warning, radius, etc.). That made it harder to know the right combination. Both humans and AI agents needed explicit instructions, which defeated the purpose of semantic awareness.

    That said, we recognize the confusion with Chip, since its color names (primary, success, warning, danger) are also semantic.

    We’re considering removing the color prop entirely and just using variant (primary, secondary, tertiary). This would let you apply any color you want while keeping the semantics clear.

  • FTCHD

    •

    Sep 13, 2025

    Not a big fan of the new variant names in general, they are confusing and you have to remember how each one looked vs bordered or flat.

    I guess the variants now match other UI libs, but that’s precisely why we chose this and not other pkgs.

    • Andres Gonzalez

      •

      Sep 17, 2025

      Hey @FTCHD , thanks for the feedback!

      As you mentioned, in HeroUI v2 you had access to many different style variants (bordered, flat, shadow, solid, etc). While powerful, we often saw this lead to inconsistent UIs when too many variants were mixed in a single project.

      With HeroUI v3, our goal is to simplify and bring more consistency by focusing on three levels of emphasis. Instead of juggling multiple variants, you now only need to define and customize these three levels for your app. This makes the design system more consistent, scalable, and self-descriptive.

      Here’s how the workflow looks in v3:
      Start with three emphasis levels (e.g high = primary actions, medium = secondary, low = subtle/background).
      Customize once in your theme: colors, shadows, borders, etc.
      Apply consistently across components: every button, card, or input inherits this logic automatically.

      This shift is based on the insight that most projects never needed every v2 variant at once. In v3, the focus is on hierarchy, and HeroUI ensures your entire app follows those rules.

      Plus, we’re making a theme builder to make customizing this hierarchy both fast and enjoyable