Hello, dear reader! I hope you’re doing well.
This material was written by a developer who’s tired of being mistaken for a designer just because they build web interfaces.
Here you’ll find fonts, component libraries, icon packs, and other tools to make your UI development easier, more creative, and—who knows?—maybe even elegant.
The goal is to be a source of inspiration and a guide for anyone feeling lost or wanting to break free from the classic component libraries.
If you want to contribute, share your wisdom, or suggest something new, feel free!
I hope this material helps you and motivates you to build the UI you’ve always wanted!
Note: The sections are organized by design style. I suggest you look up visual references for each one before choosing what fits your needs. This way, it’s easier to find the style that truly matches your project!
UI libraries and resources with that “sketchy,” hand-drawn vibe — perfect for making your project feel playful, human, and unique.
- **Rough.js:** Draw graphics and UI elements with a sketchy, hand-drawn look.
- **Doodle CSS:** A CSS framework that makes your HTML look like it’s been doodled in a notebook.
- **react-rough-notation:** Annotate your React apps with sketchy underlines, boxes, and highlights.
- **Blush.design:** Customizable hand-drawn illustrations for your apps and sites.
- **Feather Icons Hand-Drawn:** Feather icons with a hand-drawn twist.
- **Open Doodles:** Open-source doodle-style illustrations (great for backgrounds and hero sections).
- **Lucide Hand-drawn:** Some packs/themes have sketchy styles.
Component libraries and resources with bold colors, thick borders, heavy shadows, and geometric shapes. Neo-brutalism is all about breaking the rules and standing out.
- **shadcn/ui:** Headless, highly customizable UI components — perfect for building bold, brutalist layouts with Tailwind CSS.
- **DaisyUI:** Easy-to-customize Tailwind CSS component library with themes (cyberpunk and retro themes fit brutalism).
- **Radix UI:** Unstyled primitives for building accessible, custom UIs with a bold look.
- **Mantine:** Flexible component library, easy to style for bold, modern UIs.
- **Phosphor Icons:** Bold, geometric, and versatile icon set.
- **Lucide:** Thick, bold, highly customizable icon set (great for brutalist UIs).
- **Heroicons:** Strong, outline and solid icons that work well with heavy borders and high-contrast styles.
Soft, frosted-glass effects and blurred backgrounds for a modern, clean, and futuristic vibe.
- **Glass UI Kit:** Free glassmorphism UI kit for Figma, with inspiration and code.
- **React Neumorphism UI:** Also supports glassmorphic styles for React.
- **Remix Icon:** Versatile, modern icons that look great with glass effects.
- **Feather Icons:** Thin, minimal icons for subtle glassmorphism UIs.
Soft shadows and highlights, “chiclet” buttons, and a tactile, 3D feel. Neumorphism is subtle, clean, and modern.
- **Neumorphism.io:** Neumorphism CSS generator for quick prototyping.
- **React Neumorphic:** React components styled with soft, realistic shadows.
- **Flat Icon:** Huge icon library, with many sets matching neumorphic styles.
- **Iconoir:** Rounded, simple icons that pair well with neumorphism.
Pixel, old-school, and nostalgic web vibes. Perfect for sites inspired by Windows 95, arcade games, or web 1.0.
- **98.css:** Pure CSS library for Windows 98-style UIs.
- **Retro.css:** CSS framework for 80s/90s website aesthetics.
- **Pixelart Icons:** Open source pixel-style icons.
- **Icons8 Dotted:** Retro pixel icons.
- **Font Awesome:** Has plenty of retro/vintage icons.
Clean, modern, “less is more” interface libraries, fonts, and icons.
- **Chakra UI:** Accessible React components, super easy to style for minimal UIs.
- **Evergreen:** React components for modern web apps, focusing on simplicity.
- **Mantine:** Flexible and easy to customize for clean, minimalist interfaces.
- **Tailwind UI:** Paid UI kit for Tailwind CSS, but with lots of minimal, elegant components.
- **Heroicons:** Minimal, simple icons (outline and solid).
- **Tabler Icons:** Open source icons with a clean style.
- **Feather Icons:** Clean, outline icons for minimal UIs.