DOCSEARCHbyAlgolia
Submit Docs

Takeoff UI Documentation

website·Indexed 31 days ago

https://www.takeoffui.com

A comprehensive UI component library featuring a wide range of elements including TkTable, TkChart, TkGanttChart, and TkOrgChart. The library provides cross-framework support for React, Vue, and Angular, and includes an MCP server for AI coding assistants to access component APIs and integration guides.

Tokens
38.4K
Snippets
252
Records
290
Agent score
48%

What's inside Takeoff UI

  1. Overview of Takeoff UI MCP Server

    Takeoff UI provides an MCP (Model Context Protocol) server that enables AI coding assistants to query verified, structured information about component APIs, integration guides, and code examples at runtime. This prevents the AI from hallucinating prop names or providing outdated documentation links and ensures generated code follows idiomatic patterns for React, Vue, Angular, Next.js, and Nuxt.

  2. Overview of the TkBadge component

    The TkBadge component is used to create small badges for displaying contextual data or notifications (e.g., a message count on a user avatar) that need to stand out.
    import { TkBadge } from '@takeoff-ui/react'

<TkBadge variant="primary" type="filled" size="base" iconPosition="left" label="Badge"/>

  3. Overview of TkChips component

    The TkChips component is a compact UI block used to represent data entities (e.g., a contact). It can contain text, avatars, or icons and can be configured to be removable or full-width.

  4. Overview of TkEditor

    TkEditor is a WYSIWYG rich text editor component that wraps the Tiptap editor. It is available for React, Vue, and Angular. It supports standard text formatting (bold, italic, underline, strike-through), headings (h1-h4), ordered/bullet lists, and text alignment.

  5. Use TkDivider to separate content

    The TkDivider component is used to create visual separations between different sections, elements, or blocks of content in a user interface.
    import { TkDivider } from '@takeoff-ui/react';

const Example = () => (
  <>
    <p>Section 1</p>
    <TkDivider />
    <p>Section 2</p>
  </>
);

  6. Understand Takeoff UI Monorepo Structure

    Takeoff UI is built as a Turborepo-managed monorepo. The core logic resides in Stencil.js web components, with separate packages providing framework-specific integrations and styling plugins.
    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

  7. Use TkAlert to display contextual feedback messages

    The TkAlert component is used to display feedback messages such as success, warnings, informational notices, and errors. It supports configuration for visual variants, design types, alignment, and custom action slots.
    import { TkAlert } from '@takeoff-ui/react'

<TkAlert 
  variant="success" 
  type="filled" 
  alignItems="center" 
  iconSize="large" 
  header="Alert Header" 
  message="This is an alert message."
/>

  8. Takeoff UI Project Architecture

    Takeoff UI is a monorepo managed with Turborepo. It consists of core web components built with Stencil.js and framework-specific wrapper libraries for React, Vue, and Angular, along with a Tailwind plugin.
    packages/
├── core/      # Core web components (@takeoff-ui/core)
├── react/     # React wrapper library (@takeoff-ui/react)
├── vue/       # Vue wrapper library (@takeoff-ui/vue)
├── angular/   # Angular wrapper library (@takeoff-ui/angular)
└── tailwind/  # Tailwind plugin (@takeoff-ui/tailwind)

  9. Use TkButton for themed buttons in React

    TkButton is an extension of the standard input element that provides built-in icons and theming. It is available for React, Vue, and Angular.
    import { TkButton } from '@takeoff-ui/react'

  10. Use the TkIcon component for Material Symbols

    The TkIcon component allows you to add visual information using Google's Material Symbols icons. To find available icon names, refer to the Google Fonts Icons library.
    import { TkIcon } from '@takeoff-ui/react'

// Basic usage
<TkIcon icon="flight" />

  11. Use the TkAvatar component for user profiles and branding

    The TkAvatar component is used to represent users or brands by displaying initials, labels, or images. It supports various styling options including variants, sizes, and status badges.
    import { TkAvatar } from '@takeoff-ui/react';

// Basic usage with initials
<TkAvatar label="JS" />

// Rounded avatar
<TkAvatar label="AD" rounded />

  12. Implement lazy loading in TkTreeView

    To load branches on demand rather than providing all data upfront, use the following configuration:

    • lazy: Set to true. When a branch with missing children is expanded, the component emits a tk-load event. The consumer is responsible for fetching the data.
    • hasChildren: Branches not yet loaded must be marked with hasChildren: true to remain expandable.
    • loadingKeys: (string[]) Keys of branches currently being fetched; these display a spinner instead of a toggle icon.
    • loadedKeys: (string[]) Keys of branches already fetched. This is specifically useful for branches that return empty results but should still be treated as branches rather than leaves.