@termiiinc/design-system

Termii's official Vue 3 component library — built with TypeScript and design tokens.

Installation

npm install @termiiinc/design-system

Peer dependency: Vue 3.3+

Setup

Plugin (recommended)

Register all components globally in your app:

import { createApp } from 'vue'
import { TermiiDesignSystem } from '@termiiinc/design-system'
import '@termiiinc/design-system/styles'

const app = createApp(App)
app.use(TermiiDesignSystem)
app.mount('#app')

Individual imports

import { TButton, TInput, TModal } from '@termiiinc/design-system'
import '@termiiinc/design-system/styles'

Components

| Component | Description | |---|---| | TButton | Button with variants, sizes, icons, and keyboard shortcut badges | | TButtonGroup | Group of related buttons | | TInput | Text input with label, hint, and validation states | | TCheckbox | Checkbox input | | TRadio | Radio button input | | TSwitch | Toggle switch | | TFilterButton | Pill-style filter toggle button | | TDropdownSelector | Select dropdown | | TDropdownAction | Action/context menu dropdown | | TProgressBar | Linear progress indicator | | TProgressCircle | Circular progress indicator | | TPagination | Pagination controls | | TTab | Tab navigation | | TTable | Data table | | TModal | Modal dialog | | TLogo | Termii logo component | | TIcon | Icon component (5,034 icons, 6 variants) |

Icons

<TIcon name="activity" variant="line" size="md" />

Variants: line, bold, broken, bulk, outline, twotone

Sizes: xs, sm, md, lg, xl

Or import the full icon set directly:

import '@termiiinc/design-system/icons'

Design Tokens

All design tokens are exposed as CSS custom properties and are included in the styles import.

/* Colors */
var(--t-color-african-sea-600)  /* Primary blue: #2776B2 */
var(--t-color-green-jungle-600) /* Primary green: #34A873 */

/* Typography */
var(--t-font-size-sm)
var(--t-font-weight-semibold)

/* Spacing */
var(--t-space-4)

/* Radius */
var(--t-radius-md)

/* Shadows */
var(--t-shadow-200)
var(--t-shadow-focus-brand)

License

Proprietary — © 2026 Termii Inc.