# Zyflo - Harjot Singh Rana

Canonical URL: https://www.harjotrana.com/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.

## Links

- GitHub: https://github.com/HarjjotSinghh/zyflo
- Live: https://zyflo.vercel.app
- Demo: https://www.youtube.com/watch?v=ndB0QN0nQ08

## Stack

Next.js, React, TypeScript, Tailwind CSS, ShadcnUI, MDX, Framer Motion, Contentlayer

## What 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)

All projects: https://www.harjotrana.com/projects

---

Site guide for agents: https://www.harjotrana.com/llms.txt · Full site as Markdown: https://www.harjotrana.com/llms-full.txt · Sitemap: https://www.harjotrana.com/sitemap.xml · Developer resources: https://www.harjotrana.com/developers