Skip to content

Latest commit

 

History

History
153 lines (105 loc) · 3.95 KB

README.md

File metadata and controls

153 lines (105 loc) · 3.95 KB

Zynk UI

Zynk UI is a Open-Source modern, minimalist UI component library built with Next.js, Tailwind CSS, and Framer Motion, designed to help developers build stunning web applications effortlessly.

Zynk UI Hero

🚀 Features

  • 🔥 Modern UI Components – Ready-to-use, beautifully designed components.
  • 🎨 Tailwind CSS – Fully responsive with utility-first styling.
  • 🌀 Framer Motion – Smooth animations and interactions.
  • ⚡ Next.js Optimization – Fast, server-rendered components.
  • 📄 Easy Copy-Paste Usage – No extra dependencies or installation required.

📖 Documentation

Check out our full documentation here: Zynk UI Docs

📦 Installation

Zynk UI doesn't require any npm package installation. Simply copy and paste components into your Next.js project.

1. Clone the Repository

git clone https://github.com/Graphfied/Zynk-UI.git
cd zynk-ui

2. Install Dependencies

npm install

3. Start the Development Server

npm run dev

🛠 Usage

To use any Zynk UI component, simply import and add it to your Next.js project.

import Button from '@/components/ui/Button';

export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Button />
    </div>
  );
}

🧩 Available Components

Component Description
Button A responsive animated button
3D Card Effect Eye-catching 3D hover effect card
GitHub Contribution Graph Visualize GitHub contributions beautifully
Hero Section A stunning hero section for landing pages
Testimonials Carousel Auto-sliding customer testimonial carousel
Discord Profile Card A beautifully designed Discord-like profile card

📂 Project Structure

zynk-ui/
│-- app/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Button.tsx
│   │   │   ├── CardEffect.tsx
│   │   │   ├── GitHubGraph.tsx
│   │   │   ├── HeroSection.tsx
│   │   │   ├── TestimonialsCarousel.tsx
│   │   │   ├── DiscordProfileCard.tsx
│   │   ├── header.tsx
│   ├── pages/
│   │   ├── index.tsx
│   │   ├── doc.tsx
│   ├── styles/
│   │   ├── globals.css
│   ├── public/
│   ├── next.config.js
│   ├── tailwind.config.js
│-- README.md
│-- package.json
│-- tsconfig.json

🌟 Screenshots

Hero Section Components Page
Hero Components

👥 Contributing

We welcome contributions to enhance Zynk UI! If you'd like to contribute, please follow these steps:

  1. Fork the repo and clone it locally.
  2. Create a new branch for your feature.
  3. Commit your changes and push the branch.
  4. Submit a pull request.

📧 Support

If you encounter any issues or have any questions, feel free to open an issue or contact us via:

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Show Your Support

If you find Zynk UI helpful, please give us a star ⭐ on GitHub and share it with your community.

Made with ❤️ by the Zynk UI Team