sys.status: online // framework.version: 1.0.1 // components.count: 35 // sec.level: classified // theme.active: cyber-dark // build.status: stablesys.status: online // framework.version: 1.0.1 // components.count: 35 // sec.level: classified // theme.active: cyber-dark // build.status: stablesys.status: online // framework.version: 1.0.1 // components.count: 35 // sec.level: classified // theme.active: cyber-dark // build.status: stable

System Online

v1.0.1 — Now Available

SPECTRE_UI

A futuristic React component framework with dark cyber aesthetics, built-in animations, and full accessibility. Build interfaces that look like they belong in a covert ops HUD.

$pnpm add @spectre-ui/core framer-motion

Features

Everything you need to build futuristic interfaces

36+ Components

Core

Production-ready components from Buttons to Command Palettes, all with the FUI aesthetic baked in.

Dark + Light Themes

Theming

Cyber Dark and Cyber Light presets with full CSS variable theming system. Build your own themes.

Framer Motion

Motion

Built-in animations for every component. Entrance, hover, and exit transitions with reduced motion support.

Radix Primitives

A11y

Accessible by default. Built on Radix UI primitives for keyboard navigation, screen readers, and ARIA.

Tailwind CSS

CSS

Custom Tailwind plugin with spectre-ui design tokens, HUD corners, grid backgrounds, and glow effects.

TypeScript First

Full TypeScript support with exported interfaces, generic components, and IntelliSense-friendly APIs.

MCP Ready

AI-Powered Development

Ship faster with our MCP server. Your AI coding assistant gets full access to spectre-ui docs, component APIs, design tokens, and prompt templates.

.mcp.json // project root

{
  "mcpServers": {
    "spectre-ui": {
      "command": "npx",
      "args": ["-y", "@spectre-ui/mcp"]
    }
  }
}

59 resources7 prompt templates38 component docs

Quick Start

Get up and running in under a minute

import { SpectreThemeProvider, Button, Card } from "@spectre-ui/core";
import "@spectre-ui/core/styles.css";

function App() {
  return (
    <SpectreThemeProvider defaultTheme="dark">
      <Card variant="hud">
        <Button variant="primary">
          Launch Mission
        </Button>
      </Card>
    </SpectreThemeProvider>
  );
}