Welcome to AestheticHub, a modern frontend library designed to provide prebuilt UI components for React applications. This project aims to help developers speed up UI development by offering ready-to-use, customizable components built with the latest frontend technologies, including Tailwind CSS, Material-UI (MUI), Radix UI, and more.
With AestheticHub, you no longer need to start from scratch or spend hours designing and coding UI elements. Instead, you can focus on building amazing applications with a seamless user experience.
- 🏗 100+ Prebuilt Components – Ready-to-use components for various use cases.
- 🎨 Supports Multiple UI Libraries – Tailwind CSS, MUI, ShadCN, Radix UI, and more.
- ⚡ Optimized for Performance – Efficient, lightweight, and production-ready.
- 🌙 Dark Mode Support – Built-in dark mode compatibility.
- 🔌 Plug & Play – Import, customize, and integrate with ease.
- 🛠 Developer-Friendly – Well-structured codebase, easy to extend and modify.
- React 18 – Modern React with hooks and functional components.
- Tailwind CSS – A utility-first CSS framework for rapid UI development.
- Material-UI (MUI) / ShadCN – A powerful UI component library.
- Framer Motion – Smooth animations and transitions.
- React Icons / Lucide Icons – A collection of high-quality icons.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the TS template to integrate TypeScript and typescript-eslint in your project.
Make sure you have the following installed:
Clone the repository and install the dependencies:
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
npm install
# or
yarn installStart the development server with hot module replacement:
npm run dev
# or
yarn devBuild the application for production:
npm run build
# or
yarn buildPreview the production build locally:
npm run serve
# or
yarn serveyour-repo-name/
├── public/ # Static assets
├── src/ # Source code
│ ├── assets/ # Assets like images, fonts, etc.
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── App.jsx # Main App component
│ ├── main.jsx # Entry point
│ └── ... # Other files
├── .eslintrc.js # ESLint configuration
├── vite.config.js # Vite configuration
├── package.json # Project metadata and scripts
└── README.md # Project documentation
In the project directory, you can run:
npm run devoryarn dev: Runs the app in the development mode.npm run buildoryarn build: Builds the app for production.npm run serveoryarn serve: Serves the production build locally.npm run lintoryarn lint: Lints the codebase using ESLint.
- Fast Refresh: Instant feedback on edits with hot module replacement.
- ESLint: Linting for maintaining code quality.
- Production Build: Optimized build for production deployment.
- Static Assets: Easy management of static assets like images and fonts.
- React: A JavaScript library for building user interfaces.
- Vite: A build tool that provides a fast development environment.
- ESLint: A tool for identifying and fixing problems in JavaScript code.
- Babel/SWC: JavaScript compilers for transforming code.
-
Port Already in Use: If the development server fails to start because the port is already in use, you can specify a different port by running:
npm run dev -- --port 3001 # or yarn dev --port 3001 -
Module Not Found: If you encounter a "module not found" error, make sure all dependencies are installed correctly by running:
npm install # or yarn install
To learn more about React and Vite, check out the following resources:
If you have suggestions for improving this project, please open an issue or submit a pull request.
This project is licensed under the MIT License. See the https://github.com/NhanPhamThanh-IT/UI-UX-Template?tab=MIT-1-ov-file file for details.