https://github.com/koxone/components-react-tailwind
A modern React + Tailwind component library with beautiful, ready-to-use animations and effects. Includes buttons, text animations, cards, inputs, and toggles designed for quick integration into your projects.
https://github.com/koxone/components-react-tailwind
component-library javascript library react tailwind tailwindcss
Last synced: 12 months ago
JSON representation
A modern React + Tailwind component library with beautiful, ready-to-use animations and effects. Includes buttons, text animations, cards, inputs, and toggles designed for quick integration into your projects.
- Host: GitHub
- URL: https://github.com/koxone/components-react-tailwind
- Owner: Koxone
- Created: 2025-06-27T21:38:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-05T23:21:59.000Z (12 months ago)
- Last Synced: 2025-07-06T00:24:44.088Z (12 months ago)
- Topics: component-library, javascript, library, react, tailwind, tailwindcss
- Language: JavaScript
- Homepage: https://components.koxland.dev/
- Size: 9.34 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 👥 Contributors
- [Koxone](https://github.com/Koxone) – Creator and maintainer
- [BytePudding](https://github.com/puddingForever) – Contributor
# ✨ Components Library – React + Tailwind CSS
A **modern component library** built with **React**, **Tailwind CSS**, and **Vite**, featuring a clean UI, smooth animations, and modular structure for learning, showcasing, and reusing frontend components in your projects.
Live Demo: [components.koxland.dev](https://components.koxland.dev)
---
## 🚀 Features
- 🎨 **Over 80 reusable components** (buttons, toggles, text effects, inputs, cards, and more)
- 🌀 **Smooth animations** and hover effects with Tailwind and custom CSS
- 🌗 **Dark mode** support
- 🗂️ Organized and scalable folder structure
- 📱 **Fully responsive** design
- ⚡ **Instant preview** with Vite
- 📝 Includes **code snippets**, Tailwind config, and global CSS for each component
---
## 🛠️ Technologies Used
- **React** – Component structure and rendering
- **Tailwind CSS** – Utility-first styling
- **Vite** – Fast build and hot-reload environment
- **Custom CSS** – For advanced animations and effects
- **React Router** – Seamless navigation between components
---
## 📦 Installation
1️⃣ **Clone the repository:**
```bash
git clone https://github.com/Koxone/Components-React-Tailwind.git
cd Components-React-Tailwind
```
2️⃣ **Install dependencies:**
```bash
npm install
```
3️⃣ **Run the development server:**
```bash
npm run dev
```
4️⃣ Open in your browser:
```
http://localhost:5173
```
---
## 🗂️ Project Structure
```
Components-React-Tailwind/
├── public/ # Static assets
├── src/
│ ├── components/ # Main React components
│ │ ├── cards/
│ │ ├── buttons/
│ │ ├── inputs/
│ │ ├── toggles/
│ │ └── text/
│ ├── data/ # ComponentsData for dynamic routing
│ ├── App.jsx # Main app structure
│ ├── main.jsx # Entry point
│ └── styles.css # Tailwind and global styles
├── tailwind.config.js # Tailwind configuration
└── vite.config.js # Vite configuration
```
---
## ⚡ Live Demo
Check out the live, interactive demo at:
👉 [components.koxland.dev](https://components.koxland.dev)
---
## 💡 Usage
- Explore available components by category.
- Click on any component to view a live preview.
- Copy ready-to-use **React code**, **Tailwind config**, and **CSS snippets** for quick integration into your projects.
This library is designed to **accelerate your workflow**, inspire your projects, and serve as a learning reference for **React + Tailwind UI patterns**.
---
## 🎯 Roadmap
- [x] Add interactive demo for each component
- [x] Include code snippets for Tailwind config and CSS
- [x] Add dark mode
- [x] Add "copy to clipboard" functionality on code snippets
- [ ] Add filter and search by component type
- [ ] Export as a reusable npm package for projects
---
## 📄 License
MIT License – Free to use, modify, and distribute.
---
## ✨ Credits
Developed with ❤️ by [Koxone](https://github.com/Koxone).
Pull requests and feedback are welcome to improve the project and help others learn.