Skip to main content

Installation

This guide will show you how to install Takeoff UI from the public npm registry and integrate it into your project.

Prerequisites​

  • Node.js ≥ 20.12.2
  • One of: npm, Yarn, or pnpm

Install Packages​

Takeoff UI is published under the @takeoff-ui scope on npm. You can install the core package alone, or add framework-specific bindings:

Using npm:

npm install @takeoff-ui/core           # core web components
npm install @takeoff-ui/react          # React bindings
npm install @takeoff-ui/vue            # Vue bindings
npm install @takeoff-ui/angular        # Angular bindings

Using pnpm:

pnpm add @takeoff-ui/core @takeoff-ui/react @takeoff-ui/vue @takeoff-ui/angular

Using Yarn:

yarn add @takeoff-ui/core @takeoff-ui/react @takeoff-ui/vue @takeoff-ui/angular

Quick Start​

After installing, import the core CSS and register the component library for your framework of choice.

Typography Defaults​

Takeoff UI uses Geologica as the default font family.

If you want to use Takeoff custom fonts (tk-text / tk-display) instead, enable them with an opt-in class or data attribute:

<html class="tk-font">
  <!-- app -->
</html>
<html data-tk-font="true">
  <!-- app -->
</html>

React​

Add the core stylesheet in your entry point (e.g. src/main.tsx):

import '@takeoff-ui/core/dist/core/core.css';

Then use a component:

/src/App.tsx
import { TkButton } from '@takeoff-ui/react';

export default function App() {
  return <TkButton label="Click me" />;
}

Vue​

Add core.css and ComponentLibrary to main.ts file.

/src/main.ts
import '@takeoff-ui/core/dist/core/core.css';
import { createApp } from 'vue';
import { ComponentLibrary } from '@takeoff-ui/vue';
import App from './App.vue';

createApp(App).use(ComponentLibrary).mount('#app');
/src/App.vue
<template>
  <TkButton label="Click me" />
</template>

Angular​

The package was published with Angular 21

/src/styles.css
@import '@takeoff-ui/core/dist/core/core.css';
/src/app/app.ts
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  FormBuilder,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { JsonPipe } from '@angular/common';
import { TkButton, TkInput, TextValueAccessor } from '@takeoff-ui/angular';

@Component({
  selector: 'app-root',
  imports: [
    RouterOutlet,
    TkButton,
    TkInput,
    TextValueAccessor,
    ReactiveFormsModule,
    JsonPipe,
    FormsModule,
  ],
  templateUrl: './app.html',
  standalone: true,
  styleUrl: './app.css',
})
export class App {
  private readonly fb = inject(FormBuilder);

  formGroup: FormGroup = this.fb.group({
    firstname: [''],
    surname: [''],
  });

  onButtonClick(): void {
    alert('Button clicked!');
  }
}
/src/app/app.html
<div class="container">
  <h4>Button and Event Usage Example</h4>
  <tk-button
    label="Example Button"
    variant="primary"
    (tk-click)="onButtonClick()"
  ></tk-button>

  <h4>Reactive Form Example</h4>
  <form [formGroup]="formGroup">
    <tk-input label="Name" formControlName="firstname" />
    <tk-input label="Surname" formControlName="surname" />
  </form>

  {{ formGroup.getRawValue() | json }}
</div>

<router-outlet />

Next.js (App Router)​

In src/app/layout.tsx or src/app/page.tsx:

import '@takeoff-ui/core/dist/core/core.css';

If you need dynamic imports for client-only components:

'use client';

import dynamic from 'next/dynamic';
const TkButton = dynamic(
  () => import('@takeoff-ui/react').then(mod => mod.TkButton),
  { ssr: false },
);

export default function Example() {
  return <TkButton label="Click me" />;
}

Next Steps​

Now that Takeoff UI is installed, head over to the Components section in this documentation to explore available widgets, their props, and usage examples. Happy building!