Harjot Singh Rana
Full-Stack & AI Product Engineer
All projects
Zyflo
Zyflo is an animated UI library that offers React components for building beautiful and accessible web applications. It emphasizes flow and continuity, allowing developers to create eye-catching, responsive experiences with ease.
Stack
Next.jsReactTypeScriptTailwind CSSShadcnUIMDXFramer MotionContentlayerWhat I built
- Built an animated React/Next.js UI library with interactive components.
- Shipped MDX + Contentlayer docs for usage, variants, and examples.
- Authored components: Navbar, Alert, Badge, Link Embed, Liquid Button, more.
- Designed accessible, responsive UI with Tailwind and custom primitives.
- Integrated Framer Motion for consistent, configurable motion.
- Started a CLI to scaffold Zyflo components into consumer projects.
- Added a config system for component variants and style tokens.
- Wrote per-component docs and live examples to speed adoption.
Key features
- Animated, interactive React UI components
- Customizable components with pre-defined variants
- Responsive and accessible design defaults
- First-class Next.js and React integration
- Docs site with live component examples
- Dark mode support (in progress)
- Docs search (in progress)
- CLI for component scaffolding (in progress)