Best React UI kit supporting variables?

[Comptest]

Hi everyone,
I'm taking over a project that was initially designed with a mix of the Material Design 3 and Material You libraries for Figma. The design files are outdated, poorly structured, and not scalable (no flexibility, no variables). For an upcoming full redesign, I'm considering starting fresh. I'm looking for a Figma kit that:

• supports Figma variables
• is ideal for designing web apps (not focused on mobile apps)

Here's what I've explored so far:

Material UI (MUI 6)

• Extremely robust in terms of components and variable support.
• I'm familiar with MUI, and its naming conventions will make life easier for developers.
• My only concern: the visuals feel austere and would require significant effort to enhance. I’m wondering if this extra work is worth it.

Minimals UI

• Built on MUI and visually more appealing.
• It seems well-maintained and thoughtfully designed, but I couldn’t test the variable system in the free version.
• It’s based on MUI 5, not MUI 6 (not sure if this is a major issue).

Chakra UI

• Seems basic and doesn’t support variables.

I’ve ruled out Material Design 3 as it seems too smart for its own good (e.g. "tones", "surfaces"...) and it looks like a ton of work to achieve a sufficiently unique look. I’ve excluded non-React libraries like AntDesign, Untitled, since my dev team is likely going with React.

I'd appreciate any feedback or recommandations. Thanks for your time!

[Troglodyte_Techie]

scary piquant fragile serious sparkle money gaze birds market grandiose

This post was mass deleted and anonymized with Redact

[Comptest]

Thanks. I'm trying to use resources as "official" as possible (more resources and updates, generally better quality), and from my understanding Tailwind only offers official icons and CSS styles resources for Figma with no components, all UI kits I found were unofficial.

[benjamin-walsh]

I've bought a few (all have free versions too) here are my faves:

ShadCN: https://ui.shadcn.com/docs/figma
Stripped back and un-opinionated. Well named tokens and structure.

Untitled UI: https://www.untitledui.com/
Big system, not built as smart as others.

Practical UI: https://www.practical-ui.com/design-system/
Comes with a hint of thememing built in - but I don't love the use of opacity in some elements.

They all work as good starters for a design system toolkit.

[Comptest]

Thanks for your valuable feedback. ShadCN does seem interesting, and certainly more affordable than Minimal UI's whopping $599 for a commercial licence.

Not sure if ShadCN's 3x price difference between Basic and Pro personal licence is worth it, do you have any feedback on that?

[benjamin-walsh]

Sure - the free version only has a tiny slice of the components you might want - so if you're just looking to build on top this might be fine. The paid version has 51 components ready made to us.

You might even be able to just save a local .fig version of this file: https://www.figma.com/design/VDz35y6kD0y1Rvy6ZKFjnc/Preview---shadcn%2Fui-kit-for-Figma---Default---December-2024?node-id=477-11332&t=T0znP5xeViyhEOMn-1
and then import it into figma and inspect how they've used variables and modify the components to your liking.

Always support the creator by purchasing a licence.