@byronwade/oxide-design-system

v0.1.2

Published

4 months ago

A high-performance, developer-first design system for gaming, productivity, and AI-integrated interfaces

Downloads

0High
0Medium
0Low

byronwade

design-system react typescript components ui gaming xbox polaris shadcn

🎨 Oxide Design System

A high-performance, developer-first, UX-obsessed design system powering the future of gaming, productivity, and AI-integrated interfaces with unmatched speed, creative flexibility, and a design language that speaks to both developers and users alike. With performance at its core and beauty in every pixel, Oxide is the framework that doesn’t just follow trends—it redefines them.

🔍 Overview

The Oxide Design System is a comprehensive, future-proof, and highly extensible framework designed to unify the visual language and component architecture across web and desktop applications. It enables consistent UI/UX experiences that scale effortlessly from early MVPs to enterprise-grade platforms.

Oxide empowers creators with modular, accessible, AI-compatible, and deeply themeable React components. Built from the ground up to deliver speed, visual fidelity, and predictability, it's ideal for teams building gaming platforms, SaaS dashboards, interactive tools, and next-gen desktop-like web apps. With full TypeScript support, robust documentation, dynamic theming, and a carefully engineered system of design tokens, Oxide ensures scalability and consistency from idea to deployment. It not only accelerates development but also ensures the visual and interactive cohesion of every application it touches.

📦 Installation & Usage

Shadcn-Style CLI Installation (Recommended)

The Oxide Design System uses a Shadcn-inspired CLI that copies source code directly into your project, giving you full control and customization:

# Initialize your project
npx @byronwade/oxide-cli@latest init

# Add components individually
npx @byronwade/oxide-cli@latest add button
npx @byronwade/oxide-cli@latest add card input

# Add multiple components at once
npx @byronwade/oxide-cli@latest add button card input badge

# Interactive component selection
npx @byronwade/oxide-cli@latest add

The CLI automatically:

Detects your framework (Next.js, Vite, Remix)
Installs dependencies (npm packages + component dependencies)
Configures import paths based on your project structure
Handles component updates with diff checking

Framework Support

Next.js (Recommended)

npx @byronwade/oxide-cli@latest init
# Auto-detects and configures for App Router or Pages Router

Vite/React

npx @byronwade/oxide-cli@latest init
# Configures src-based directory structure

Remix

npx @byronwade/oxide-cli@latest init
# Configures app-based directory structure

Component Management

# Check for component updates
npx @byronwade/oxide-cli@latest diff

# Update specific component
npx @byronwade/oxide-cli@latest add button --overwrite

# Add complex layouts (blocks)
npx @byronwade/oxide-cli@latest add dashboard-layout
npx @byronwade/oxide-cli@latest add marketing-hero

Alternative: Package Installation

For projects that prefer traditional package management:

# Configure GitHub Packages (create .npmrc)
@byronwade:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

# Install package
bun add @byronwade/oxide-design-system

Quick Start Example

import { Button, ThemeProvider, Text } from '@/components/ui';

function App() {
  return (
    <ThemeProvider>
      <div className="p-4">
        <Text variant="headingLg">Welcome to Oxide</Text>
        <Button theme="xbox" size="lg">
          Get Started
        </Button>
      </div>
    </ThemeProvider>
  );
}

Intelligent Updates

Your projects get updates in two ways:

CLI Updates: Run npx @byronwade/oxide-cli@latest diff to check for component updates
Package Updates: Traditional semver updates for the npm package
AI Integration: AI coding assistants can automatically manage components

🧭 Core Concepts

Oxide is built on a unique blend of gaming-native, productivity-focused, and modern web design principles. Every component and pattern is guided by these core concepts:

