Skip to content

buikevin/galaxy-design

BranchesTags

Repository files navigation

🌌 Galaxy UI CLI

Beautiful, accessible components for Vue, React, Angular, Next.js, Nuxt.js, React Native, and Flutter with unified design system

TypeScript Vue React Angular React Native Flutter Tailwind CSS 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:

# 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:

# 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

# 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:

# 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

📖 Usage Examples

Vue 3

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const email = ref('')
</script>

<template>
  <div>
    <Input v-model="email" placeholder="Email" />
    <Button variant="default">Submit</Button>
  </div>
</template>

React

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 (
    <div>
      <Input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <Button variant="default">Submit</Button>
    </div>
  )
}

Angular

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: `
    <div>
      <ui-input [(ngModel)]="email" placeholder="Email" />
      <ui-button variant="default">Submit</ui-button>
    </div>
  `
})
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

# 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

📄 License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)

👤 Author

Bùi Trọng Hiếu (kevinbui)

🔗 Links

Built with ❤️ using Vue, React, Angular, TypeScript, and Tailwind CSS

About

galaxy-design.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages