Component Library

StellarStack includes a comprehensive shared UI component library built with React, Tailwind CSS, and Radix UI primitives.

Package Structure

The @workspace/ui package contains all shared components:

packages/ui/
├── src/
│   ├── components/          # UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── dialog.tsx
│   │   └── shared/          # Custom components
│   │       ├── DashboardCards/
│   │       ├── Console/
│   │       ├── Animations/
│   │       └── ...
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utilities
│   └── styles/              # Global styles
└── package.json

Base Components

Built on shadcn/ui patterns with Radix UI primitives:

Component	Description
`Button`	Interactive button with variants
`Card`	Container with header, content, footer
`Dialog`	Modal dialog
`DropdownMenu`	Dropdown menu
`Input`	Text input
`Label`	Form label
`Checkbox`	Checkbox input
`Switch`	Toggle switch
`Slider`	Range slider
`Table`	Data table
`Tooltip`	Tooltip popup
`Sheet`	Side sheet/drawer
`Sidebar`	Navigation sidebar
`Skeleton`	Loading skeleton

Custom Components

StellarStack-specific components:

Dashboard Cards

Pre-built cards for server monitoring:

CpuCard - CPU usage display
CpuCoreGrid - Per-core CPU metrics
UsageMetricCard - Generic usage card
NetworkUsageCard - Network I/O display
ContainerUptimeCard - Server uptime
PlayersOnlineCard - Player count
RecentLogsCard - Log viewer
SystemInformationCard - System info
ContainerControlsCard - Start/stop/restart

Console

Terminal console component:

Console - Main console display
ScrollContext - Scroll management
TimestampTooltip - Log timestamps

Animations

Visual effects and animations:

FadeIn - Fade in effect
GlowCard - Glowing card
GradientText - Gradient text
FloatingParticles - Particle effect
AnimatedNumber - Number animation
ProgressRing - Circular progress
PulsingDot - Status indicator
NoiseOverlay - Noise texture
DropZone - Drag and drop

Utility Components

DragDropGrid - Draggable grid layout
UsageBar / NetworkBar - Progress bars
Sparkline - Mini line charts
ConfirmationModal - Confirm dialog
FormModal - Form dialog
PageTransition - Page animations
InfoTooltip - Info icon with tooltip

Custom Hooks

Hook	Description
`useDragAndDrop`	Drag and drop functionality
`useGridLayout`	Grid layout management
`useGridResize`	Grid resizing
`useGridStorage`	Persist grid state
`useSwapy`	Swapy integration
`useMobile`	Mobile detection

Usage

Import components from @workspace/ui:

import { Button } from '@workspace/ui/components/button';
import { Card, CardHeader, CardTitle } from '@workspace/ui/components/card';
import { CpuCard } from '@workspace/ui/components/cpu-card';

Styling

Components use Tailwind CSS with custom design tokens:

/* Primary colors */
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

/* Semantic colors */
--destructive: 0 84.2% 60.2%;
--muted: 210 40% 96.1%;
--accent: 210 40% 96.1%;

/* Chart colors */
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;

Utilities

The cn() utility merges Tailwind classes:

import { cn } from '@workspace/ui/lib/utils';

<div className={cn("base-class", conditional && "conditional-class")} />

Component Library

On this page