SmoothUI

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

• Features
• Installation
• Usage
• Components
• Contributing
• License

Features

• Modern Design System: A cohesive and contemporary design language with a new mascot called Smoothy
• Smooth Animations: Built-in animations powered by Motion for delightful user experiences
• Responsive Design: Fully responsive components designed with Tailwind CSS
• Dark Mode Support: Components support both light and dark themes out of the box
• Color Customization: Dynamic color switcher for easy theme customization
• Documentation: Comprehensive documentation with props, examples, and usage guidelines
• Accessibility: Enhanced accessibility features across all components
• TypeScript Support: Full TypeScript support with type definitions
• Easy Integration: Simple API for integrating components into your projects

Installation

To use SmoothUI components in your project, install the required dependencies:

pnpm add motion tailwindcss lucide-react clsx tailwind-merge

Usage

Import and use SmoothUI components in your React application:

import { ComponentName } from "@/components/smoothui/ui/ComponentName";

const App = () => {
  return (
    <div>
      <ComponentName />
    </div>
  );
};

export default App;

Components

SmoothUI offers a variety of components, including:

• Basic Components

  • Accordion
  • Avatar
  • Button
  • Card
  • Input
  • Tooltip
  • And more...

• Advanced Components

  • Dynamic Island
  • Animated Tags
  • Apple Invites
  • Expandable Cards
  • Number Flow
  • Social Selector
  • And many more...

Visit our documentation for a complete list of components and their usage.

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Install dependencies: pnpm install
4. Make your changes
5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to the branch: git push origin feature/amazing-feature
7. Open a Pull Request

For detailed guidelines, please read our CONTRIBUTING.md.

License

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

---

Website | Documentation | GitHub

Built with ❤️ by @educalvolpz