Web Development · June 5, 2025 · 1 min read
Ui-Hatch: Searchable UI Component Library
Next.jsShadcnTypeScriptTailwind CSSFumadocs
The Vision
Good UI shouldn't be hard to find. While libraries like Radix and Shadcn provide the primitives, I often found myself rebuilding the same "Hero Section" or "Feature Grid" patterns across different projects. Ui-Hatch is my personal "vault" of these high-level components.
Features
- Live Previews: See exactly how a component looks and behaves before you copy the code.
- Full Documentation: Powered by Fumadocs, providing a premium, searchable experience for every component.
- One-Click Copy: Get the raw code instantly.
- Themed for Modernity: Every component is designed with a focus on rich aesthetics—glassmorphism, subtle animations, and premium typography.
Technical Stack
- Framework: Next.js 15
- Docs Engine: Fumadocs for the technical writing experience.
- Styling: Tailwind CSS + Framer Motion for animations.
- Primitives: Radix UI.
Why I Built It
Ui-Hatch serves as both a playground for my design ideas and a productivity booster. By documenting my own patterns, I ensure that my design language remains consistent across all 15+ products I've shipped. It’s about building a system that scales with my creativity.