Streamline React Development: Modern UI Component Library for Rapid Prototyping
Looking to speed up your React development process? The Modern UI component library provides a collection of pre-built, customizable UI components and hooks designed for rapid prototyping and consistent design. Inspired by Shadcn UI, this library helps you easily integrate beautiful, functional elements into your Next.js or Vite projects.
Why Choose the Modern UI Component Library?
The Modern UI library stands out thanks to its streamlined approach to UI development. Through its intuitive CLI, dependency management, and automatic configuration, it simplifies how you build modern React applications. Let's explore the key benefits:
- Boost productivity: Focus on core logic, not boilerplate UI code.
- Maintain consistent design: Enforce a unified look and feel across your application.
- Reduce development time: Instantly add production-ready components and hooks.
- Increase overall efficiency: Benefit from automated setup and dependency management.
Getting Started with Modern UI: A Quick Guide
Ready to jump in? Here’s how to quickly integrate Modern UI into your project:
- Initialization: Run
npx @modern-core/ui initto set up the library in your project. - Component Installation: Use
npx @modern-core/ui add buttonto add a button component (replace "button" with other desired components like "card"). - Hook Installation: Integrate custom hooks with
npx @modern-core/ui add use-media-query(oruse-debounce,use-click-outside, etc.).
This simple process lets you add complex functionalities with ease.
Key Features That Will Revolutionize Your React Workflow
Here's a deeper dive into what makes Modern UI a must-have for your React projects.
- Simple CLI Installation: Add components and hooks with single-line commands.
- Framework Agnostic: Seamlessly supports Next.js and Vite with automatic detection.
- Tailwind CSS Integration: Automatically sets up and configures Tailwind CSS.
- Smart Dependency Management: Handles external dependencies, prompting for installation and ensuring compatibility.
- TypeScript Support: Built-in TypeScript support for type safety and enhanced developer experience.
- Version Control: Effectively manage component versions and updates via the CLI.
- Path Aliases Configuration: Set up path aliases in
tsconfig.jsonorvite.config.jsfor cleaner imports (e.g.,@/components). - Customizable Themes: Choose from default or blue themes – further customize styles by directly modifying the Tailwind configuration file for custom color schemes, border-radius and shadow configurations.
Configuring Your Modern UI Setup
The modern-ui.json file, created upon initialization, allows you to customize your library's configuration.
Key Configuration Options:
style: Selects the UI style (currently only "default").path: Defines the component installation location.typescript: Enables or disables TypeScript support.tailwind: Enables or disables Tailwind CSS support.tailwindVersion: Specifies the Tailwind version (v3 or v4).framework: Automatically detects the project framework (next or vite).theme: Chooses the theme ("default" or "blue").aliases: Configures custom import paths for utilities and hooks.
Taking Control of Component Versions and Updates
Modern UI simplifies component version management:
- List Installed Components:
npx @modern-core/ui version - Install Specific Versions:
npx @modern-core/ui add button --version 0.9.0 - Check Available Versions:
npx @modern-core/ui version --available button - Update Components:
npx @modern-core/ui version --update button
This ensures your project always uses the most appropriate component versions, further enhancing long-term maintainability. Through these features, Modern UI component library empowers developers to swiftly craft compelling user interfaces.
