https://github.com/harjjotsinghh/zyflo
Make every element in your UI flow together beautifully with Zyflo.
https://github.com/harjjotsinghh/zyflo
components-library components-react hacktoberfest hacktoberfest-accepted nextjs react reactjs shadcn shadcn-ui ui ui-components
Last synced: about 1 year ago
JSON representation
Make every element in your UI flow together beautifully with Zyflo.
- Host: GitHub
- URL: https://github.com/harjjotsinghh/zyflo
- Owner: HarjjotSinghh
- License: other
- Created: 2024-08-15T12:11:08.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-07T08:56:48.000Z (over 1 year ago)
- Last Synced: 2024-11-07T09:43:08.902Z (over 1 year ago)
- Topics: components-library, components-react, hacktoberfest, hacktoberfest-accepted, nextjs, react, reactjs, shadcn, shadcn-ui, ui, ui-components
- Language: TypeScript
- Homepage: https://zyflo.co
- Size: 66.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
## [![CC BY-NC 4.0][cc-by-nc-shield]][cc-by-nc]
[cc-by-nc]: LICENSE
[cc-by-nc-image]: https://licensebuttons.net/l/by-nc/4.0/88x31.png
[cc-by-nc-shield]: https://img.shields.io/badge/License-CC%20BY--NC%204.0-lightgrey.svg
## Introduction
Zyflo is an animated UI library which offers React components for building beautiful and accessible web applications. Zyflo puts an emphasis on flow and continuity, allowing developers to build eye-catching, responsive experiences with ease. Zyflo lets you create anything from intricate animations to simple effects in no time — all while integrating perfectly with your existing projects and making user engagement better than ever without clunky performance downgrades. Make every element in your UI flow together beautifully with Zyflo.
## Table of Contents
- [Introduction](#introduction)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Tech Stack](#tech-stack)
- [Use Cases](#use-cases)
- [Contribute](#contribute)
## Installation
### Local Setup
1. Clone the repository:
```sh
git clone https://github.com/HarjjotSinghh/Zyflo.git
cd Zyflo
```
2. Install dependencies:
```sh
bun install
```
3. Start the development server:
```sh
bun dev
```
## Tech Stack
- **Next.js**: A React framework for building server-side rendered and static web applications.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **Radix UI**: A set of accessible, unstyled UI components for building high-quality design systems and web apps.
- **Shadcn UI**: A library for building accessible, component-based UI.
- **Framer Motion**: A library for creating animations and gestures for React components.
- **Contentlayer**: A content management framework for transforming and validating content using MDX.
- **MDX**: A format that lets you seamlessly write JSX in your Markdown documents.
- **Shiki**: A syntax highlighter that uses TextMate grammar and themes.
- **rehype-pretty-code**: A plugin for beautiful code blocks with syntax highlighting.
- **Vercel**: A web development platform that offers hosting and serverless functions.
## Use Cases
Here are the use cases for the Zyflo UI library:
### Web Design / Prototyping
- Create visually appealing web design mockups or prototypes.
- Use Zyflo components as placeholders in web design mockups.
### Interactive Web Applications
- Build interactive and responsive web applications with smooth animations.
- Enhance user engagement with fluid UI elements.
### Dashboard and Admin Panels
- Develop feature-rich dashboards and admin panels with customizable components.
- Integrate Zyflo components for better data visualization and user interaction.
### E-commerce Websites
- Create attractive product listings and interactive shopping experiences.
- Use Zyflo components to improve the overall user experience.
### Marketing and Landing Pages
- Design eye-catching marketing and landing pages with animated elements.
- Increase conversion rates with engaging UI components.
## Contribute
We welcome contributions! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) for more details on how to contribute to this project.