Takeoff UI Design System

Takeoff UI is a comprehensive design system providing framework-agnostic web components developed with Stencil.js. The system is managed as a monorepo using Turborepo, enabling fast, incremental builds and consistent workflows across multiple packages.

Figma Design System

The Takeoff UI Figma Design System provides a set of design assets, including components, styles, and guidelines to help designers and developers create consistent user interfaces. The Figma library is organized into categories, making it easy to find and use the right components.

Technical Architecture

Monorepo Structure

The project follows a structured Turborepo-driven monorepo architecture:

packages/
├── core/       # Stencil.js web components
│   ├── src/
│   │   ├── components/   # Web component implementations
│   │   ├── global/       # Shared styles & utilities
│   │   └── docs/         # Documentation resources
├── angular/    # Angular integration package
├── react/      # React integration package
├── vue/        # Vue integration package
└── tailwind/   # Tailwind CSS plugin package

The root contains a turbo.json file that defines build, dev, lint, test and publish pipelines across all packages.

Core Package Architecture

The core package (@takeoff-ui/core) contains:

• components/: Individual web components (tk-button, tk-input, etc.)
• global/: Shared SASS modules, assets, and interfaces
• utils/: Utility functions and helpers

Framework Integration

We use Stencil’s output targets to generate framework-specific bindings:

Vue.js Integration

vueOutputTarget({
  componentCorePackage: '@takeoff-ui/core',
  proxiesFile:      '../vue/lib/components.ts',
  componentModels:  vueComponentModels,
  includePolyfills: true
})

• Supports two-way binding via v-model
• Event handlers with @tk-change

React Integration

reactOutputTarget({
  outDir:               '../react/lib/components/stencil-generated/',
  stencilPackageName:   '@takeoff-ui/core'
})

• JSX support
• React prop types
• Event handlers with onTkChange

Angular Integration

angularOutputTarget({
  componentCorePackage: '@takeoff-ui/core',
  outputType:           'component',
  directivesProxyFile:  '../angular/projects/library/src/lib/stencil-generated/components.ts',
  directivesArrayFile:  '../angular/projects/library/src/lib/stencil-generated/index.ts',
  valueAccessorConfigs: angularValueAccessorBindings
})

• FormControl integration
• NgModel compatibility
• Event bindings with (tkChange)

Component Implementation

Each component in the core package follows:

tk-component/
├── tk-component.tsx       # Logic
├── tk-component.scss      # Styles
├── interfaces.ts          # Type definitions
└── test/
    ├── tk-component.spec.tsx  # Unit tests
    └── tk-component.e2e.tsx   # E2E tests

Build Configuration

• Stencil.js for component compilation
• SASS for style processing
• Turborepo for orchestrating builds and caching
• Custom output targets for Vue, React, and Angular
• Documentation generation via our docs pipeline

Refer to the Installation Guide for setup and usage details.