Quantum Proof Tech UI Theme

A futuristic, quantum-inspired React component library and design system built with Tailwind CSS.

Overview

QPT-Theme is a comprehensive UI component library designed for applications with a quantum computing or futuristic tech aesthetic. The theme features dark backgrounds with amber, indigo, and teal accents, futuristic animations, and quantum-inspired visual elements.

Features

• Modern React Components: Buttons, cards, form elements, loaders, and more
• Quantum-Inspired Animations: Interactive particles, circuit animations, and glowing effects
• Tailwind CSS Integration: Built on Tailwind with custom extensions
• Responsive Design: All components are mobile-friendly
• Flexible Theming: Easy color and style customization
• Storybook Documentation: Interactive component demos and documentation
• TypeScript Support: Full TypeScript definitions
• Accessibility Focused: Built with a11y best practices

Quick Start

Installation

# Install from npm
npm install @quantumprooftech/qpt-theme

# Or, if working directly with the source
git clone https://github.com/quantumprooftech/qpt-theme.git
cd qpt-theme
npm install

Setup with Tailwind CSS

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@quantumprooftech/qpt-theme/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [
    require('@quantumprooftech/qpt-theme/dist/tailwind-plugin')
  ],
}

Basic Usage

import React from 'react';
import { Card, QuantumButtonTailwind, Badge } from '@quantumprooftech/qpt-theme';
import '@quantumprooftech/qpt-theme/dist/css/qpt-theme.css';

function App() {
  return (
    <div className="min-h-screen bg-surfaces-background p-8">
      <h1 className="text-4xl font-bold mb-8 text-accent-amber shadow-glow-amber">
        My Quantum App
      </h1>
      
      <Card className="p-6 max-w-md">
        <h2 className="text-2xl font-semibold mb-4 text-text-primary">
          Welcome to QPT
        </h2>
        <p className="text-text-secondary mb-6">
          This is a sample card using the Quantum Proof Tech theme.
        </p>
        <div className="flex justify-between items-center">
          <Badge color="indigo">Quantum</Badge>
          <QuantumButtonTailwind size="md">Get Started</QuantumButtonTailwind>
        </div>
      </Card>
    </div>
  );
}

Design Tokens

The design system is built around a carefully crafted set of design tokens:

Colors

• Surfaces/Tiles: Dark zinc palette with custom zinc-750 shade
• Text: Hierarchical text styling with primary/secondary/tertiary/disabled states
• Accents: amber (primary actions), indigo (information/focus), teal (success/system)

Elevation & Depth

• Shadows: Multiple levels of elevation with box-shadows
• Inner Shadows: Inset shadows for depth
• Glows: Accent-colored subtle glows for focus and emphasis

Demo & Documentation

To see all components in action:

# Run the local demo
npm run dev

# Launch Storybook documentation
npm run storybook

Visit https://quantumprooftech.github.io/qpt-theme for the hosted Storybook documentation.

Component Inventory

See COMPONENTS.md for a complete list of available components and usage details.

Publishing

For instructions on how to publish updates to this package, see PUBLISH.md.

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Run tests
npm test

# Build the library
npm run build-lib

# Build Storybook documentation
npm run build-storybook

Team

Maintained by the Quantum Proof Tech UI team. For questions or support, contact engineering@quantumprooftech.com.

License

MIT © Quantum Proof Tech 2025