Harjot Singh Rana Log
Project

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.

Zyflo screenshot

Key Features

Variety of animated and interactive UI components

Easy-to-use and customizable components with pre-defined variants

Responsive and accessible design

Integration with Next.js and React projects

Comprehensive documentation with live examples

Support for dark mode (in progress)

Built-in search functionality for documentation (in progress)

CLI tool for easy component integration (in progress)

My Contribution

Developed a comprehensive animated UI library with various interactive components for React and Next.js applications.

Implemented a documentation site using Contentlayer and MDX for easy component usage and customization.

Created a variety of animated components including Navbar, Alert, Badge, Link Embed, Liquid Button, Animated Background, and more.

Designed and implemented a responsive and accessible UI using Tailwind CSS and custom components.

Integrated Framer Motion for smooth and customizable animations across components.

Developed a CLI tool (in progress) to help users easily integrate Zyflo components into their projects.

Implemented a configuration system allowing users to customize component variants and styles.

Created detailed documentation and examples for each component to facilitate easy adoption and usage.

Technical Implementation

This project showcases modern web development practices and cutting-edge technologies to deliver a robust, scalable, and user-friendly solution.

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

Project Type

Personal Project

Status

Live & Maintained

Harjot Singh Rana