https://github.com/buikevin/galaxy-design
https://github.com/buikevin/galaxy-design
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/buikevin/galaxy-design
- Owner: buikevin
- Created: 2025-11-07T03:01:46.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-11-07T04:04:24.000Z (about 1 month ago)
- Last Synced: 2025-11-07T05:31:50.686Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://galaxy-design.vercel.app
- Size: 5.35 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - Galaxy UI - Universal Component Library that brings beautiful, accessible components to Angular. (Third Party Components / UI Libraries built on Tailwind CSS)
- fucking-awesome-angular - Galaxy UI - Universal Component Library that brings beautiful, accessible components to Angular. (Third Party Components / UI Libraries built on Tailwind CSS)
README
# ๐ Galaxy UI CLI
> Beautiful, accessible components for Vue, React, Angular, **Next.js**, **Nuxt.js**, **React Native**, and **Flutter** with unified design system
[](https://www.typescriptlang.org/)
[](https://vuejs.org/)
[](https://reactjs.org/)
[](https://angular.io/)
[](https://reactnative.dev/)
[](https://flutter.dev/)
[](https://tailwindcss.com/)
[](LICENSE)
## โจ Features
- ๐จ **197 Production-Ready Components** - Complete component library across **7 platforms** (41 web per framework + 37 mobile per platform)
- ๐ฏ **Universal Multi-Platform** - Vue 3, React 18+, Angular 20, **Next.js**, **Nuxt.js**, **React Native**, and **Flutter**
- ๐ **Copy-Paste Philosophy** - Own your code, no npm dependencies for components
- โฟ **Accessible** - Built on Radix primitives (WAI-ARIA compliant, keyboard navigation)
- ๐ **Dark Mode** - First-class dark theme support with CSS variables
- โก **Modern Stack** - Latest versions with TypeScript strict mode
- ๐จ **Tailwind CSS** - Utility-first styling with customization (NativeWind for React Native)
- ๐ฑ **Mobile-First** - Native iOS/Android support via React Native & Flutter
- ๐ **CLI Tool** - Simple init and add commands with auto-detection
- ๐ **Unified API** - Consistent component API across all mobile platforms
## ๐ Quick Start
### Prerequisites
Before you begin, make sure you have:
- **Node.js 18+** installed
- A **Vue 3**, **React 18+**, **Angular 20**, **Next.js**, or **Nuxt.js** project
- **Tailwind CSS** configured in your project
### Installation
You don't need to install Galaxy UI CLI globally. You can use it directly with your preferred package manager:
```bash
# npm
npx galaxy-design@latest init
# pnpm
pnpm dlx galaxy-design@latest init
# yarn
yarn dlx galaxy-design@latest init
# bun
bunx galaxy-design@latest init
```
### Add Components
After initialization, add components to your project:
```bash
# npm
npx galaxy-design@latest add button
# pnpm
pnpm dlx galaxy-design@latest add button
# yarn
yarn dlx galaxy-design@latest add button
# bun
bunx galaxy-design@latest add button
```
### Add Multiple Components
```bash
# Add multiple components at once
npx galaxy-design@latest add button input dialog
# Or use the shorthand with global installation
npm install -g galaxy-design
galaxy-design add button input select
```
### Tailwind CSS Setup
Galaxy UI requires Tailwind CSS. If you haven't set it up yet:
```bash
# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# pnpm
pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p
# yarn
yarn add -D tailwindcss postcss autoprefixer
yarn dlx tailwindcss init -p
# bun
bun add -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p
```
### What the Init Command Does
The `galaxy-design init` command will:
1. โ
Detect your framework (Vue, React, Angular, Next.js, Nuxt.js, React Native, or Flutter)
2. โ
Create `components.json` configuration file
3. โ
Set up the `components/ui` directory (or platform-specific paths)
4. โ
Configure path aliases (`@/components`, `@/lib/utils`)
5. โ
Install required dependencies (Radix primitives, NativeWind for RN, etc.)
6. โ
Set up Tailwind CSS integration with design tokens
## ๐ฆ Components (41)
All components work identically across **Vue 3**, **React 18+**, **Angular 20**, **Next.js**, and **Nuxt.js** with full Radix primitives integration:
### ๐ Form Components (12)
- **Button** - Clickable button with multiple variants and sizes
- **Input** - Text input field
- **Checkbox** - Checkbox for binary choices
- **Radio Group** - Radio button group for exclusive choices
- **Select** - Dropdown selection menu with full accessibility
- **Slider** - Range slider input with min/max/step
- **Switch** - Toggle switch with smooth animation
- **Textarea** - Multi-line text input
- **Label** - Accessible form labels with proper associations
- **Calendar** - Date picker calendar
- **Calendar Range** - Date range picker
- **Tags Input** - Multi-value tag input
### ๐ Layout Components (8)
- **Separator** - Horizontal/vertical visual divider
- **Accordion** - Expandable content sections with animations
- **Collapsible** - Single collapsible section
- **Tabs** - Tabbed interface with data-[state] styling
- **Aspect Ratio** - Maintain aspect ratio for media content
- **Resizable** - Resizable panel groups with keyboard support
- **Sheet** - Slide-over panel from screen edge
- **Toolbar** - Container for grouping controls
### ๐งญ Navigation Components (6)
- **Navigation Menu** - Complex site navigation with indicators
- **Menubar** - Application menu bar (File, Edit, etc.)
- **Context Menu** - Right-click contextual menu
- **Dropdown Menu** - Click-triggered dropdown menu
- **Pagination** - Page navigation with numbers
- **Command** - Command palette for keyboard navigation
### ๐ฎ Interactive Components (2)
- **Toggle** - Two-state toggle button
- **Toggle Group** - Set of toggle buttons for single or multiple selection
### ๐ฒ Overlay Components (5)
- **Dialog** - Modal dialog with overlay and portal
- **Alert Dialog** - Confirmation dialog with focus trap
- **Popover** - Floating content with smart positioning
- **Tooltip** - Hover tooltip with portal support
- **Hover Card** - Rich hover card with preview content
### ๐ Data Display Components (7)
- **Avatar** - User avatar with automatic fallback
- **Progress** - Progress bar indicator
- **Table** - Responsive data table
- **Kbd** - Keyboard key display
- **Typography** - Text formatting components
- **Empty** - Empty state placeholder
- **Skeleton** - Loading placeholder
### ๐ง Utility Components (1)
- **Scroll Area** - Custom styled scrollable area
> **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.
## ๐ก Philosophy
Galaxy UI CLI follows the **copy-paste component** approach:
- โ
Components are **copied directly** into your project
- โ
You have **full ownership** of the code
- โ
**Complete control** to customize as needed
- โ
**No version conflicts** or dependency issues
- โ
Built with **Tailwind CSS** + **Radix primitives**
## ๐จ Design System
Built on industry-standard accessible design systems:
- **Radix UI** (React) - Unstyled, accessible components for React
- **Radix Vue** (Vue 3) - Vue port of Radix UI primitives
- **Radix NG** (Angular) - Angular primitives with full WAI-ARIA support
- **shadcn/ui** inspired - Copy-paste philosophy and beautiful design
- **Tailwind CSS 3.4** - Utility-first styling with CSS variables
### Radix Primitives Integration
Components built with Radix primitives include:
- โ
**Full WAI-ARIA compliance** - Automatic ARIA attributes
- โ
**Keyboard navigation** - Tab, Arrow keys, Enter, Escape support
- โ
**Screen reader support** - Live regions and announcements
- โ
**Focus management** - Automatic focus trap for modals
- โ
**Portal support** - Floating elements render in document body
- โ
**Collision detection** - Smart positioning for overlays
- โ
**OnPush strategy** - Optimized change detection
## ๐ Documentation
Full documentation available at: **https://galaxy-design.vercel.app**
- [Getting Started](https://galaxy-design.vercel.app/guide/introduction)
- [Installation](https://galaxy-design.vercel.app/guide/installation)
- [Components](https://galaxy-design.vercel.app/components/overview)
- [CLI Usage](https://galaxy-design.vercel.app/guide/cli-usage)
## ๐ Usage Examples
### Vue 3
```vue
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { ref } from 'vue'
const email = ref('')
Submit
```
### React
```tsx
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useState } from 'react'
export default function Example() {
const [email, setEmail] = useState('')
return (
setEmail(e.target.value)}
placeholder="Email"
/>
Submit
)
}
```
### Angular
```typescript
import { Component } from '@angular/core';
import { ButtonComponent } from '@/components/ui/button';
import { InputComponent } from '@/components/ui/input';
@Component({
selector: 'app-example',
standalone: true,
imports: [ButtonComponent, InputComponent],
template: `
Submit
`
})
export class ExampleComponent {
email = '';
}
```
## ๐ ๏ธ Development
This is an Nx monorepo managed with Bun.
### Development Prerequisites
- Node.js 18+
- Bun (recommended) or npm/pnpm/yarn
### Development Setup
```bash
# Clone repository
git clone https://github.com/buikevin/galaxy-design
cd galaxy-design
# Install dependencies
bun install
# Build all packages
bun nx run-many -t build
# Build specific package
bun nx build cli
bun nx build vue
bun nx build react
bun nx build angular
# Run documentation site
cd docs
bun run dev
```
## ๐ฆ Packages
| Package | Description | Status |
|---------|-------------|--------|
| `galaxy-design` | CLI tool (init, add commands) | โ
Complete |
| Component Templates | 41 component templates (Vue, React, Angular) | โ
Complete |
## ๐บ๏ธ Roadmap
### โ
Phase 1: Foundation (Complete)
- โ
Nx monorepo setup
- โ
Package structure
- โ
Multi-framework architecture
### โ
Phase 2: CLI Tool (Complete)
- โ
`galaxy-design init` command
- โ
`galaxy-design add` command
- โ
Framework auto-detection
- โ
Package manager detection
### โ
Phase 3: Components (Complete)
- โ
41 web components + 35 mobile components (22 RN, 13 Flutter)
- โ
Vue 3 implementations
- โ
React 18+ implementations
- โ
Angular 20 implementations
- โ
Full TypeScript support
- โ
Radix primitives integration
### โ
Phase 4: Documentation (Complete)
- โ
VitePress documentation site
- โ
Bilingual support (English/Vietnamese)
- โ
Component documentation
- โ
Usage examples
### ๐ง Phase 5: Testing (In Progress)
- โธ๏ธ Unit tests for all components
- โธ๏ธ Integration tests
- โธ๏ธ E2E tests
### โ
Phase 6: Publishing (Complete)
- โ
npm package publishing preparation
- โ
Documentation site deployed (Vercel)
- โ
Build automation with prepublishOnly
## ๐ Project Stats
- **Components**: 197 total (41 per web framework + 37 per mobile platform)
- **Platforms**: 7 (Vue 3, React 18+, Angular 20, Next.js, Nuxt.js, React Native, Flutter)
- **Total Implementations**: 197 unique component implementations (Next.js uses React templates, Nuxt.js uses Vue templates)
- **Radix Integration**: Full coverage with Radix primitives for web
- Vue: Radix Vue primitives
- React: Radix UI primitives
- Angular: Radix NG primitives (@radix-ng/primitives)
- **Mobile Frameworks**:
- React Native: 37 components with NativeWind v4
- Flutter: 37 components with Material Design 3
- **Lines of Code**: ~20,000+ across all packages
- **Documentation**: 82+ pages (41 EN + 41 VI) in VitePress + mobile guides
- **CLI**: โ
Fully functional (init & add commands) with mobile support
- **Build Status**: โ
All components compile successfully
- **Deployment**: โ
Docs deployed at https://galaxy-design.vercel.app
- **Status**: Production-ready & ready for npm publish
## ๐ค Contributing
Contributions are welcome!
### How to Contribute
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request
## ๐ก Inspiration
- **[shadcn/ui](https://ui.shadcn.com/)** - Copy-paste philosophy and design
- **[shadcn-vue](https://www.shadcn-vue.com/)** - Vue implementation
- **[Radix UI](https://www.radix-ui.com/)** - Accessible primitives
- **[Radix Vue](https://www.radix-vue.com/)** - Vue primitives
- **[Radix NG](https://github.com/radix-ng/primitives)** - Angular primitives
## ๐ License
MIT ยฉ 2025 Bรนi Trแปng Hiแบฟu (kevinbui)
## ๐ค Author
**Bรนi Trแปng Hiแบฟu (kevinbui)**
- GitHub: [@buikevin](https://github.com/buikevin)
- Email: kevinbui210191@gmail.com
## ๐ Links
- **Repository**: https://github.com/buikevin/galaxy-design
- **Documentation**: https://galaxy-design.vercel.app
- **npm Package**: https://www.npmjs.com/package/galaxy-design (Coming Soon)
- **Changelog**: See [CHANGELOG.md](CHANGELOG.md)
---
**Built with โค๏ธ using Vue, React, Angular, TypeScript, and Tailwind CSS**