Components Overview

The CLI registry currently exposes the following installable component and block entries. Counts are generated from framework registries; they are not a claim of one-to-one API parity.

Platform Coverage

Platform	Components	Styling	Status
React 18+	75	Tailwind CSS v3/v4 + Radix UI	Reference web coverage
Vue 3	75	Tailwind CSS v3/v4 + Radix Vue	Full component parity with React
Angular 20+	71	Tailwind CSS v3/v4 + Radix NG	Full component parity with React
React Native	70	NativeWind	Mobile-specific coverage
Flutter	69	Material Design 3	Mobile-specific coverage

The web registries share 67 base component names, generated from the canonical manifests in packages/contracts. Framework parity gaps and block counts are recorded in the manifest artifacts.

Installation

Install components individually using the CLI:

bash

npx @galaxy-stack/nebula-cli@latest add button

bash

pnpm dlx @galaxy-stack/nebula-cli@latest add button

bash

yarn dlx @galaxy-stack/nebula-cli@latest add button

bash

bunx @galaxy-stack/nebula-cli@latest add button

bash

galaxy-design add button

Or install multiple components at once:

bash

npx @galaxy-stack/nebula-cli@latest add button input dialog

bash

pnpm dlx @galaxy-stack/nebula-cli@latest add button input dialog

bash

yarn dlx @galaxy-stack/nebula-cli@latest add button input dialog

bash

bunx @galaxy-stack/nebula-cli@latest add button input dialog

bash

galaxy-design add button input dialog

Component Categories

Form Components

Essential form controls for user input:

Button - Displays a button or a component that looks like a button
Input - Displays a form input field or a component that looks like an input field
Label - Renders an accessible label associated with controls
Select - Displays a list of options for the user to pick from triggered by a button
Checkbox - A control that allows the user to toggle between checked and not checked
Radio Group - A set of checkable buttons where only one can be selected at a time
Switch - A control that allows the user to toggle between checked and not checked
Slider - An input where the user selects a value from within a given range
Textarea - Displays a form textarea or a component that looks like a textarea
Calendar - Full-featured date picker (web only)
Calendar Range - Date range picker with start and end dates (web only)
Tags Input - Input field for entering multiple tags or values

Layout Components

Components for organizing content:

Separator - Visually or semantically separates content
Accordion - A vertically stacked set of interactive headings that each reveal a section of content
Tabs - A set of layered sections of content known as tab panels that are displayed one at a time
Dialog - A window overlaid on either the primary window or another dialog window
Collapsible - An interactive component which expands/collapses a panel
Aspect Ratio - Displays content within a desired aspect ratio
Scroll Area - Augments native scroll functionality for custom, cross-browser styling (web only)
Resizable - Accessible resizable panel groups and layouts with keyboard support (web only)
Sheet - Slide-over panel that slides in from the edge of the screen

Components for navigation and menus:

Dropdown Menu - Displays a menu to the user triggered by a button
Navigation Menu - A collection of links for navigating websites
Menubar - A visually persistent menu common in desktop applications
Context Menu - Displays a menu to the user triggered by right-click or long-press
Popover - Displays rich content in a portal, triggered by a button
Tooltip - A popup that displays information on hover or focus
Pagination - Pagination component with page navigation
Command - Command palette for keyboard navigation

Interactive Components

Interactive UI elements:

Toggle - A two-state button that can be either on or off
Toggle Group - A set of two-state buttons that can be toggled on or off

Feedback Components

Components for status, loading, and system feedback:

Alert Dialog - A modal dialog that interrupts the user with important content and expects a response
Alert - Displays a callout for user attention
Progress - Displays an indicator showing the completion progress of a task
Skeleton - Loading placeholder skeleton
Empty - Empty state placeholder
Spinner - Animated loading spinner

Chart Components

Data visualization charts:

Line Chart - Display data as a responsive line chart with smooth curves and customizable styling
Bar Chart - Display data as vertical or horizontal bars with support for stacked and grouped layouts
Pie Chart - Display proportional data as a pie or donut chart with customizable labels and legend
Donut Chart - Display proportional data as a donut chart with a hollow center
Area Chart - Visualize cumulative totals over time with filled areas and gradient support
Radar Chart - Display multi-dimensional data comparison on a radial grid
Scatter Chart - Display distribution and correlation analysis with scatter plots
Mixed Chart - Combine multiple chart types (line, bar, area) in a single visualization
Gauge Chart - Display data as a gauge chart with customizable ranges and styling (Angular/React Native/Flutter only)

Data Display Components

Components for displaying data:

Avatar - An image element with a fallback for representing the user
Hover Card - For sighted users to preview content available behind a link
Table - Data table with sorting, filtering, and selection
Kbd - Keyboard key display
Typography - Text formatting components

Platform Support

Web Frameworks

Web component APIs are intentionally similar, but the current catalogs are not identical:

Vue 3 - Composition API with <script setup>
React 18+ - Hooks with forwardRef
Angular 20+ - Standalone components with Signals

Mobile Platforms

Mobile components are available for:

React Native - Functional components with NativeWind v4 styling
Flutter - StatelessWidget with Material Design 3

Note: Not all web components are suitable for mobile (for example Hover Card and Context Menu), so mobile catalogs intentionally differ.

Features

Accessible - Built on Radix primitives (WAI-ARIA compliant)
Customizable - Full control with Tailwind CSS
Type-safe - TypeScript support for all frameworks
Dark mode - Built-in dark mode support
Copy & Paste - No npm dependencies, copy components directly to your project
Consistent API - Similar API across all frameworks

Usage Example

Each component works similarly across frameworks:

VueReactAngular

vue

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

<template>
  <Button variant="default">Click me</Button>
</template>

tsx

import { Button } from "@/components/ui/button"

export default function App() {
  return <Button variant="default">Click me</Button>
}

typescript

import { Component } from '@angular/core';
import { ButtonComponent } from '@/components/ui/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent],
  template: `<ui-button variant="default">Click me</ui-button>`
})
export class AppComponent {}

API Reference

Props

This component accepts the following props:

Prop	Type	Default	Description
...	...	...	...

Next Steps

Browse the components to find what you need
Check the CLI Usage guide to learn more about the CLI
Read the Theming guide to customize the appearance

Accessibility

Keyboard Navigation: [TODO]
Screen Reader: [TODO]
Focus Management: [TODO]
WCAG Compliance: WCAG 2.1 Level AA compliant

Author

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

GitHub: @buikevin
Email: kevinbui210191@gmail.com

Components Overview

Platform Coverage

Installation

Component Categories

Form Components

Layout Components

Navigation Components

Interactive Components

Feedback Components

Chart Components

Data Display Components

Platform Support

Web Frameworks

Mobile Platforms

Features

Usage Example

API Reference

Props

Next Steps

Accessibility

Author

License

Components Overview ​

Platform Coverage ​

Installation ​

Component Categories ​

Form Components ​

Layout Components ​

Navigation Components ​

Interactive Components ​

Feedback Components ​

Chart Components ​

Data Display Components ​

Platform Support ​

Web Frameworks ​

Mobile Platforms ​

Features ​

Usage Example ​

API Reference ​

Props ​

Next Steps ​

Accessibility ​

Author ​

License ​

Components Overview

Platform Coverage

Installation

Component Categories

Form Components

Layout Components

Navigation Components

Interactive Components

Feedback Components

Chart Components

Data Display Components

Platform Support

Web Frameworks

Mobile Platforms

Features

Usage Example

API Reference

Props

Next Steps

Accessibility

Author

License