Getting started

1. 1

   Clone repository and run local development

   View all install targets

   Clone the repository, install dependencies, and start the local preview server. Prerendered documentation and live component sandboxes serve at port 3030.

   git clone https://github.com/ttitamu/tti-ux.git
   cd tti-ux
   npm install
   npm run dev

   • Binds to http://localhost:3030 to prevent port collisions with other local services.
   • Vite hot-module replacement (HMR) reloads automatically on token, component, or doc edits.
2. 2

   Extend TUX in your Nuxt 4 configuration

   Browse 183 components

   In your application nuxt.config.ts, extend TUX as a layer. All 183 Tux* components and composables are auto-imported and immediately available in templates.

   // nuxt.config.ts
   export default defineNuxtConfig({
     extends: ["@tti/tti-ux"],
   });

   • Global component registration ensures both Vue SFC templates and Markdown (via MDC) resolve primitives without imports.
   • Tailwind v4 theme variables and typography tokens are injected automatically.
3. 3

   Consume standalone tokens and CSS (Non-Nuxt stacks)

   Explore token reference

   For static HTML, React, ASP.NET, or WordPress projects that cannot run the Nuxt layer, link pre-compiled tokens and operational classes directly from the kit distribution.

   <!-- Include in your document <head> -->
   <link rel="stylesheet" href="@tti/tti-ux/kit/css/tux-tokens.css">
   <link rel="stylesheet" href="@tti/tti-ux/kit/css/tux-ops.css">

   • kit/css/tux-tokens.css provides pure CSS custom properties for all three themes without any build tooling.
   • kit/css/tux-bridge.css upgrades raw HTML tables, buttons, and form inputs to WCAG 2.2 AAA standards.
4. 4

   Compose templates using accessible primitives

   View corridor analytics composition

   Assemble user interfaces using verified TTI primitives. Every component strictly satisfies WCAG 2.2 Level AAA requirements, including >= 7.0:1 text contrast and full keyboard navigation.

   <template>
     <div class="space-y-4">
       <TuxSectionHeader title="Analysis Parameters" />
       <TuxAlert variant="info" title="Sensor Array Online">
         Data feed synchronized across all 12 monitoring stations.
       </TuxAlert>
       <TuxButton intent="primary">Export Dataset</TuxButton>
     </div>
   </template>

   • Form controls integrate with validation summaries, field wrappers, and accessible error descriptors.
   • Status chips and badges enforce consistent semantic status semantics (nominal, warning, critical, info, subtle).
5. 5

   Configure themes and high-contrast accessibility

   Read ADR-0006

   TUX supports 3 certified themes: tti (default light), tti-dark (warm charcoal), and tti-hc (dedicated WCAG AAA high-contrast). Themes switch instantly via the data-theme attribute on <html>.

   <!-- Set data-theme on <html> -->
   <html data-theme="tti">
   <html data-theme="tti-dark">
   <html data-theme="tti-hc">

   • High-contrast mode is decoupled from standard dark mode to ensure persistent accessibility accommodations (ADR-0006).
   • Use the useTuxTheme() composable to read or switch themes programmatically in Vue apps.
6. 6

   Run automated quality and contrast verification

   View 183-component Health Matrix

   Verify component contracts and accessibility standards using the institutional 6-gate test harness before deploying changes.

   # Run full 6-gate verification (tokens, status palette, WCAG AAA math, Vitest, Axe prerender)
   node scripts/test-all-suites.mjs
   
   # Run mathematical luminance contrast audit
   npm run audit:aaa

   • Evaluates luminance ratios mathematically against WCAG 2.2 Level AAA (>= 7.0:1 text, >= 3.0:1 UI boundaries).
   • Checks 245 prerendered routes with axe-core to ensure 0 accessibility violations.

Standardized patterns tailored for three core interface types:

• Operational dashboards

  High-density data views, table pagination, faceted filters, and responsive metrics displays designed for administrative and analysis workflows.

• Research and communications

  Public-facing program pages, center overviews, technical reports, author bylines, and citation export tools aligned with TTI identity standards.

• Conversational interfaces

  Chat layouts, tool invocation displays, document artifacts, suggestion chips, and context meters for AI-assisted research workflows.

Six tightly-coupled clusters where reading the components together provides cohesive patterns. The remaining components are cataloged individually in the sidebar.

Production-grade layouts assembling 5–15 Tux* components into realistic application surfaces.

Ten architectural design documents under design/, plus the canonical tokens.json source.

Three themes ship: tti (default light), tti-dark (dark), and tti-hc (WCAG AAA high-contrast). Toggle via the navigation controls or set data-theme on <html>. Applications customize brand tokens via [data-theme] selectors without modifying core component templates.

TUX components adapt across responsive web layouts and desktop application environments (such as Tauri). The underlying design tokens preserve brand hierarchy while adapting navigation chrome to the target platform.

• Contrast standard: WCAG 2.2 Level AAA (minimum 7:1 for normal text, 4.5:1 for large text) across all themes.
• Keyboard navigation: all interactive primitives are fully operable via keyboard with prominent focus indicators.
• Reduced motion: all transitions and animations respect prefers-reduced-motion: reduce.
• Target size: interactive controls meet or exceed WCAG 2.2 touch target requirements.

Pin to a tagged release in your application configuration:

// nuxt.config.ts of the consuming app
export default defineNuxtConfig({
  extends: ["github:ttitamu/tti-ux#v3.4.5"],
});

See CHANGELOG.md for version release history.