https://github.com/saikothasan/kinetic-ui
An open-source library of animated, interactive, and customizable React components.
https://github.com/saikothasan/kinetic-ui
animation-css animations framer-motion react react-animations react-components treejs
Last synced: about 2 months ago
JSON representation
An open-source library of animated, interactive, and customizable React components.
- Host: GitHub
- URL: https://github.com/saikothasan/kinetic-ui
- Owner: saikothasan
- Created: 2025-08-08T17:12:32.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-08T18:52:42.000Z (10 months ago)
- Last Synced: 2025-08-08T20:49:46.848Z (10 months ago)
- Topics: animation-css, animations, framer-motion, react, react-animations, react-components, treejs
- Language: TypeScript
- Homepage: https://kineticui.vercel.app/
- Size: 4.85 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kinetic UI
[](https://opensource.org/licenses/MIT)
[](https://nextjs.org/)
[](https://react.dev/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://www.framer.com/motion/)
**Kinetic UI** is a modern, open-source library of 100+ animated, interactive, and customizable React components, built with the latest web technologies. It's designed for developers who want to add flair and delight to their web applications with minimal effort.
## ✨ Features
- **Extensive Component Library**: Over 100 components, from buttons and cards to complex backgrounds and interactive effects.
- **Animation-First**: Built with Framer Motion for smooth, performant, and beautiful animations.
- **Highly Customizable**: Easily tweak props, colors, and styles to fit your brand.
- **Live Previews**: Interact with components and see your changes in real-time in the documentation.
- **Code at your Fingertips**: One-click copy-to-clipboard for every component.
- **Developer-Centric**: Built with Next.js 15, React 19, and TypeScript for a best-in-class developer experience.
- **Dark Mode as Default**: A sleek, modern dark theme that's easy on the eyes.
- **Fully Responsive**: Components are designed to work beautifully on all screen sizes.
- **Search & Filtering**: Quickly find the component you need with a powerful command palette and category filters.
## 🚀 Tech Stack
- **Framework**: [Next.js 15.3+](https://nextjs.org/) (with App Router)
- **Language**: [TypeScript 5.6+](https://www.typescriptlang.org/)
- **UI Library**: [React 19](https://react.dev/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **Animation**: [Framer Motion](https://www.framer.com/motion/)
- **Icons**: [Lucide React](https://lucide.dev/)
- **Deployment**: [Vercel](https://vercel.com/)
## 🏁 Getting Started
To get a local copy up and running, follow these simple steps.
### Prerequisites
- Node.js (v18.17 or later)
- npm, yarn, or pnpm
### Installation
1. Clone the repository:
```sh
git clone https://github.com/saikothasan/Kinetic-UI.git
```
2. Navigate to the project directory:
```sh
cd kinetic-ui
```
3. Install dependencies:
```sh
npm install
```
4. Run the development server:
```sh
npm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 📂 Project Structure
The project follows a standard Next.js App Router structure, with components organized for clarity and scalability.
```
src/
├── app/
│ ├── (main)/ # Main application routes
│ │ ├── components/
│ │ │ └── [slug]/
│ │ │ └── page.tsx # Component detail page
│ │ └── page.tsx # Homepage
│ ├── globals.css
│ └── layout.tsx # Root layout
├── components/
│ ├── library/ # Individual React components
│ ├── ui/ # shadcn/ui components
│ └── ... # Other shared UI components
├── data/
│ ├── components/ # Data, code, and props for each library component
│ └── types.ts # TypeScript types
└── lib/
├── hooks/ # Custom React hooks
└── utils.ts # Utility functions
```
## 🤝 Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📜 License
Distributed under the MIT License. See `LICENSE` for more information.