TuffEx

TuffEx (Chinese name: Ta Fu) is a modern Vue3 component library focused on tactile experience and smooth animations. It's part of the Tuff ecosystem and provides beautiful, interactive UI components.

Migration in Progress - TuffEx is migrating components from Tuff core app. Tech stack upgraded to Vue 3.5 / Vite 6 / TypeScript 5.8.

Component Gallery

Tuffex Components — component catalog, demos, and API (bilingual).
Component Changelog & Lifecycle — component Since versions and per-release updates.

Installation

# npm
npm install @talex-touch/tuffex

# yarn
yarn add @talex-touch/tuffex

# pnpm (recommended)
pnpm add @talex-touch/tuffex

Quick Start

Full Import (Legacy)

import { createApp } from 'vue'
import TuffUI from '@talex-touch/tuffex'
import '@talex-touch/tuffex/style.css'

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

Use the full import only for migration work where the application already expects every component style to be present. New pages should prefer the on-demand subpath imports below.

On-Demand Import (Recommended)

import { createApp } from 'vue'
import TxButton from '@talex-touch/tuffex/button'
import TxSwitch from '@talex-touch/tuffex/switch'
import TxTag from '@talex-touch/tuffex/tag'
import '@talex-touch/tuffex/base.css'
import '@talex-touch/tuffex/button/style.css'
import '@talex-touch/tuffex/switch/style.css'
import '@talex-touch/tuffex/tag/style.css'

const app = createApp(App)
app.use(TxButton)
app.use(TxSwitch)
app.use(TxTag)

Core Features

Feature	Description
🎭 Living Tactile Experience	Elastic responses and damping effects for natural interactions
🌊 Silky Animation System	60fps smooth animations based on Bézier curves
💎 Modern Visual Language	Glassmorphism aesthetics with frosted glass effects
⚡ Performance Optimized	Vue3 Composition API + Tree Shaking, 50%+ smaller bundles
🔗 Tuff Ecosystem	Seamlessly integrated with Tuff desktop application

Available Components

Released

Component	Description	Source
`TuffButton`	Interactive button with tactile feedback	`button/`
`TuffSwitch`	Toggle switch with smooth animations	`switch/`
`TuffInput`	Input with clearable and textarea support	`input/`
`TuffCheckbox`	Checkbox with SVG tick animation	`checkbox/`
`TuffSelect`	Dropdown select with floating positioning	`select/`
`TuffSelectItem`	Select option item	`select/`
`TuffProgress`	Progress bar with indeterminate mode	`progress/`

Planned

Component	Description	Source
`TuffModal`	Modal dialog with entrance animations	`modal/`
`TxScroll`	Custom scrollbar with native feel	`@talex-touch/tuffex`
`TuffTabs`	Tab navigation with indicator animations	`tabs/`
`TuffMenu`	Menu component	`menu/`

Theming

TUFF UI supports custom theming through CSS variables:

:root {
  /* Primary colors */
  --tx-color-primary: #409eff;
  --tx-color-primary-light-3: #79bbff;

  /* Text colors */
  --tx-text-color-primary: #303133;
  --tx-text-color-secondary: #909399;

  /* Border and radius */
  --tx-border-color: #dcdfe6;
  --tx-border-radius-base: 4px;

  /* Transitions */
  --tx-transition-duration: 0.3s;
}

Tech Stack

Technology	Version	Purpose
Vue	3.5+	Composition API
TypeScript	5.8+	Type safety
Vite	6.0+	Build tooling
Sass	1.89+	Style preprocessing
VueUse	13.0+	Composition utilities

Development

# In monorepo root
pnpm install

# Component source package
pnpm -C packages/tuffex run build
pnpm -C packages/tuffex run test
pnpm -C packages/tuffex run typecheck

# Showcase and docs are hosted by Tuff
pnpm -C apps/nexus run dev

Design Philosophy

Tactile First - Every component should feel responsive and alive
Performance - Animations must never compromise performance
Accessibility - WCAG 2.1 AA compliance for all components
Composability - Components work together seamlessly

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+