Native App Feel, On the Web
- Components feel like desktop/console apps, not websites
- No loading flicker, no scroll jank, pixel-perfect layouts
- Real-time keyboard and controller support
- Viewport-safe rendering for docked, windowed, or fullscreen modes
Unified Oxide/Xbox Visual Language
- Xbox Green (#107C10) as the primary accent
- Pure black backgrounds (#000000), Xbox grey surfaces (#1a1a1a, #2d2d2d)
- No gradients or transparencies; high-contrast hover states
- Subtle, app-like rounded corners (0.5rem–0.75rem)
Polaris-Influenced UX Patterns
- Form controls, data presentation, feedback, navigation, and layout inspired by Shopify Polaris
- Spacing, label placement, validation, and focus ring standards
- Table sorting, resource lists, modals, and notification stacks
Design Token Consistency
- All colors, spacing, typography, and radii use Oxide tokens
- Centralized theme engine for light/dark/Xbox/Steam/Indie/custom
- CSS variables and Tailwind config for full design control
Accessibility First
- WCAG 2.1 AA compliance, keyboard-first, screen reader support
- High contrast mode, reduced motion, and focus management
Performance Obsessed
- Zero runtime warnings, no memory leaks, optimized re-renders
- Tree-shakable exports, minimal bundle impact, fast initial render
Comprehensive Theming
- Light/dark mode, Xbox, Steam, and custom variants
- System preference detection and runtime theme switching
Quality Assurance
- 100% test coverage, a11y audits, visual snapshot testing
- Responsive across all breakpoints and device types

Oxide is "Shopify Polaris for gaming, AI apps, and native-feeling productivity software." Every edit, component, and pattern is checked against these principles for a consistent, high-quality experience.

💡 What Makes Oxide Better?

1. Native App Feel, On the Web

Oxide is built with a "native-first" mindset. Our system prioritizes fluidity, responsiveness, and layout conventions that match real operating systems—not just websites. Every component is designed to feel like a desktop or console app, with no loading flicker, no awkward scroll jank, and no UI that feels like it belongs in a browser tab instead of an application window.

Native behaviors mimic desktop applications and console OS UIs
Real-time keyboard and controller support for app-like interactivity
Components respect platform-specific spacing, elevation, and animation curves
Touchscreen interactions emulate mobile OS gestures with subtle haptics and momentum
Navigation patterns draw from Xbox, Steam, macOS, and Windows UWP
Visual language feels at home inside any native shell: Tauri, Electron, Capacitor, or PWA
Viewport-safe rendering ensures components behave predictably in docked, windowed, or fullscreen modes
Pixel-perfect mimicry of Windows, Xbox, macOS, and Fluent UI elements
Ultra-smooth transitions powered by Framer Motion with custom easing curves
Responsive to hover, tap, controller navigation, and keyboard focus states
Layouts inspired by Xbox dashboards, Game Pass UI, and modern design systems
Custom layout primitives that emulate desktop windowing, pane splitting, and modals
Integrated gesture support for touch, swipe, scroll, and pinch interactions
Screen reader-friendly focus paths with optional cursor indicators for game-like UX

2. Developer-Centric Tools

Built using TypeScript, Bun, and happy-dom for blazing-fast dev and test workflows
Fully tree-shakable components that only include what's used
Autocomplete-ready prop definitions with inline JSDoc comments
Utility-first composition: configure complex UIs using simple primitives
GitHub Packages with seamless .npmrc config for secure installs
Out-of-the-box support for monorepos, shared workspaces, and CI pipelines
Component CLI generator to scaffold new patterns instantly with test, story, and styles

3. Superior Accessibility (a11y)

Built from the ground up for WCAG 2.1 AA compliance
Keyboard-first interaction design with robust ARIA attributes
Every component passes axe-core scans and Lighthouse accessibility tests
Supports screen reader announcements, skip-links, and reduced motion modes
Real-time focus management in dialogs, drawers, sheets, and modals
High contrast variants and colorblind-safe palette tokens
Built-in support for localization and RTL (right-to-left) rendering

4. Design System + Theme Engine

Inspired by the best elements of modern design systems, Oxide fuses together the clarity of Shopify's Polaris, the flexibility of ShadCN/UI, the depth of Joy UI (Material Design), and the slick aesthetic of Vercel's dashboard. The result is a hybrid design system that feels familiar, looks stunning, and adapts effortlessly.

Leverages Shopify’s Polaris for grid rules, form elements, and admin UX patterns
Uses ShadCN’s composability and Tailwind-based theming to maximize developer speed
Joy UI (Material Design 3) influences adaptive density, rich visual elevation, and transitions
Vercel-inspired minimalist aesthetic with high-contrast layouts and polished motion
Includes ThemeWrapper for global light/dark/theme switching
Extend with custom themes using CSS variables and Tailwind overrides
System-aware theming: adapts to prefers-color-scheme by default
Scoped variables allow per-component branding without breaking layout
Exportable themes for use in Figma, Tailwind config, and token libraries
Preset theme packs: Xbox Green, Cyberpunk Neon, Steam, Indie Ink
Includes ThemeWrapper for global light/dark/theme switching
Extend with custom themes using CSS variables and Tailwind overrides
System-aware theming: adapts to prefers-color-scheme by default
Scoped variables allow per-component branding without breaking layout
Exportable themes for use in Figma, Tailwind config, and token libraries
Preset theme packs: Xbox Green, Cyberpunk Neon, Steam, Indie Ink

5. Design-Driven Component Architecture

Built with consistent design tokens for spacing, typography, and color
Each component is isolated, testable, responsive, and forwardRef-compatible
Motion presets help maintain animation consistency across transitions
Intuitive composition: easily nest, wrap, or override behavior using props
Component stories mirror real-world use cases to reduce guesswork
Layout APIs include grid areas, z-index levels, stack orders, and scroll snapping zones

6. Perfect for Gaming & Productivity

Features Xbox, Steam, and console-style components (buttons, cards, overlays)
Components respect dense layout toggles, useful for data-rich dashboards
Ideal for building store pages, game launchers, streaming overlays, and more
Fully responsive from mobile to 4K desktop—optimized for gaming rigs
Built-in HUD tools, notification overlays, controller prompts, and gamecard hooks
Modular widgets ready to integrate with leaderboards, Twitch APIs, and in-game stats

7. Low Friction Developer Experience

Start with bun dev, see changes in milliseconds
Component previews with knobs, args, and interaction states via Storybook
Use bun run release to test, build, and publish with CI/CD automation
Full GitHub Actions setup for type checking, linting, coverage, accessibility
Works with Next.js App Router, Remix, Astro, and even Tauri-based apps
Progressive documentation system that auto-generates live docs per component
Developer preview mode for staging unreleased design tokens or beta components

🎨 Design Principles

📐 Layout and Grid

Responsive 12-column fluid grid using Tailwind container settings
Uses fractional widths and breakpoint tokens for scalable layouts
Alignment utilities (justify, items, gap) ensure visual alignment
Grid overlays built into dev tools for layout verification
Grid helpers: Stack, Cluster, Wrap, and Area components

🧱 Spacing System

| Token | Value | Description | | ----- | -------- | --------------------------------- | | xs | 0.5rem | Used for icons, chips, micro gaps | | sm | 1rem | Default spacing in inputs, UI | | md | 1.5rem | Common for padding, margins | | lg | 2rem | Section spacing and cards | | xl | 3rem | Major layout breaks or spacing | | 2xl | 4rem | Hero blocks or viewport gaps | | 3xl | 6rem | Page-level layout dividers |

🔤 Typography

Typography scale follows Tailwind text-xs to text-8xl
Uses Inter, with fallbacks to system fonts for performance
Typography utilities include leading, tracking, font-weight
Headings (h1–h6) mapped to Tailwind utilities and semantic HTML
Emphasis components: Blockquote, Code, Kbd, Small, InlineAlert
Dynamic font sizing via CSS clamp for fluid scaling
Readability settings: max-width control, line length guidance, contextual spacing

🟦 Radius & Density Modes

Subtle, app-like rounded corners are applied consistently across all components (typically 0.5rem to 0.75rem)
UI density modes available:
- Compact: Ideal for dashboards, productivity, or devtools
- Normal: Balanced default for general applications
- Cozy: Slightly more breathing room, great for relaxed interfaces
- Spacious: Optimized for accessibility, touchscreen, or kiosk-style apps

🎨 Color Tokens

🟩 Note: Oxide’s primary brand color is Xbox Green (#107C10), used for all CTAs, highlights, and system accents. This reinforces our gaming-native identity and gives the interface a bold, familiar aesthetic. | Token | Light Mode | Dark Mode | Use Case | |---------------|------------|-----------|----------------------------------| | bg-primary | #ffffff | #000000 | App body and page background | | text-primary| #111111 | #f1f1f1 | Default readable text | | accent | #107C10 | #107C10 | Buttons, links, interaction areas| | surface | #f5f5f5 | #1a1a1a | Cards, sheets, modals (Xbox grey)| | error | #ef4444 | #f87171 | Validation, alerts, failures | | muted | #9ca3af | #6b7280 | Placeholder, disabled, secondary | | success | #22c55e | #4ade80 | Confirmations, success messages | | warning | #f59e0b | #fbbf24 | Warnings, caution flags |
🎮 Unified Oxide/Xbox Color System: Oxide and Xbox themes now use the same unified color palette - pure black backgrounds (#000000) with authentic Xbox grey surfaces (#1a1a1a for primary surfaces, #2d2d2d for secondary surfaces) and Xbox Green (#107C10) accents for a consistent gaming-native experience.

🌙 Dark Mode Support

Auto-detection via media query (prefers-color-scheme)
Smooth transitions with transition-colors and ease-in-out
Fully supports Tailwind dark variant and custom dark token overrides
Allows user overrides with persistent context storage
Includes system preference fallback logic and toggle buttons

🧩 Component Alignment with Polaris

Oxide doesn't just take light inspiration from Shopify Polaris React—we study and incorporate it systematically to ensure the highest quality UX standards. Polaris provides a robust reference point for designing consistent and intuitive admin and commerce interfaces, and Oxide integrates its conventions with an Xbox-styled, gaming-native edge.

Here’s how Oxide maps to Polaris in greater detail:

📥 Form Controls

Oxide provides comprehensive form components following Polaris design principles with Xbox theming:

// Text Input with validation
<InputWithError label="Email Address" required error={errors.email}>
  <Input
    type="email"
    placeholder="[email protected]"
    value={formData.email}
    onChange={(e) => handleInputChange("email", e.target.value)}
    className={errors.email ? "border-destructive" : ""}
  />
</InputWithError>

// Password input with strength indicator
<InputWithError label="Password" required error={errors.password}>
  <div className="relative">
    <Input
      type={showPassword ? "text" : "password"}
      placeholder="Enter your password"
      className="pr-10"
      value={formData.password}
      onChange={(e) => handleInputChange("password", e.target.value)}
    />
    <Button
      type="button"
      variant="ghost"
      size="sm"
      className="absolute right-2 top-1/2 transform -translate-y-1/2"
      onClick={() => setShowPassword(!showPassword)}
    >
      {showPassword ? <EyeOff /> : <Eye />}
    </Button>
  </div>
</InputWithError>

// Checkbox with description
<div className="flex items-center space-x-2">
  <Checkbox
    id="notifications"
    checked={formData.notifications}
    onCheckedChange={(checked) => handleInputChange("notifications", checked)}
  />
  <div className="space-y-1">
    <Label htmlFor="notifications">Email Notifications</Label>
    <p className="text-xs text-muted-foreground">
      Receive updates about your account and new features
    </p>
  </div>
</div>

// Radio group with visual cards
<RadioGroup value={formData.plan} onValueChange={setValue}>
  {plans.map((plan) => (
    <div key={plan.value} className="flex items-start space-x-3 p-3 border rounded-sm hover:bg-muted/50">
      <RadioGroupItem value={plan.value} id={plan.value} />
      <div className="flex-1">
        <Label htmlFor={plan.value} className="font-medium flex items-center justify-between">
          <span>{plan.label}</span>
          <Badge variant="outline">{plan.price}</Badge>
        </Label>
        <p className="text-sm text-muted-foreground">{plan.description}</p>
      </div>
    </div>
  ))}
</RadioGroup>

Key Features:

Polaris spacing, label placement, and validation conventions
Error messages and helper text with consistent visual hierarchy
Focus rings following accessibility standards with Xbox brand aesthetic
Built-in validation states (success, error, warning)
Password strength indicators and visibility toggles
Accessibility-first design with proper ARIA labels and keyboard navigation

🔗 Explore Form Controls →

🧾 Data Presentation

Oxide provides powerful data visualization components optimized for both business and gaming contexts:

// Analytics Dashboard with real-time KPIs
<Card>
  <CardHeader>
    <CardTitle className="flex items-center space-x-2">
      <BarChart3 className="h-5 w-5" />
      <span>Revenue Analytics</span>
    </CardTitle>
  </CardHeader>
  <CardContent>
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      {kpis.map((kpi) => (
        <div key={kpi.title} className="p-4 bg-muted rounded-sm">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-muted-foreground">{kpi.title}</span>
            {kpi.icon}
          </div>
          <div className="text-2xl font-bold">{kpi.value}</div>
          <div className="flex items-center space-x-1 text-xs">
            {kpi.trend === "up" ? (
              <ArrowUpRight className="h-3 w-3 text-green-500" />
            ) : (
              <ArrowDownRight className="h-3 w-3 text-red-500" />
            )}
            <span className={kpi.trend === "up" ? "text-green-500" : "text-red-500"}>
              {kpi.change}
            </span>
          </div>
        </div>
      ))}
    </div>
  </CardContent>
</Card>

// E-commerce Product Cards
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {products.map((product) => (
    <Card key={product.id} className="hover:shadow-lg transition-shadow">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <Badge variant="outline">Featured</Badge>
          <Heart className="h-4 w-4 text-muted-foreground" />
        </div>
      </CardHeader>
      <CardContent>
        <AspectRatio ratio={1} className="bg-muted rounded-sm mb-4">
          <div className="flex items-center justify-center h-full text-4xl">
            {product.image}
          </div>
        </AspectRatio>
        <h3 className="font-medium mb-2">{product.name}</h3>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-1">
            <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
            <span className="text-sm">{product.rating}</span>
          </div>
          <Button size="sm" theme="xbox">Add to Cart</Button>
        </div>
      </CardContent>
    </Card>
  ))}
</div>

// Progress and Status Indicators
<div className="space-y-4">
  <div className="space-y-2">
    <div className="flex justify-between text-sm">
      <span>Upload Progress</span>
      <span>65%</span>
    </div>
    <Progress value={65} />
  </div>
  
  <div className="flex items-center space-x-2">
    <Badge variant="outline" className="flex items-center space-x-1">
      <div className="w-2 h-2 bg-green-500 rounded-full" />
      <span>Online</span>
    </Badge>
    <Badge variant="secondary">Processing</Badge>
    <Badge variant="destructive">Error</Badge>
  </div>
</div>

Key Features:

Tables, resource lists, and collection views with Polaris sorting/filtering mechanics
Empty states and loading indicators with clear, communicative visual metaphors
Tags, pills, and badges aligned with Polaris density and status semantics
Real-time data visualization with smooth animations
Responsive card layouts optimized for different screen sizes
Gaming-enhanced progress indicators and status badges

🔗 Explore Analytics Platform → 🔗 Explore E-commerce Product →

🧠 Feedback & Alerts

Oxide provides intelligent feedback systems with AI-powered interactions and contextual notifications:

// AI Assistant Chat Interface
<Card className="h-96">
  <CardHeader>
    <CardTitle className="flex items-center space-x-2">
      <Bot className="h-5 w-5 text-[#107c10]" />
      <span>AI Assistant</span>
      <Badge variant="outline" className="ml-auto">Online</Badge>
    </CardTitle>
  </CardHeader>
  <CardContent className="flex-1 p-0">
    <ScrollArea className="h-full p-6">
      {messages.map((message) => (
        <div key={message.id} className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"} mb-4`}>
          <div className={`max-w-[80%] rounded-lg px-4 py-3 ${
            message.sender === "user" 
              ? "bg-primary text-primary-foreground" 
              : "bg-muted"
          }`}>
            <Text variant="bodySm">{message.content}</Text>
          </div>
        </div>
      ))}
      
      {/* Typing Indicator */}
      {isTyping && (
        <div className="flex justify-start mb-4">
          <div className="bg-muted rounded-lg px-4 py-3">
            <div className="flex space-x-1">
              <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" />
              <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: "0.1s" }} />
              <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" style={{ animationDelay: "0.2s" }} />
            </div>
          </div>
        </div>
      )}
    </ScrollArea>
  </CardContent>
  
  {/* Input Area */}
  <div className="border-t p-4">
    <form onSubmit={handleSendMessage}>
      <div className="flex items-center space-x-3">
        <Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Ask me anything about Oxide Design System..."
          className="flex-1"
          disabled={isTyping}
        />
        <Button type="submit" theme="xbox" disabled={!inputValue.trim() || isTyping}>
          <Send className="h-4 w-4" />
        </Button>
      </div>
    </form>
  </div>
</Card>

// Contextual Alerts with Validation States
<div className="space-y-4">
  {/* Success Alert */}
  <Alert>
    <CheckCircle className="h-4 w-4" />
    <AlertDescription>
      Your profile has been updated successfully.
    </AlertDescription>
  </Alert>

  {/* Warning Alert */}
  <Alert variant="destructive">
    <AlertCircle className="h-4 w-4" />
    <AlertDescription>
      Some fields require your attention before you can continue.
    </AlertDescription>
  </Alert>

  {/* Info Alert with Action */}
  <Alert>
    <Info className="h-4 w-4" />
    <AlertDescription className="flex items-center justify-between">
      <span>New features are available in the latest update.</span>
      <Button variant="outline" size="sm">Learn More</Button>
    </AlertDescription>
  </Alert>
</div>

// Gaming-Style Notifications
<div className="fixed top-4 right-4 space-y-2 z-50">
  <div className="bg-[#107c10] text-white p-4 rounded-sm shadow-lg animate-slide-in">
    <div className="flex items-center space-x-3">
      <Trophy className="h-5 w-5" />
      <div>
        <div className="font-medium">Achievement Unlocked!</div>
        <div className="text-sm opacity-90">You've completed all form validations</div>
      </div>
    </div>
  </div>
</div>

Key Features:

Toasts, banners, and modals following Polaris's non-intrusive philosophy
AI-powered chat interfaces with real-time responses and typing indicators
Contextual validation states with clear visual hierarchy
Gaming-enhanced notifications with Xbox-style achievement system
Notification stacks that are capped and non-overlapping
Accessibility-first design with proper ARIA announcements

🔗 Explore AI Assistant →

🔘 Buttons & Actions

Oxide provides a comprehensive button system with Xbox theming and Polaris interaction patterns:

// Primary Actions with Theme Support
<div className="flex items-center space-x-4">
  <Button theme="xbox">Xbox Primary</Button>
  <Button theme="polaris">Polaris Primary</Button>
  <Button theme="default">Default Primary</Button>
</div>

// Button Hierarchy and States
<div className="space-y-4">
  {/* Primary Actions */}
  <div className="flex items-center space-x-3">
    <Button theme="xbox" size="lg">Primary Action</Button>
    <Button variant="outline" size="lg">Secondary Action</Button>
    <Button variant="ghost" size="lg">Tertiary Action</Button>
  </div>

  {/* Destructive Actions */}
  <div className="flex items-center space-x-3">
    <Button variant="destructive">Delete Account</Button>
    <Button variant="outline" className="border-destructive text-destructive hover:bg-destructive hover:text-white">
      Cancel Subscription
    </Button>
  </div>

  {/* Loading States */}
  <div className="flex items-center space-x-3">
    <Button disabled>
      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
      Processing...
    </Button>
    <Button theme="xbox" disabled>Disabled State</Button>
  </div>
</div>

// Gaming-Enhanced Action Groups
<div className="flex items-center space-x-2 bg-[#1a1a1a] p-2 rounded-sm">
  <Button variant="ghost" size="sm" className="text-white hover:bg-[#2d2d2d]">
    <Play className="h-4 w-4 mr-2" />
    Play
  </Button>
  <Button variant="ghost" size="sm" className="text-white hover:bg-[#2d2d2d]">
    <Pause className="h-4 w-4 mr-2" />
    Pause
  </Button>
  <Button variant="ghost" size="sm" className="text-white hover:bg-[#2d2d2d]">
    <Volume2 className="h-4 w-4 mr-2" />
    Audio
  </Button>
  <Separator orientation="vertical" className="h-6 bg-[#2d2d2d]" />
  <Button variant="ghost" size="sm" className="text-white hover:bg-[#2d2d2d]">
    <Settings className="h-4 w-4" />
  </Button>
</div>

// Responsive Button Groups
<div className="flex flex-col sm:flex-row gap-3 sm:gap-2">
  <Button className="flex-1 sm:flex-none" theme="xbox">
    <Save className="h-4 w-4 mr-2" />
    Save Changes
  </Button>
  <Button variant="outline" className="flex-1 sm:flex-none">
    <Download className="h-4 w-4 mr-2" />
    Export Data
  </Button>
  <Button variant="ghost" className="flex-1 sm:flex-none">
    <Share className="h-4 w-4 mr-2" />
    Share
  </Button>
</div>

// Interactive Component Playground Integration
<div className="border rounded-sm p-4 bg-muted/30">
  <div className="flex items-center justify-between mb-4">
    <h3 className="font-medium">Live Button Customizer</h3>
    <Badge variant="outline">Interactive</Badge>
  </div>
  
  {/* Real-time button preview */}
  <div className="flex items-center justify-center p-8 bg-background rounded-sm mb-4">
    <Button 
      theme={selectedTheme}
      variant={selectedVariant}
      size={selectedSize}
      disabled={isDisabled}
    >
      {buttonText || "Sample Button"}
    </Button>
  </div>
  
  {/* Controls */}
  <div className="grid grid-cols-2 gap-4">
    <div className="space-y-2">
      <Label>Theme</Label>
      <Select value={selectedTheme} onValueChange={setSelectedTheme}>
        <SelectTrigger>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="xbox">Xbox</SelectItem>
          <SelectItem value="polaris">Polaris</SelectItem>
          <SelectItem value="default">Default</SelectItem>
        </SelectContent>
      </Select>
    </div>
    <div className="space-y-2">
      <Label>Size</Label>
      <Select value={selectedSize} onValueChange={setSelectedSize}>
        <SelectTrigger>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="sm">Small</SelectItem>
          <SelectItem value="md">Medium</SelectItem>
          <SelectItem value="lg">Large</SelectItem>
        </SelectContent>
      </Select>
    </div>
  </div>
</div>

Key Features:

Primary and secondary button hierarchy styled after Polaris patterns
Xbox-themed variants with proper contrast and accessibility
Spacing logic optimized for paired actions and destructive states
Action groups with mobile responsiveness and logical grouping
Gaming-enhanced button styles with dark theme optimization
Interactive playground integration for real-time customization

🔗 Explore Component Playground →

🧭 Navigation Patterns

Oxide provides enterprise-grade navigation with responsive layouts and accessibility-first design:

// Gaming Dashboard Layout
<div className="min-h-screen bg-[#000000]">
  <header className="border-b border-[#2d2d2d] bg-[#1a1a1a]">
    <div className="container mx-auto px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-[#107c10] rounded-sm flex items-center justify-center">
            <Gamepad2 className="h-5 w-5 text-white" />
          </div>
          <h1 className="text-xl font-bold text-white">Xbox Gaming</h1>
        </div>
        <nav className="flex items-center gap-3">
          <Button variant="ghost" size="sm" className="text-neutral-300 hover:text-white">
            <Search className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm" className="text-neutral-300 hover:text-white">
            <Bell className="h-4 w-4" />
          </Button>
          <Avatar>
            <AvatarFallback className="bg-[#107c10] text-white">G</AvatarFallback>
          </Avatar>
        </nav>
      </div>
    </div>
  </header>
</div>

// Admin Dashboard Sidebar
<div className="grid grid-cols-5 min-h-screen">
  <aside className="bg-card border-r">
    <div className="p-6">
      <div className="flex items-center space-x-2 mb-8">
        <div className="w-8 h-8 bg-primary rounded-sm" />
        <span className="font-bold">Admin Panel</span>
      </div>
      
      <nav className="space-y-2">
        {[
          { icon: Home, label: "Dashboard", active: true },
          { icon: BarChart3, label: "Analytics" },
          { icon: ShoppingCart, label: "Orders" },
          { icon: Users, label: "Customers" },
          { icon: Settings, label: "Settings" }
        ].map((item) => (
          <Button
            key={item.label}
            variant={item.active ? "default" : "ghost"}
            className="w-full justify-start"
          >
            <item.icon className="h-4 w-4 mr-3" />
            {item.label}
          </Button>
        ))}
      </nav>
    </div>
  </aside>
  
  <main className="col-span-4 p-6">
    {/* Main content */}
  </main>
</div>

// Responsive Breadcrumb Navigation
<nav aria-label="Breadcrumb" className="mb-6">
  <ol className="flex items-center space-x-2 text-sm">
    <li>
      <Link href="/" className="text-muted-foreground hover:text-foreground">
        Home
      </Link>
    </li>
    <li aria-hidden="true">
      <ChevronRight className="h-4 w-4 text-muted-foreground" />
    </li>
    <li>
      <Link href="/gaming" className="text-muted-foreground hover:text-foreground">
        Gaming
      </Link>
    </li>
    <li aria-hidden="true">
      <ChevronRight className="h-4 w-4 text-muted-foreground" />
    </li>
    <li aria-current="page" className="text-foreground font-medium">
      Controllers
    </li>
  </ol>
</nav>

// Responsive Grid Layout System
<div className="container mx-auto px-6 py-8">
  {/* Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns */}
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    {items.map((item) => (
      <Card key={item.id} className="hover:shadow-lg transition-shadow">
        <CardContent className="p-6">
          <h3 className="font-medium mb-2">{item.title}</h3>
          <p className="text-sm text-muted-foreground">{item.description}</p>
        </CardContent>
      </Card>
    ))}
  </div>
  
  {/* Responsive Container Sizes */}
  <div className="max-w-sm sm:max-w-md lg:max-w-4xl xl:max-w-6xl mx-auto">
    <Text>Content adapts to screen size with proper constraints</Text>
  </div>
</div>

// Tab Navigation with Gaming Theme
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
  <TabsList className="grid w-full grid-cols-4 bg-[#1a1a1a] border-[#2d2d2d]">
    <TabsTrigger value="overview" className="text-white data-[state=active]:bg-[#107c10]">
      Overview
    </TabsTrigger>
    <TabsTrigger value="stats" className="text-white data-[state=active]:bg-[#107c10]">
      Stats
    </TabsTrigger>
    <TabsTrigger value="achievements" className="text-white data-[state=active]:bg-[#107c10]">
      Achievements
    </TabsTrigger>
    <TabsTrigger value="settings" className="text-white data-[state=active]:bg-[#107c10]">
      Settings
    </TabsTrigger>
  </TabsList>
  
  <TabsContent value="overview">
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Tab content */}
    </div>
  </TabsContent>
</Tabs>

Key Features:

Sidebars, tabs, and breadcrumbs reflecting Polaris UX goals
Clear hierarchy with progressive disclosure and keyboard navigation
Unified design for header controls, filters, and contextual tools
Mobile-first responsive design with proper breakpoints
Gaming-enhanced navigation with Xbox visual language
Accessibility-compliant navigation patterns

🔗 Explore Layout Showcase →

📐 Layout Foundations & Theming

Oxide provides multiple theme variants and comprehensive layout systems:

// Multi-Theme Support
<Button theme="xbox">Xbox Gaming Style</Button>
<Button theme="polaris">Shopify Business Style</Button>
<Button theme="default">Balanced Default Style</Button>

// Theme Provider Setup
<ThemeProvider theme="xbox">
  <div className="min-h-screen bg-background text-foreground">
    <YourApp />
  </div>
</ThemeProvider>

// Custom Theme Creation
const customTheme = {
  primary: "#8b5cf6",
  background: "#ffffff", 
  surface: "#f4f4f5",
  text: "#18181b"
};

// Responsive Layout System
<Container size="lg">
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    {/* Auto-responsive content */}
  </div>
</Container>

Key Features:

Typography sizes, line heights, and content width limits following Polaris research
Layout components with visual rhythm extended for Xbox styling and gaming dashboards
Comprehensive theme system with Xbox, Polaris, and custom variants
Dark/light mode support with automatic contrast adjustment
Responsive breakpoint system optimized for all device sizes

🔗 Explore Theme Gallery →

🎮 Comprehensive Example Showcase

Oxide includes enterprise-ready example pages demonstrating real-world applications:

🏢 Business & Enterprise Applications

Admin Dashboard `/examples/admin-dashboard`

Polaris-inspired admin interface with comprehensive data management:

Real-time analytics and KPI dashboards
Data tables with sorting, filtering, and pagination
User management and role-based access controls
Professional business theming with clean aesthetics

Analytics Platform `/examples/analytics-platform`

Data-rich analytics interface for business intelligence:

Interactive charts and real-time metrics
Custom dashboard creation and configuration
Advanced reporting and data visualization
Performance-optimized for large datasets

Form Controls Showcase `/examples/form-controls`

Comprehensive form patterns following Polaris design principles:

Advanced validation states and error handling
Multi-step forms with progress indicators
Accessibility-compliant form controls
Password strength indicators and input masking

🎯 Gaming & Entertainment

Gaming Dashboard `/examples/gaming-dashboard`

Xbox-themed gaming interface with native gaming patterns:

Player stats, achievements, and leaderboards
Game library management and discovery
Xbox Live integration patterns
Dark theme optimized for gaming environments

E-commerce Product `/examples/ecommerce-product`

Product showcase with shopping and review features:

Image galleries with zoom and carousel functionality
Product specifications and comparison tools
Customer reviews and rating systems
Shopping cart integration with real-time updates

🤖 AI & Modern Web

AI Assistant `/examples/ai-assistant`

Interactive chat interface with conversational AI:

Real-time messaging with typing indicators
Contextual suggestions and smart prompts
Session management and conversation history
Accessibility-optimized chat experience

Marketing Landing `/examples/marketing-landing`

Modern marketing website with conversion optimization:

Hero sections with compelling call-to-actions
Feature highlights and benefit showcases
Pricing tables and comparison matrices
Lead generation forms and conversion tracking

🛠 Developer Tools

Component Playground `/examples/component-playground`

Interactive testing environment for component customization:

Real-time component property editing
Live code generation and export capabilities
Theme switching and responsive testing
Accessibility validation and testing tools

Layout Showcase `/examples/layout-showcase`

Responsive design patterns and layout templates:

Grid system demonstrations and breakpoint testing
Sidebar layouts with collapsible navigation
Hero section patterns for different use cases
Mobile-first responsive design examples

Theme Gallery `/examples/theme-gallery`

Complete theme exploration and customization:

Live theme previews with real components
Custom theme builder with color picker
Dark/light mode switching capabilities
Theme export and implementation guides

🚀 Getting Started with Examples

# Explore all examples
npm run dev
# Navigate to http://localhost:3000/examples

# Or jump directly to specific examples:
# http://localhost:3000/examples/admin-dashboard
# http://localhost:3000/examples/gaming-dashboard
# http://localhost:3000/examples/ai-assistant
# http://localhost:3000/examples/component-playground

Each example includes:

SEO-optimized with comprehensive metadata and JSON-LD structured data
Accessibility-compliant with WCAG 2.1 AA standards
Mobile-responsive with mobile-first design principles
Performance-optimized with code splitting and lazy loading
Enterprise-ready with proper error handling and validation

🔗 Browse All Examples →

In short: Oxide is Shopify Polaris for gaming, AI apps, and native-feeling productivity software. Clean, enterprise-class UI—modernized for gamers, creators, and speed-obsessed developers.

All Oxide components are informed by and aligned with the Shopify Polaris React system. We actively reference Polaris for:

Accessibility structures and validation
Input behaviors and form layout standards
Data table interactions and keyboard navigation
Button sizing, radius, and action grouping logic
Consistent feedback components (e.g., toasts, banners, modals)

This allows developers to build interfaces that feel polished, familiar, and enterprise-ready—while still tailored to the Xbox-inspired, gamer-first aesthetic Oxide brings.

📦 Component Quality Standards

Each component in Oxide is battle-tested with:

✅ 100% test coverage using Bun’s blazing-fast runner
✅ Full a11y audit using axe-core and jest-axe
✅ Visual snapshot testing via Storybook
✅ Zero TypeScript errors across all prop combinations
✅ Responsive behavior on all viewports
✅ No unused styles, no runtime warnings, no memory leaks
✅ CI-verified accessibility reports and rendering metrics
✅ Performance benchmark logs against industry standards

✨ Unique Components That Set Oxide Apart

| Component | Why It’s Special | | ------------------- | ------------------------------------------------------------------ | | XboxButton | Animated, ripple-enabled, controller-ready buttons | | AIChatContainer | Live AI interaction UI with streaming token support | | UploadSpeed | Dynamic speed meter with transfer progress and time remaining | | Kanban | Draggable task board with smart snapping and accessibility | | ChatMessageModern | Animated AI-like message bubbles with delay-based reveal | | ProgressiveBlur | Blur overlay that intensifies during load states | | Resizable | Developer IDE-style panels with snapping, state memory, and resize | | GameCardUnified | Multi-state game card with trailer preview, pricing, and rating | | ThemeWrapper | Runtime theme switcher with scope-based overrides | | Command | Fully interactive command palette with keyboard and AI input | | CarouselGrid | Advanced multi-slide content grid for game showcases |

🚀 Design Tokens Architecture

Colors: Defined in CSS custom properties and Tailwind theme extensions
Typography: Centralized through Tailwind plugin config for headings, body, and captions
Spacing: Uses rem-based tokens to maintain scaling accessibility
Radii/Shadow: Shared system for cards, buttons, overlays (xs → xl)
Motion: Consistent motion via Framer variants (ease-snappy, ease-decelerate)
Z-Index: Tokenized layers for dialog, sheet, tooltip, modal, etc.
Utilities: Utility classes available for motion-safe, contrast, elevation, and density
Density Modes: Toggle between compact, cozy, and spacious UI themes
Breakpoint Tokens: Responsive helpers (xs, sm, md, lg, xl, 2xl, 4k)

🧠 AI-First Interface Compatibility

Oxide components are built to power intelligent UIs:

Command: Register commands with built-in fuzzy matching and keyboard access
AIChatContainer: Integrated token streaming, bot roles, history context
RichTextEditor: Accepts AI-generated formatting, autocomplete, and comments
Context-passing between components for longform chat or document memory
Custom AI block styles for highlighting, callouts, and reasoning chains
Support for chat thread replay, prompt history, embedded agents, and tool feedback

🧪 Component Testing & Reliability

Powered by Bun for fast file I/O and test boot times
DOM simulated with happy-dom for React Testing Library compatibility
Visual test snapshots for all variants
Lint rules enforced via biome and eslint-config-oxide
Every PR blocked on test pass + coverage + a11y + type pass
Support for batch testing, parallel runs, and selective coverage skips
Test report dashboards and per-component health indicators

📈 Developer Workflow

bun dev                # Launch local dev server with hot reload
bun storybook          # View and interact with all components
bun test               # Full test suite with coverage
bun lint               # Static analysis with biome rules
bun run release:minor  # Publish new minor version to GitHub Packages
bun format             # Format codebase with Prettier and biome

🏆 Why Choose Oxide?

Console-Class UX: Built for game launchers, store pages, and mod UIs
Lightning Fast: No bloat, zero runtime surprises, low-memory rendering
AI-Ready: Token streaming, command interfaces, memory state, all built-in
Typed by Default: TypeScript, JSDoc, and IDE-friendly APIs
Framework Agnostic: Works with Next.js, Remix, Vite, Tauri, Electron
Theme-Driven: Dark, light, Xbox, Steam, Indie, or your own flavor
Production-Tested: Proven in commercial and open-source apps with thousands of users
Zero Lock-In: Import only what you use, leave the rest behind

Oxide is your weapon of choice for building the next generation of performance-first, design-rich, and AI-enhanced applications across the web, desktop, and beyond. If you're serious about the future of UI, it's time to build with Oxide.

📘 Learn More

Full Docs: /src/components/docs/
GitHub: https://github.com/byronwade/oxide-components
Issues: https://github.com/byronwade/oxide-components/issues

Built with 💚 by Byron Wade, engineered to evolve with the future of interactive software and trusted by developers and designers pushing boundaries.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🎨 Oxide Design System

🔍 Overview

📦 Installation & Usage

Shadcn-Style CLI Installation (Recommended)

Framework Support

Next.js (Recommended)

Vite/React

Remix

Component Management

Alternative: Package Installation

Quick Start Example

Intelligent Updates

🧭 Core Concepts

💡 What Makes Oxide Better?

1. Native App Feel, On the Web

2. Developer-Centric Tools

3. Superior Accessibility (a11y)

4. Design System + Theme Engine

5. Design-Driven Component Architecture

6. Perfect for Gaming & Productivity

7. Low Friction Developer Experience

🎨 Design Principles

📐 Layout and Grid

🧱 Spacing System

🔤 Typography

🟦 Radius & Density Modes

🎨 Color Tokens

🌙 Dark Mode Support

🧩 Component Alignment with Polaris

📥 Form Controls

🧾 Data Presentation

🧠 Feedback & Alerts

🔘 Buttons & Actions

🧭 Navigation Patterns

📐 Layout Foundations & Theming

🎮 Comprehensive Example Showcase

🏢 Business & Enterprise Applications

Admin Dashboard /examples/admin-dashboard

Analytics Platform /examples/analytics-platform

Form Controls Showcase /examples/form-controls

🎯 Gaming & Entertainment

Gaming Dashboard /examples/gaming-dashboard

E-commerce Product /examples/ecommerce-product

🤖 AI & Modern Web

AI Assistant /examples/ai-assistant

Marketing Landing /examples/marketing-landing

🛠 Developer Tools

Component Playground /examples/component-playground

Layout Showcase /examples/layout-showcase

Theme Gallery /examples/theme-gallery

🚀 Getting Started with Examples

📦 Component Quality Standards

✨ Unique Components That Set Oxide Apart

🚀 Design Tokens Architecture

🧠 AI-First Interface Compatibility

🧪 Component Testing & Reliability

📈 Developer Workflow

🏆 Why Choose Oxide?

📘 Learn More

Admin Dashboard `/examples/admin-dashboard`

Analytics Platform `/examples/analytics-platform`

Form Controls Showcase `/examples/form-controls`

Gaming Dashboard `/examples/gaming-dashboard`

E-commerce Product `/examples/ecommerce-product`

AI Assistant `/examples/ai-assistant`

Marketing Landing `/examples/marketing-landing`

Component Playground `/examples/component-playground`

Layout Showcase `/examples/layout-showcase`

Theme Gallery `/examples/theme-gallery`