Roughness alternatives
24 sites that do what Roughness does, side by side. All hand-picked Design Systems kits.
Comparing againstRoughness
A hand-drawn Vue component library built on Rough.js — a rare full set in this style for Vue.
Open page →| Site | Get code | Price | Saves |
|---|---|---|---|
| RoughnessThis one | npm | Free | |
 even-toolkitReact | npm | Free | |
 Fuji UIReact | npm | Free | |
 AfterglowReact, shadcn/ui, Base UI | Registry | Free | |
 Twenty UIReact | npm | Free | |
 Plane UIReact, Tailwind CSS | Copy | Free | |
 Polar UIReact, Tailwind CSS | npm | Free | |
 Unkey UIReact, Tailwind CSS | Copy | Free | |
 Midday UIReact, shadcn/ui | Copy | Free | |
 Dub UIReact, Tailwind CSS | npm | Free | |
 WedgesReact, Radix UI, Tailwind CSS | npm | Free | |
 Primer BrandReact | npm | Free | |
 Animal Island VueVue | npm | Free | |
 PaperCSSCSS | npm | Free | |
 Welcome UIReact, Tailwind CSS | npm | Free | |
 Functional UI KitReact, Figma | npm | Free | |
 Framework7JavaScript, React, Vue, Svelte | npm | Free | |
 BoardUIReact, Tailwind CSS, React Aria | Registry | Free | |
 Lobe UIReact, antd-style | npm | Free | |
 Meta AstryxReact, StyleX | npm | Free | |
 MUI (Material UI)React, Emotion | npm | Free | |
 KumoReact, Tailwind CSS, Base UI | npm | Free | |
 Animal Island UIReact, TypeScript | npm | Free | |
 Untitled UI ReactReact, Tailwind CSS, React Aria | Registry | Free | |
 HeroUIReact, Tailwind CSS, React Aria | npm | Free |
About Design Systems libraries
A design system is more than a component set: it comes with tokens for color, type and spacing, theming, and rules for how parts fit together. Choose one when you want the whole product to feel consistent without designing every piece yourself.
Good for
- Products that need one consistent look
- Theming and dark mode
- Teams sharing one set of components
