{"id":33192923,"url":"https://github.com/buikevin/galaxy-design","last_synced_at":"2025-11-16T21:01:47.486Z","repository":{"id":322925432,"uuid":"1091446933","full_name":"buikevin/galaxy-design","owner":"buikevin","description":null,"archived":false,"fork":false,"pushed_at":"2025-11-07T04:04:24.000Z","size":5614,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-07T05:31:50.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://galaxy-design.vercel.app","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/buikevin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-07T03:01:46.000Z","updated_at":"2025-11-07T04:06:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/buikevin/galaxy-design","commit_stats":null,"previous_names":["buikevin/galaxy-design"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/buikevin/galaxy-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buikevin%2Fgalaxy-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buikevin%2Fgalaxy-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buikevin%2Fgalaxy-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buikevin%2Fgalaxy-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buikevin","download_url":"https://codeload.github.com/buikevin/galaxy-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buikevin%2Fgalaxy-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":283889583,"owners_count":26911915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-11T02:00:06.610Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-11-16T07:00:26.985Z","updated_at":"2025-11-16T21:01:47.477Z","avatar_url":"https://github.com/buikevin.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Tailwind CSS"],"readme":"# 🌌 Galaxy UI CLI\n\n\u003e Beautiful, accessible components for Vue, React, Angular, **Next.js**, **Nuxt.js**, **React Native**, and **Flutter** with unified design system\n\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)\n[![Vue](https://img.shields.io/badge/Vue-3.5-42b883.svg)](https://vuejs.org/)\n[![React](https://img.shields.io/badge/React-18+-61dafb.svg)](https://reactjs.org/)\n[![Angular](https://img.shields.io/badge/Angular-20-red.svg)](https://angular.io/)\n[![React Native](https://img.shields.io/badge/React_Native-0.73+-61dafb.svg)](https://reactnative.dev/)\n[![Flutter](https://img.shields.io/badge/Flutter-3.0+-02569B.svg)](https://flutter.dev/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4-38bdf8.svg)](https://tailwindcss.com/)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n\n## ✨ Features\n\n- 🎨 **197 Production-Ready Components** - Complete component library across **7 platforms** (41 web per framework + 37 mobile per platform)\n- 🎯 **Universal Multi-Platform** - Vue 3, React 18+, Angular 20, **Next.js**, **Nuxt.js**, **React Native**, and **Flutter**\n- 📋 **Copy-Paste Philosophy** - Own your code, no npm dependencies for components\n- ♿ **Accessible** - Built on Radix primitives (WAI-ARIA compliant, keyboard navigation)\n- 🌙 **Dark Mode** - First-class dark theme support with CSS variables\n- ⚡ **Modern Stack** - Latest versions with TypeScript strict mode\n- 🎨 **Tailwind CSS** - Utility-first styling with customization (NativeWind for React Native)\n- 📱 **Mobile-First** - Native iOS/Android support via React Native \u0026 Flutter\n- 🚀 **CLI Tool** - Simple init and add commands with auto-detection\n- 🔄 **Unified API** - Consistent component API across all mobile platforms\n\n## 🚀 Quick Start\n\n### Prerequisites\n\nBefore you begin, make sure you have:\n\n- **Node.js 18+** installed\n- A **Vue 3**, **React 18+**, **Angular 20**, **Next.js**, or **Nuxt.js** project\n- **Tailwind CSS** configured in your project\n\n### Installation\n\nYou don't need to install Galaxy UI CLI globally. You can use it directly with your preferred package manager:\n\n```bash\n# npm\nnpx galaxy-design@latest init\n\n# pnpm\npnpm dlx galaxy-design@latest init\n\n# yarn\nyarn dlx galaxy-design@latest init\n\n# bun\nbunx galaxy-design@latest init\n```\n\n### Add Components\n\nAfter initialization, add components to your project:\n\n```bash\n# npm\nnpx galaxy-design@latest add button\n\n# pnpm\npnpm dlx galaxy-design@latest add button\n\n# yarn\nyarn dlx galaxy-design@latest add button\n\n# bun\nbunx galaxy-design@latest add button\n```\n\n### Add Multiple Components\n\n```bash\n# Add multiple components at once\nnpx galaxy-design@latest add button input dialog\n\n# Or use the shorthand with global installation\nnpm install -g galaxy-design\ngalaxy-design add button input select\n```\n\n### Tailwind CSS Setup\n\nGalaxy UI requires Tailwind CSS. If you haven't set it up yet:\n\n```bash\n# npm\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\n# pnpm\npnpm add -D tailwindcss postcss autoprefixer\npnpm dlx tailwindcss init -p\n\n# yarn\nyarn add -D tailwindcss postcss autoprefixer\nyarn dlx tailwindcss init -p\n\n# bun\nbun add -D tailwindcss postcss autoprefixer\nbunx tailwindcss init -p\n```\n\n### What the Init Command Does\n\nThe `galaxy-design init` command will:\n\n1. ✅ Detect your framework (Vue, React, Angular, Next.js, Nuxt.js, React Native, or Flutter)\n2. ✅ Create `components.json` configuration file\n3. ✅ Set up the `components/ui` directory (or platform-specific paths)\n4. ✅ Configure path aliases (`@/components`, `@/lib/utils`)\n5. ✅ Install required dependencies (Radix primitives, NativeWind for RN, etc.)\n6. ✅ Set up Tailwind CSS integration with design tokens\n\n## 📦 Components (41)\n\nAll components work identically across **Vue 3**, **React 18+**, **Angular 20**, **Next.js**, and **Nuxt.js** with full Radix primitives integration:\n\n### 📝 Form Components (12)\n- **Button** - Clickable button with multiple variants and sizes\n- **Input** - Text input field\n- **Checkbox** - Checkbox for binary choices\n- **Radio Group** - Radio button group for exclusive choices\n- **Select** - Dropdown selection menu with full accessibility\n- **Slider** - Range slider input with min/max/step\n- **Switch** - Toggle switch with smooth animation\n- **Textarea** - Multi-line text input\n- **Label** - Accessible form labels with proper associations\n- **Calendar** - Date picker calendar\n- **Calendar Range** - Date range picker\n- **Tags Input** - Multi-value tag input\n\n### 📐 Layout Components (8)\n- **Separator** - Horizontal/vertical visual divider\n- **Accordion** - Expandable content sections with animations\n- **Collapsible** - Single collapsible section\n- **Tabs** - Tabbed interface with data-[state] styling\n- **Aspect Ratio** - Maintain aspect ratio for media content\n- **Resizable** - Resizable panel groups with keyboard support\n- **Sheet** - Slide-over panel from screen edge\n- **Toolbar** - Container for grouping controls\n\n### 🧭 Navigation Components (6)\n- **Navigation Menu** - Complex site navigation with indicators\n- **Menubar** - Application menu bar (File, Edit, etc.)\n- **Context Menu** - Right-click contextual menu\n- **Dropdown Menu** - Click-triggered dropdown menu\n- **Pagination** - Page navigation with numbers\n- **Command** - Command palette for keyboard navigation\n\n### 🎮 Interactive Components (2)\n- **Toggle** - Two-state toggle button\n- **Toggle Group** - Set of toggle buttons for single or multiple selection\n\n### 🔲 Overlay Components (5)\n- **Dialog** - Modal dialog with overlay and portal\n- **Alert Dialog** - Confirmation dialog with focus trap\n- **Popover** - Floating content with smart positioning\n- **Tooltip** - Hover tooltip with portal support\n- **Hover Card** - Rich hover card with preview content\n\n### 📊 Data Display Components (7)\n- **Avatar** - User avatar with automatic fallback\n- **Progress** - Progress bar indicator\n- **Table** - Responsive data table\n- **Kbd** - Keyboard key display\n- **Typography** - Text formatting components\n- **Empty** - Empty state placeholder\n- **Skeleton** - Loading placeholder\n\n### 🔧 Utility Components (1)\n- **Scroll Area** - Custom styled scrollable area\n\n\u003e **Note**: All components built with Radix primitives have full WAI-ARIA support, keyboard navigation, and screen reader compatibility. Components are production-ready and fully typed with TypeScript.\n\n## 💡 Philosophy\n\nGalaxy UI CLI follows the **copy-paste component** approach:\n\n- ✅ Components are **copied directly** into your project\n- ✅ You have **full ownership** of the code\n- ✅ **Complete control** to customize as needed\n- ✅ **No version conflicts** or dependency issues\n- ✅ Built with **Tailwind CSS** + **Radix primitives**\n\n## 🎨 Design System\n\nBuilt on industry-standard accessible design systems:\n\n- **Radix UI** (React) - Unstyled, accessible components for React\n- **Radix Vue** (Vue 3) - Vue port of Radix UI primitives\n- **Radix NG** (Angular) - Angular primitives with full WAI-ARIA support\n- **shadcn/ui** inspired - Copy-paste philosophy and beautiful design\n- **Tailwind CSS 3.4** - Utility-first styling with CSS variables\n\n### Radix Primitives Integration\n\nComponents built with Radix primitives include:\n\n- ✅ **Full WAI-ARIA compliance** - Automatic ARIA attributes\n- ✅ **Keyboard navigation** - Tab, Arrow keys, Enter, Escape support\n- ✅ **Screen reader support** - Live regions and announcements\n- ✅ **Focus management** - Automatic focus trap for modals\n- ✅ **Portal support** - Floating elements render in document body\n- ✅ **Collision detection** - Smart positioning for overlays\n- ✅ **OnPush strategy** - Optimized change detection\n\n## 📚 Documentation\n\nFull documentation available at: **https://galaxy-design.vercel.app**\n\n- [Getting Started](https://galaxy-design.vercel.app/guide/introduction)\n- [Installation](https://galaxy-design.vercel.app/guide/installation)\n- [Components](https://galaxy-design.vercel.app/components/overview)\n- [CLI Usage](https://galaxy-design.vercel.app/guide/cli-usage)\n\n## 📖 Usage Examples\n\n### Vue 3\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { ref } from 'vue'\n\nconst email = ref('')\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cInput v-model=\"email\" placeholder=\"Email\" /\u003e\n    \u003cButton variant=\"default\"\u003eSubmit\u003c/Button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### React\n\n```tsx\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [email, setEmail] = useState('')\n\n  return (\n    \u003cdiv\u003e\n      \u003cInput\n        value={email}\n        onChange={(e) =\u003e setEmail(e.target.value)}\n        placeholder=\"Email\"\n      /\u003e\n      \u003cButton variant=\"default\"\u003eSubmit\u003c/Button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Angular\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ButtonComponent } from '@/components/ui/button';\nimport { InputComponent } from '@/components/ui/input';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [ButtonComponent, InputComponent],\n  template: `\n    \u003cdiv\u003e\n      \u003cui-input [(ngModel)]=\"email\" placeholder=\"Email\" /\u003e\n      \u003cui-button variant=\"default\"\u003eSubmit\u003c/ui-button\u003e\n    \u003c/div\u003e\n  `\n})\nexport class ExampleComponent {\n  email = '';\n}\n```\n\n## 🛠️ Development\n\nThis is an Nx monorepo managed with Bun.\n\n### Development Prerequisites\n\n- Node.js 18+\n- Bun (recommended) or npm/pnpm/yarn\n\n### Development Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/buikevin/galaxy-design\ncd galaxy-design\n\n# Install dependencies\nbun install\n\n# Build all packages\nbun nx run-many -t build\n\n# Build specific package\nbun nx build cli\nbun nx build vue\nbun nx build react\nbun nx build angular\n\n# Run documentation site\ncd docs\nbun run dev\n```\n\n## 📦 Packages\n\n| Package | Description | Status |\n|---------|-------------|--------|\n| `galaxy-design` | CLI tool (init, add commands) | ✅ Complete |\n| Component Templates | 41 component templates (Vue, React, Angular) | ✅ Complete |\n\n## 🗺️ Roadmap\n\n### ✅ Phase 1: Foundation (Complete)\n- ✅ Nx monorepo setup\n- ✅ Package structure\n- ✅ Multi-framework architecture\n\n### ✅ Phase 2: CLI Tool (Complete)\n- ✅ `galaxy-design init` command\n- ✅ `galaxy-design add` command\n- ✅ Framework auto-detection\n- ✅ Package manager detection\n\n### ✅ Phase 3: Components (Complete)\n- ✅ 41 web components + 35 mobile components (22 RN, 13 Flutter)\n- ✅ Vue 3 implementations\n- ✅ React 18+ implementations\n- ✅ Angular 20 implementations\n- ✅ Full TypeScript support\n- ✅ Radix primitives integration\n\n### ✅ Phase 4: Documentation (Complete)\n- ✅ VitePress documentation site\n- ✅ Bilingual support (English/Vietnamese)\n- ✅ Component documentation\n- ✅ Usage examples\n\n### 🚧 Phase 5: Testing (In Progress)\n- ⏸️ Unit tests for all components\n- ⏸️ Integration tests\n- ⏸️ E2E tests\n\n### ✅ Phase 6: Publishing (Complete)\n- ✅ npm package publishing preparation\n- ✅ Documentation site deployed (Vercel)\n- ✅ Build automation with prepublishOnly\n\n## 📊 Project Stats\n\n- **Components**: 197 total (41 per web framework + 37 per mobile platform)\n- **Platforms**: 7 (Vue 3, React 18+, Angular 20, Next.js, Nuxt.js, React Native, Flutter)\n- **Total Implementations**: 197 unique component implementations (Next.js uses React templates, Nuxt.js uses Vue templates)\n- **Radix Integration**: Full coverage with Radix primitives for web\n  - Vue: Radix Vue primitives\n  - React: Radix UI primitives\n  - Angular: Radix NG primitives (@radix-ng/primitives)\n- **Mobile Frameworks**:\n  - React Native: 37 components with NativeWind v4\n  - Flutter: 37 components with Material Design 3\n- **Lines of Code**: ~20,000+ across all packages\n- **Documentation**: 82+ pages (41 EN + 41 VI) in VitePress + mobile guides\n- **CLI**: ✅ Fully functional (init \u0026 add commands) with mobile support\n- **Build Status**: ✅ All components compile successfully\n- **Deployment**: ✅ Docs deployed at https://galaxy-design.vercel.app\n- **Status**: Production-ready \u0026 ready for npm publish\n\n## 🤝 Contributing\n\nContributions are welcome!\n\n### How to Contribute\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Submit a pull request\n\n## 💡 Inspiration\n\n- **[shadcn/ui](https://ui.shadcn.com/)** - Copy-paste philosophy and design\n- **[shadcn-vue](https://www.shadcn-vue.com/)** - Vue implementation\n- **[Radix UI](https://www.radix-ui.com/)** - Accessible primitives\n- **[Radix Vue](https://www.radix-vue.com/)** - Vue primitives\n- **[Radix NG](https://github.com/radix-ng/primitives)** - Angular primitives\n\n## 📄 License\n\nMIT © 2025 Bùi Trọng Hiếu (kevinbui)\n\n## 👤 Author\n\n**Bùi Trọng Hiếu (kevinbui)**\n- GitHub: [@buikevin](https://github.com/buikevin)\n- Email: kevinbui210191@gmail.com\n\n## 🔗 Links\n\n- **Repository**: https://github.com/buikevin/galaxy-design\n- **Documentation**: https://galaxy-design.vercel.app\n- **npm Package**: https://www.npmjs.com/package/galaxy-design (Coming Soon)\n- **Changelog**: See [CHANGELOG.md](CHANGELOG.md)\n\n---\n\n**Built with ❤️ using Vue, React, Angular, TypeScript, and Tailwind CSS**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuikevin%2Fgalaxy-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuikevin%2Fgalaxy-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuikevin%2Fgalaxy-design/lists"}