GT-UI: Retro-Industrial Glass OS

"Sinematik Kullanıcı Arayüzü" — A Fictional User Interface (FUI) Component Library

A zero-dependency React + TypeScript + Native CSS component library that fuses four iconic design languages:

| Influence | Contribution | | ----------------------------- | ------------------------------------------------- | | Apple | Usability, fluidity, glassmorphism | | eDEX-UI | Cyberpunk data visualization, terminal aesthetics | | TVA (Loki) | Analog warmth, bureaucratic retro, amber tones | | Aperture Science (Portal) | Industrial sterility, scientific precision |

Installation

pnpm add @alazndy/gt-ui
# or
npm install @alazndy/gt-ui

Quick Start

1. Style Setup

GT-UI is a Native CSS library. No Tailwind configuration is required. Simply import the core styles in your root entry file (e.g., main.tsx or App.tsx):

import "@alazndy/gt-ui/dist/gt-ui.css"; // 👈 Required: Loads all theme variables and core styles

2. Provider Setup

Wrap your application with GTProvider to enable themes and sound effects:

import { GTProvider } from "@alazndy/gt-ui";

function App() {
  return (
    <GTProvider
      defaultTheme="dark" // Options: 'dark', 'light', 'system' + 8 FUI themes
      soundEnabled={true}
      crtOverlay={true}
    >
      <YourApp />
    </GTProvider>
  );
}

Features

• 🎨 FUI Design System - 8 Core Aesthetics including LCARS, Vitruvian, JazzNoir, Archer.
• 💠 Hybrid Iconography - <TechIcon />.
• 📊 Data Visualization - <Sparkline />, <Chart />, <GenerativeGrid />.
• 🔊 Sound Effects - 12+ Synthesized UI sounds with useSound hook.
• 📦 75+ Components - Comprehensive library matching modern standards. View Component Reference
• 🚀 Premium FUI - Advanced specialized components like VitalsMonitor, HexagonGrid, and Commlink.

Design System

GT-UI implements a comprehensive Theme x Variant system. You can mix and match aesthetics across your entire application or per component.

🎨 Themes (Universes)

Pass the theme prop (e.g., <Button theme="lcars" />) to switch aesthetics:

| Theme | Inspiration | Visual Style | | :------------ | :---------- | :---------------------------------------- | | default | Modern | Standard Clean Dark UI | | lcars | Star Trek | Rounded Corners, Orange/Purple, Blocky | | aperture | Portal | Sterile White, Scientific, Orange Accents | | tva | Loki | Analog Retro, Amber CRT, Bureaucratic | | edex | eDEX-UI | Cyberpunk Terminal, Neon Green/Blue | | vitruvian | Da Vinci | Sepia, Sketchy, Hand-drawn lines | | jazznoir | Persona 5 | High Contrast, Red/Black, Kinetic | | archer | Archer | Bold Outlines, 60s Pop Art, Pastel | | cyber | Cyberpunk | High Tech, Glitch, Neon Pink/Blue |

💠 Variants

Structural styles available across most components:

• solid: High emphasis, filled background.
• outline: Medium emphasis, bordered.
• ghost: Low emphasis, transparent background (hover only).
• glass: Frosted glass effect (Blur).
• neon: Glowing borders and text.

📏 Sizes

Standardized sizing prop size: xs, sm, md (default), lg, xl

Component Library

Structure & Layout

• Shell: AppShell (Responsive layout with sidebar/header)
• Panels: Resizable, ScrollArea, Sheet, Drawer
• Primitives: AspectRatio, Separator

Forms & Inputs

• Controls: Button, Switch, Checkbox, RadioGroup, Slider, Knob, Toggle, ToggleGroup, ColorInput
• Text: Input, Textarea, InputGroup
• Selection: Select, Combobox, DatePicker, Calendar
• Framework: Form (React Hook Form wrapper), Label

Navigation

• Menus: NavigationMenu, Menubar, DropdownMenu, ContextMenu
• Routing: Pagination, Tabs, Breadcrumb
• Command Palette: Command (cmdk based)

Feedback & Overlay

• Dialogs: Modal, AlertDialog, Sheet, Drawer
• Feedback: Toaster (Sonner), Alert, Progress, Spinner, Toast, Skeleton
• Info: Tooltip, HoverCard

Data & Display

• Visuals: Card, Stat, Badge, Avatar, Tag, AspectRatio, Divider, TechIcon
• Technical: Kbd, CodeBlock, Terminal, SystemMonitor, Timeline, Tree
• Lists: Table, Datagrid, Carousel
• Charts: Sparkline, Chart

⭐️ Premium FUI (v1.0 Exclusives)

• HUD/Status: VitalsMonitor (Iron Man style rings), HexagonGrid (Hive stats), EmptyState (Holographic), SoundWave
• Communications: Commlink (Tactical Chat), Sidebar (Collapsible AppRail)
• Data/IO: TransferList (Matrix Migration), DataIngestion (Drag & Drop Port)
• Tools: ThemeBuilder (Live definition editor), CommandCenter (Dashboard example)

Theme Customization

GT-UI uses CSS variables for theming. You can override them in your CSS:

:root {
  --primary-500: #ff00ff; /* Change primary color */
  --font-heading: "Your Font", sans-serif;
}

Themes are applied as data attributes on the body (e.g., data-theme="lcars").

Development

# Install dependencies
pnpm install

# Start Storybook (Includes Showcase)
pnpm storybook

# Build library
pnpm build

License

MIT © Alazndy