---
title: Installation
description: Install Tuffex and import it per component, per suite, or from the root entry.
category: Foundations
status: beta
since: 0.4.0
tags: [install, imports, entries, styles]
syncStatus: reviewed
verified: false
---

## Installation

Vue 3 is a peer dependency.

:::TuffCodeBlock{lang="bash"}
---
code: |
  pnpm add @talex-touch/tuffex
---
:::

## Usage

All three give you the same components; they differ only in bundle size.

| Style | Import path | Use for |
|------|----------|----------|
| Per component | `@talex-touch/tuffex/button` | New code; bundles only what you use |
| Per suite | `@talex-touch/tuffex/base` | Pages that use one suite heavily |
| Root entry | `@talex-touch/tuffex` | Migration only; pulls in the whole library |

### Per Component (Recommended)

:::TuffCodeBlock{lang="typescript"}
---
code: |
  import TxButton from '@talex-touch/tuffex/button'
  import TxSwitch from '@talex-touch/tuffex/switch'
  import '@talex-touch/tuffex/base.css'
  import '@talex-touch/tuffex/button/style.css'
  import '@talex-touch/tuffex/switch/style.css'

  app.use(TxButton)
  app.use(TxSwitch)
---
:::

### Per Suite

The `base`, `pro`, and `ai` entries don't overlap; each component belongs to exactly one. Suite entries export named components only, and styles are imported per component.

:::TuffCodeBlock{lang="typescript"}
---
code: |
  import { TxButton, TuffSwitch } from '@talex-touch/tuffex/base'
  import '@talex-touch/tuffex/base.css'
  import '@talex-touch/tuffex/button/style.css'
  import '@talex-touch/tuffex/switch/style.css'

  app.use(TxButton)
  app.use(TuffSwitch)
---
:::

Data and Motion suite components import from `pro`; the chart family also has its own `@talex-touch/tuffex/charts` entry.

:::TuffCodeBlock{lang="typescript"}
---
code: |
  import { TxTimeseriesChart } from '@talex-touch/tuffex/charts'
  import '@talex-touch/tuffex/charts/style.css'
---
:::

### Root Entry (Migration)

:::TuffCodeBlock{lang="typescript"}
---
code: |
  import TuffUI from '@talex-touch/tuffex'
  import '@talex-touch/tuffex/style.css'

  app.use(TuffUI)
---
:::

### Styles

Styles are not injected by JavaScript.

| Stylesheet | Contents | Required |
|----------|------|----------|
| `@talex-touch/tuffex/base.css` | `--tx-*` variables, reset, theme selectors | Yes, once per app |
| `@talex-touch/tuffex/<name>/style.css` | One component's styles | For each component you use |
| `@talex-touch/tuffex/style.css` | All component styles | Root entry only |

To override tokens, see [Theming](./theming.en.mdc).

### Utils

:::TuffCodeBlock{lang="typescript"}
---
code: |
  import { nextZIndex, toast } from '@talex-touch/tuffex/utils'
---
:::

Full API in [Utils](./utils.en.mdc).

## Technologies

- Entry map: `exports` in `packages/tuffex/package.json`.
- Suite entries: `packages/tuffex/packages/components/src/{base,pro,ai}/index.ts`; `suite-barrels.test.ts` checks that together they partition every component exactly.