Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/educlopez/smoothui
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion
https://github.com/educlopez/smoothui
animation framer-motion motion nextjs react tailwindcss
Last synced: about 16 hours ago
JSON representation
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion
- Host: GitHub
- URL: https://github.com/educlopez/smoothui
- Owner: educlopez
- License: mit
- Created: 2024-07-03T15:32:46.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-12T20:15:56.000Z (about 17 hours ago)
- Last Synced: 2025-02-12T21:26:28.614Z (about 16 hours ago)
- Topics: animation, framer-motion, motion, nextjs, react, tailwindcss
- Language: TypeScript
- Homepage: https://smoothui.dev
- Size: 9.82 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# SmoothUI
[](https://actions-badge.atrox.dev/educlopez/smoothui/goto?ref=main)
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion. This project aims to provide developers with a set of reusable UI components that enhance user experience through delightful animations and modern design patterns.
## Table of Contents
- [SmoothUI](#smoothui)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Smooth Animations**: Built-in animations powered by Motion for delightful user experiences.
- **Responsive Design**: Fully responsive components designed with Tailwind CSS.
- **Easy to Use**: Simple API for integrating components into your projects.
- **Customizable**: Tailwind CSS utility classes allow for easy customization of styles.
- **Dark Mode Support**: Components support both light and dark themes out of the box.
## Installation
To use SmoothUI components, you will need to install the following dependencies:
```bash
pnpm install motion tailwindcss lucide-react clsx tailwind-merge
```
## Usage
After installing the dependencies, you can start using SmoothUI components in your React application. Here’s an example of how to use a component:
```typescript
import MyNewComponent from "@/app/doc/_components/ui/MyNewComponent";
const App = () => {
return (
);
};
export default App;
```
## Contributing
Thank you for your interest in contributing to SmoothUI! Please follow these steps to contribute:
1. **Fork the Repository**: Click the "Fork" button in the top right corner of the page.
2. **Clone Your Fork**: Run the following command to clone your forked repository to your local machine:
```bash
git clone https://github.com/yourusername/smoothui.git
```
3. **Create a New Branch**: Create a new branch for your feature or bug fix:
```bash
git checkout -b my-feature
```
4. **Make Your Changes**: Implement your changes and commit them with a descriptive message:
```bash
git commit -m "Add my feature"
```
5. **Push Your Changes**: Push your changes to your forked repository:
```bash
git push origin my-feature
```
6. **Create a Pull Request**: Go to the original SmoothUI repository on GitHub and click on the "Pull Requests" tab. Click the "New Pull Request" button and select your forked repository and branch.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---
Thank you for contributing to SmoothUI! We appreciate your help in making this project better. If you have any questions, feel free to reach out to the maintainers.