MotionUI

MotionUI is a project that provides a collection of beautifully designed, animated, and accessible UI components built with Next.js, Tailwind CSS, and Framer Motion. It's designed to help developers quickly and easily build modern and visually appealing user interfaces.

Live Demo

Link to the live demo

Features

• Animated Components: A rich set of UI components with smooth animations powered by Framer Motion.
• Customizable: Easily customize the components to fit your project's design system.
• Accessible: The components are built with accessibility in mind, following WAI-ARIA standards.
• Responsive: The components are designed to work seamlessly across all devices and screen sizes.
• Dark Mode: Built-in support for dark mode.
• Developer-Friendly: The components are easy to use and integrate into any Next.js project.

Technologies Used

• Next.js - A React framework for building server-side rendered and static web applications.
• Tailwind CSS - A utility-first CSS framework for rapid UI development.
• Framer Motion - A React library for creating animations.
• Heroicons - A set of free, high-quality SVG icons.
• Lucide React - A library of simply beautiful open-source icons.
• Radix UI - A collection of unstyled, accessible, and customizable UI primitives.
• Vercel Analytics - for audience insights.

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18.x or later)
• npm or yarn

Installation

1. Clone the repo

git clone https://github.com/2003nayan/MotionUI.git

2. Install NPM packages

npm install

3. Run the development server

npm run dev

Open http://localhost:3000 with your browser to see the result.

Folder Structure

The project follows a standard Next.js folder structure with a few additions:

.
├── app
│   ├── (pages)
│   │   ├── components
│   │   └── ...
│   ├── components
│   └── ...
├── components
│   └── ui
├── lib
├── public
└── ...

• app: The main application folder, containing the pages and components.
• app/(pages): Contains the different pages of the application.
• app/components: Contains the reusable components used throughout the application.
• components/ui: Contains the UI components from shadcn/ui.
• lib: Contains the utility functions.
• public: Contains the static assets like images and fonts.

Components

MotionUI offers a wide range of components, including:

• Alerts
• Avatars
• Banners
• Buttons
• Cards
• Contact Sections
• Context Menu
• CTAs
• Feature Sections
• Footers
• Heroes
• Inputs
• Logo Grid
• Modals
• Navbars
• Newsletter Sections
• Paginations
• Pricing Sections
• Radio Groups
• Section Headers
• Select Menus
• Stats
• Tables
• Team Sections
• Testimonials

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.

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.

Deployment

This application is deployed at this url: https://motion-ui-eight.vercel.app