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 ≥ 16.x
  • 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.

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​

/src/styles.css
@import url("@takeoff-ui/core/dist/core/core.css");

Add ComponentLibraryModule to app.module.ts file.

/src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { ComponentLibraryModule } from "@takeoff-ui/angular/dist";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, ComponentLibraryModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

In a component template:

<tk-button label="Click me"></tk-button>

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!