npm package: @quantumproof/qpt-theme
Description: Quantum Proof Tech UI Theme
Latest version: 1.0.0

# Quantum Proof Tech UI Theme

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

![QPT-Theme Demo](./images/logos/Component%201.png)

## 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

```bash
# 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

```js
// 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

```jsx
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:

```bash
# Run the local demo
npm run dev

# Launch Storybook documentation
npm run storybook
```

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

## Component Inventory

See [COMPONENTS.md](./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](./PUBLISH.md).

## Development

```bash
# 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](mailto:engineering@quantumprooftech.com).

## License

MIT © Quantum Proof Tech 2025