Accelotics UI

Reusable React UI components and design tokens for Accelotics projects.

"We're not just building AI systems — we're architecting the future of computation itself."

Accelotics Technologies (OPC) Private Limited was founded in 2023 by researchers at the intersection of quantum physics and machine learning. The company builds enterprise-grade AI and quantum computing solutions, backed by Microsoft for Startups, and leverages Azure Quantum infrastructure to deliver production-ready systems to global enterprises.

What Accelotics does

| Domain | Description | |---|---| | Quantum AI Consulting | Strategic guidance on implementing quantum-enhanced AI tailored to your industry | | Custom AI Development | Bespoke intelligence systems that learn and adapt to your business | | Quantum Computing Solutions | Quantum algorithms and hybrid classical-quantum systems for complex optimisation | | Research & Innovation | Collaborative R&D partnerships advancing the frontier of quantum-AI |

Highlights

• Microsoft for Startups partner — backed by Azure cloud, Azure Quantum, and enterprise AI tooling
• Quantum Advantage Breakthrough (Dec 2024) — first commercial deployment of quantum-enhanced ML showing measurable quantum advantage in production
• Named "Most Innovative AI Company" by the Global Technology Council for quantum computing integration
• WCAG 2.1 Level AA accessibility compliance across all interfaces
• Quantum-safe cryptography and AES-256 encryption across the entire stack

Table of Contents

• Overview
• Tech Stack
• Prerequisites
• Getting Started
• Available Scripts
• Project Structure
• Pages & Routing
• CI/CD
• Contributing

Overview

This repository now serves two purposes:

1. The public-facing Accelotics website.
2. A publishable React component library that can be imported into other projects.

Key features:

• Responsive design with mobile navigation and dropdown menus
• Custom client-side routing (no external router library)
• Accessible UI components via Radix UI primitives
• Vercel Analytics integration for usage tracking
• Static SVG favicon served directly by the web server (Google-indexable)
• Library entry point at @accelotics/ui
• Shared stylesheet available as @accelotics/ui/style.css

Tech Stack

| Layer | Technology | |---|---| | UI Framework | React 18 + TypeScript | | Build Tool | Vite 6 | | Styling | Tailwind CSS 3 | | Component Library | shadcn/ui (Radix UI primitives) | | Icons | Lucide React | | Charts | Recharts | | Notifications | Sonner | | Analytics | Vercel Analytics | | CI | GitHub Actions (Node.js 22) |

Prerequisites

• Node.js ≥ 22 (matches the CI matrix)
• npm ≥ 10

Getting Started

Clone the repository and install dependencies:

git clone https://github.com/bhavesh-asanabada/optum-ui.git
cd optum-ui
npm install

Start the development server:

npm run dev

The app will be available at http://localhost:5173 by default.

Available Scripts

| Script | Description | |---|---| | npm run dev | Start Vite development server with HMR | | npm run build | Type-check and produce a production build in dist/ | | npm run build:lib | Build the reusable component library into dist/lib/ |

Project Structure

optum-ui/
├── public/
│   └── favicon.svg          # Static favicon (served at /)
├── src/
│   ├── assets/              # Static image assets (PNG)
│   ├── components/
│   │   ├── figma/           # Figma-generated helper components
│   │   ├── ui/              # shadcn/ui component library
│   │   ├── Header.tsx       # Global site header with responsive nav
│   │   ├── Footer.tsx       # Global site footer
│   │   ├── Router.tsx       # Custom client-side router
│   │   └── ...              # Other shared components
│   ├── pages/               # One component per route
│   ├── styles/
│   │   └── globals.css      # Global CSS overrides
│   ├── App.tsx              # Root component — layout + route definitions
│   └── main.tsx             # Entry point
├── index.html               # Vite HTML template with meta/favicon tags
├── vite.config.ts           # Vite configuration
└── package.json

Using the library in another project

Install the package after publishing to GitHub Packages or your chosen registry:

npm install @accelotics/ui

Then import components and the shared theme CSS:

import { Button, Card } from '@accelotics/ui';
import '@accelotics/ui/style.css';

export function Example() {
  return <Button>Click me</Button>;
}

The package exports the full component set from src/index.ts, so you can use named imports directly from the package root.

Publish checklist

Before tagging a release or publishing to GitHub Packages / npm:

1. Run npm install.
2. Run npm run build:lib.
3. Confirm the generated files in dist/lib/.
4. Push the commit to GitHub and publish from the tagged release or CI workflow.

Pages & Routing

Routing is handled client-side by the custom Router component in src/components/Router.tsx. Routes are defined in App.tsx.

| Route | Page | |---|---| | / | Home | | /about | About | | /technology | Technology | | /services | Services | | /solutions | Solutions | | /products | Products | | /careers | Careers | | /contact | Contact | | /privacy-policy | Privacy Policy | | /terms-of-service | Terms of Service | | /cookie-policy | Cookie Policy | | /security | Security | | /compliance | Compliance | | /accessibility | Accessibility |

Any unmatched route renders the NotFoundPage (404) component.

CI/CD

GitHub Actions runs the Node.js CI workflow (.github/workflows/node-run.yml) on every push and pull request to main. The workflow:

1. Installs dependencies with npm ci
2. Builds the project with npm run build

The site is deployed on Vercel with Vercel Analytics enabled.

Contributing

1. Fork the repository and create a feature branch from main.
2. Make your changes and ensure npm run build passes without errors.
3. Open a pull request — the CI workflow will run automatically.