{"id":28047882,"url":"https://github.com/thangdevalone/modern-ui","last_synced_at":"2026-01-27T06:12:21.545Z","repository":{"id":279377405,"uuid":"938604189","full_name":"thangdevalone/modern-ui","owner":"thangdevalone","description":"A collection of reusable components built with Radix UI and Tailwind CSS. Free. Open Source. And Next.js 15 Ready. Inspired by Shadcn UI.. Pack in https://www.npmjs.com/package/@modern-core/ui","archived":false,"fork":false,"pushed_at":"2025-04-26T10:37:54.000Z","size":1116,"stargazers_count":73,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-11T21:06:34.298Z","etag":null,"topics":["modern-ui","nextjs15","react","shadcn-ui","ui-template"],"latest_commit_sha":null,"homepage":"https://modern-ui.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thangdevalone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-25T08:06:05.000Z","updated_at":"2025-05-09T09:19:19.000Z","dependencies_parsed_at":"2025-04-20T04:48:50.438Z","dependency_job_id":null,"html_url":"https://github.com/thangdevalone/modern-ui","commit_stats":null,"previous_names":["thangdevalone/mordern-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thangdevalone/modern-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangdevalone%2Fmodern-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangdevalone%2Fmodern-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangdevalone%2Fmodern-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangdevalone%2Fmodern-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thangdevalone","download_url":"https://codeload.github.com/thangdevalone/modern-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangdevalone%2Fmodern-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28805502,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T05:43:52.625Z","status":"ssl_error","status_checked_at":"2026-01-27T05:43:48.957Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modern-ui","nextjs15","react","shadcn-ui","ui-template"],"created_at":"2025-05-11T21:06:33.111Z","updated_at":"2026-01-27T06:12:21.531Z","avatar_url":"https://github.com/thangdevalone.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Modern UI\n\nA 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.\n\n## Requirements\n\n- Next.js or Vite project\n- Node.js 16.8+\n\n## Quick Start\n\n```bash\n# Initialize Modern UI\nnpx @modern-core/ui init\n\n# Add components\nnpx @modern-core/ui add button\nnpx @modern-core/ui add card\n\n# Add hooks\nnpx @modern-core/ui add use-media-query\nnpx @modern-core/ui add use-debounce\n```\n\n## Features\n\n- ✅ Simple component and hook installation via CLI\n- ✅ Next.js and Vite support with automatic detection\n- ✅ Automatic Tailwind CSS setup\n- ✅ Smart dependency management\n- ✅ TypeScript support\n- ✅ Component versioning\n- ✅ Path aliases configuration\n- ✅ Custom import paths for hooks and utilities\n\n## Configuration\n\nUpon initialization, a `modern-ui.json` file is created in your project:\n\n```json\n{\n  \"style\": \"default\",\n  \"path\": \"src/components/modern-ui\",\n  \"typescript\": true,\n  \"tailwind\": true,\n  \"tailwindVersion\": \"v4\",\n  \"framework\": \"next\",\n  \"theme\": \"default\",\n  \"aliases\": {\n    \"cn\": \"@/lib/utils\",\n    \"hook\": \"@/hooks\"\n  },\n  \"components\": []\n}\n```\n\n### Configuration Options\n\n- `style`: UI style (currently only \"default\")\n- `path`: Component installation location\n- `typescript`: TypeScript support toggle\n- `tailwind`: Tailwind CSS support toggle\n- `tailwindVersion`: Tailwind version (v3 or v4)\n- `framework`: Detected framework (next or vite)\n- `theme`: Theme selection for styling (options: \"default\", \"blue\")\n- `aliases`: Custom import paths\n  - `cn`: Import path for className utility\n  - `hook`: Import path for hooks\n- `components`: Tracks installed components and hooks\n\n## Key Features\n\n### 1. Component and Hook Installation\n\nModern UI allows you to install both UI components and custom hooks:\n\n```bash\n# Install components\nnpx @modern-core/ui add button\nnpx @modern-core/ui add card\n\n# Install hooks\nnpx @modern-core/ui add use-media-query\nnpx @modern-core/ui add use-click-outside\n```\n\nHooks are automatically installed to your configured hook directory (`aliases.hook` path).\n\n### 2. Automatic Framework Detection\n\nModern UI detects your project framework and configures components accordingly.\n\n### 3. Tailwind CSS Integration\n\nIf Tailwind CSS isn't detected during initialization, Modern UI will offer to install and configure it.\n\n### 4. Theme Support\n\nModern UI comes with multiple theme options:\n- Default theme - A clean, minimal design with subtle gradients \n- Blue theme - A vibrant blue-focused design with enhanced shadows\n\nDuring initialization, you'll be asked to select a theme which will set up the appropriate Tailwind CSS configuration. This includes:\n- Custom color schemes\n- Consistent border radius\n- Animation presets\n- Shadow configurations\n\nYou can also manually update your theme by modifying the Tailwind configuration file directly.\n\n### 5. Smart Import Path Management\n\n- Components that use hooks will automatically import from your configured hook path\n- The `cn` utility for className merging is automatically imported from your configured path\n- All imports are standardized to follow your project's configured path structure\n\n### 6. Smart Dependency Management\n\nWhen adding components with external dependencies:\n1. Modern UI checks if required packages are installed\n2. Prompts for installation if needed\n3. Installs with compatible versions\n\n### 7. Version Management\n\n```bash\n# List installed components and hooks\nnpx @modern-core/ui version\n\n# Install specific versions\nnpx @modern-core/ui add button --version 0.9.0\n\n# Check available versions\nnpx @modern-core/ui version --available button\n\n# Update components\nnpx @modern-core/ui version --update button\n```\n\n### 8. Path Aliases Support\n\nModern UI can automatically configure path aliases in your project:\n- Sets up tsconfig.json paths for TypeScript projects\n- Configures vite.config.js/ts for Vite projects\n- Creates proper import aliases like \"@/components\" for easier imports\n\n## License\n\nISC ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangdevalone%2Fmodern-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthangdevalone%2Fmodern-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangdevalone%2Fmodern-ui/lists"}