https://github.com/thangdevalone/modern-ui
A collection of reusable components built with Radix UI and Tailwind CSS. Free. Open Source. And Next.js 15 Ready. Inspired by Shadcn UI. And Next.js 15 Ready. Pack in https://www.npmjs.com/package/@modern-core/ui
https://github.com/thangdevalone/modern-ui
modern-ui nextjs15 react shadcn-ui ui-template
Last synced: 5 months ago
JSON representation
A collection of reusable components built with Radix UI and Tailwind CSS. Free. Open Source. And Next.js 15 Ready. Inspired by Shadcn UI. And Next.js 15 Ready. Pack in https://www.npmjs.com/package/@modern-core/ui
- Host: GitHub
- URL: https://github.com/thangdevalone/modern-ui
- Owner: thangdevalone
- Created: 2025-02-25T08:06:05.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-24T04:18:37.000Z (5 months ago)
- Last Synced: 2025-04-24T04:19:23.177Z (5 months ago)
- Topics: modern-ui, nextjs15, react, shadcn-ui, ui-template
- Language: TypeScript
- Homepage: https://ui.thanglab.dev
- Size: 860 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modern UI
A modern component and hooks library for React projects, inspired by shadcn/ui, that lets you easily add beautiful UI components and useful hooks to your projects.
## Requirements
- Next.js or Vite project
- Node.js 16.8+
## Quick Start
```bash
# Initialize Modern UI
npx @modern-core/ui init
# Add components
npx @modern-core/ui add button
npx @modern-core/ui add card
# Add hooks
npx @modern-core/ui add use-media-query
npx @modern-core/ui add use-debounce
```
## Features
- ✅ Simple component and hook installation via CLI
- ✅ Next.js and Vite support with automatic detection
- ✅ Automatic Tailwind CSS setup
- ✅ Smart dependency management
- ✅ TypeScript support
- ✅ Component versioning
- ✅ Path aliases configuration
- ✅ Custom import paths for hooks and utilities
## Configuration
Upon initialization, a `modern-ui.json` file is created in your project:
```json
{
"style": "default",
"path": "src/components/modern-ui",
"typescript": true,
"tailwind": true,
"tailwindVersion": "v4",
"framework": "next",
"theme": "default",
"aliases": {
"cn": "@/lib/utils",
"hook": "@/hooks"
},
"components": []
}
```
### Configuration Options
- `style`: UI style (currently only "default")
- `path`: Component installation location
- `typescript`: TypeScript support toggle
- `tailwind`: Tailwind CSS support toggle
- `tailwindVersion`: Tailwind version (v3 or v4)
- `framework`: Detected framework (next or vite)
- `theme`: Theme selection for styling (options: "default", "blue")
- `aliases`: Custom import paths
- `cn`: Import path for className utility
- `hook`: Import path for hooks
- `components`: Tracks installed components and hooks
## Key Features
### 1. Component and Hook Installation
Modern UI allows you to install both UI components and custom hooks:
```bash
# Install components
npx @modern-core/ui add button
npx @modern-core/ui add card
# Install hooks
npx @modern-core/ui add use-media-query
npx @modern-core/ui add use-click-outside
```
Hooks are automatically installed to your configured hook directory (`aliases.hook` path).
### 2. Automatic Framework Detection
Modern UI detects your project framework and configures components accordingly.
### 3. Tailwind CSS Integration
If Tailwind CSS isn't detected during initialization, Modern UI will offer to install and configure it.
### 4. Theme Support
Modern UI comes with multiple theme options:
- Default theme - A clean, minimal design with subtle gradients
- Blue theme - A vibrant blue-focused design with enhanced shadows
During initialization, you'll be asked to select a theme which will set up the appropriate Tailwind CSS configuration. This includes:
- Custom color schemes
- Consistent border radius
- Animation presets
- Shadow configurations
You can also manually update your theme by modifying the Tailwind configuration file directly.
### 5. Smart Import Path Management
- Components that use hooks will automatically import from your configured hook path
- The `cn` utility for className merging is automatically imported from your configured path
- All imports are standardized to follow your project's configured path structure
### 6. Smart Dependency Management
When adding components with external dependencies:
1. Modern UI checks if required packages are installed
2. Prompts for installation if needed
3. Installs with compatible versions
### 7. Version Management
```bash
# List installed components and hooks
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
```
### 8. Path Aliases Support
Modern UI can automatically configure path aliases in your project:
- Sets up tsconfig.json paths for TypeScript projects
- Configures vite.config.js/ts for Vite projects
- Creates proper import aliases like "@/components" for easier imports
## License
ISC