Concepts Overview | Tuff Docs

Tuffex (@talex-touch/tuffex) is the Vue 3 component library behind CoreBox, plugin surfaces, and this documentation site.

Concepts

Page	Covers
Installation	Three import paths and their stylesheets
Design Foundations	Typography and color tokens
Theming	Token overrides, dark mode, high contrast
Icons	How `TxIcon` resolves and loads icons
Accessibility	Focus, motion, contrast and ARIA conventions
Utils	Stacking, toast, dialog and animation helpers
Sound	Synthesized feedback sounds, off by default
Component Changelog	Release history and since index

Suite Overview

Suite	Groups	Pages	Entry
Concepts	Installation, design rules, helpers	8	Documentation only
Templates	App shells / Content / AI apps / Data & flow	16	Compositions of existing entries
Basics Suite	General / Form / Layout / Navigation / Data Display / Feedback / Status & Empty	95	`@talex-touch/tuffex/base`
Pro Suite	Interaction / Effects / Primitives	38	`@talex-touch/tuffex/pro`
AI Suite	Chat / Agents / Reasoning / Context & Insight	35	`@talex-touch/tuffex/ai`
Data Suite	Charts / Visualization	12	`@talex-touch/tuffex/pro` + `/charts`
Flow Suite	Flow	1	`@talex-touch/tuffex/ai`
Motion Suite	10 groups: buttons, carousels, loaders, text, transitions…	12	`@talex-touch/tuffex/pro` + `/charts`

Page counts are documentation entries, excluding suite overviews; they are not export counts.
There are only three suite entries: base, pro and ai. Data, Flow and Motion are documentation suites; charts also have @talex-touch/tuffex/charts.

Tutorial Path

Start with Composing Tuffex interfaces: split a page into actions → status → data.
On list pages, TxSearchInput, TxSearchSelect and TxSearchEmpty carry search and no-match recovery; TxDataTable + TxPagination carry the data.
Design loading, empty and error states together: TxLoadingState, TxEmptyState, TxErrorState.
Compose dashboards from TxDataTable, TxStatusBadge, TxProgressBar and charts, not one-off SVG or status UI; settings pages use TxTabs for sections and TxDrawer for dense configuration.

Verified: manually reviewed; Migrated: AI-migrated, worth checking against source; In progress / Not migrated: demos and API may still change. The sidebar flags only pages that still need attention.

Component	Sync Status
3D carousel	— Not migrated
Accessibility	— Not migrated
Agent Chat	— Not migrated
Agents	— Not migrated
AgentScreen	— Not migrated
AgentTrace	— Not migrated
AI Answer	— Not migrated
AI Elements	— Not migrated
AI Suite	— Not migrated
Alert	— Not migrated
AllocationBar	— Not migrated
ApprovalCard	— Not migrated
Attachment Tray	— Not migrated
Automation	— Not migrated
AutoSizer	— Not migrated
Avatar	— Not migrated
Avatar Variants	— Not migrated
Badge	— Not migrated
BaseAnchor	— Not migrated
BaseSurface	— Not migrated
Basics Suite	— Not migrated
BlankSlate	— Not migrated
BorderBeam	— Not migrated
BotAvatar	— Not migrated
Breadcrumb	— Not migrated
Button	— Not migrated
Card	— Not migrated
Card spread	— Not migrated
CardItem	— Not migrated
Cascader	— Not migrated
CellLink	— Not migrated
Chain of Thought	— Not migrated
Chart Colors	— Not migrated
Charts	— Not migrated
Chat	— Not migrated
ChatComposer	— Not migrated
Checkbox	— Not migrated
ChoiceCard	— Not migrated
CMS	— Not migrated
CodeEditor	— Not migrated
CodeStream	— Not migrated
Collapse	— Not migrated
CommandPalette	— Not migrated
Component Changelog & Lifecycle	— Not migrated
Container	— Not migrated
Context Indicator	— Not migrated
ContextCards	— Not migrated
ContextMenu	— Not migrated
Conversation Stream	— Not migrated
CornerOverlay	— Not migrated
Custom Chart	— Not migrated
Dashboard	— Not migrated
Data Suite	— Not migrated
DataTable	— Not migrated
DatePicker	— Not migrated
Descriptions	— Not migrated
Design Foundations	— Not migrated
Dialog	— Not migrated
DiffTable	— Not migrated
DitherChart	— Not migrated
Divider	— Not migrated
Docs	— Not migrated
DotIndicator	— Not migrated
Drawer	— Not migrated
DropdownMenu	— Not migrated
ECharts Family	— Not migrated
EdgeFadeMask	— Not migrated
Empty	— Not migrated
EmptyState	— Not migrated
ErrorState	— Not migrated
Files	— Not migrated
FileUploader	— Not migrated
FilterChips	— Not migrated
FineTuneCard	— Not migrated
FlatDropdown	— Not migrated
FlatRadio	— Not migrated
FlatSelect	— Not migrated
Flex	— Not migrated
Flip book	— Not migrated
FlipOverlay	— Not migrated
Floating	— Not migrated
Flow Suite	— Not migrated
Flowchart	— Not migrated
Form	— Not migrated
Fusion	— Not migrated
FusionSurface	— Not migrated
Gallery	— Not migrated
GlassSurface	— Not migrated
GlowText	— Not migrated
GradientBorder	— Not migrated
GradualBlur	— Not migrated
Grid	— Not migrated
GridLayout	— Not migrated
GroupBlock	— Not migrated
GuideState	— Not migrated
Icon	— Not migrated
IconChip	— Not migrated
IconMorph	— Not migrated
IconPicker	— Not migrated
Icons	— Not migrated
ImageGallery	— Not migrated
ImageGeneration	— Not migrated
ImageUploader	— Not migrated
Inbox	— Not migrated
InlineCitation	— Not migrated
Input	— Not migrated
InsightCards	— Not migrated
Installation	— Not migrated
Kbd	— Not migrated
KeyframeStrokeText	— Not migrated
Launcher	— Not migrated
LayoutSkeleton	— Not migrated
Liquid	— Not migrated
LoadingOverlay	— Not migrated
LoadingState	— Not migrated
Maps	— Not migrated
MarkdownEditor	— Not migrated
MarkdownView Markdown	— Not migrated
Message Actions	— Not migrated
MetalFx	— Not migrated
Modal	— Not migrated
ModeChip	— Not migrated
MonoChart	— Not migrated
Motion	— Not migrated
Motion dock	— Not migrated
Motion loader	— Not migrated
Motion Suite	— Not migrated
MotionButton	— Not migrated
MotionControl	— Not migrated
MotionForm	— Not migrated
MotionMetric	— Not migrated
MotionText	— Not migrated
MotionToggle	— Not migrated
MotionTransition	— Not migrated
NavBar	— Not migrated
NoData	— Not migrated
NoSelection	— Not migrated
NumberInput	— Not migrated
OfflineState	— Not migrated
Onboarding	— Not migrated
OutlineBorder	— Not migrated
Pagination	— Not migrated
PermissionState	— Not migrated
Physics motion	— Not migrated
Picker	— Not migrated
Popover	— Not migrated
PrismGlow	— Not migrated
Pro Suite	— Not migrated
Progress	— Not migrated
ProgressBar	— Not migrated
PromptBar	— Not migrated
Radio	— Not migrated
Rating	— Not migrated
Reasoning Disclosure	— Not migrated
RecommendationCard	— Not migrated
Release	— Not migrated
Research	— Not migrated
ResizeBox	— Not migrated
SankeyChart	— Not migrated
Scroll	— Not migrated
ScrubField	— Not migrated
SearchEmpty	— Not migrated
SearchInput	— Not migrated
SearchPanel	— Not migrated
SearchSelect	— Not migrated
SegmentedSlider	— Not migrated
Select	— Not migrated
SelectionActions	— Not migrated
SensitiveInput	— Not migrated
Settings	— Not migrated
Shell	— Not migrated
SidebarNav	— Not migrated
SignalMeter	— Not migrated
Skeleton	— Not migrated
Slider	— Not migrated
SortableList	— Not migrated
Sound	— Not migrated
Sources	— Not migrated
SparkChart	— Not migrated
Spinner	— Not migrated
Splitter	— Not migrated
Stack	— Not migrated
Stagger	— Not migrated
StatCard	— Not migrated
StatusBadge	— Not migrated
StatusHint	— Not migrated
Steps	— Not migrated
Store	— Not migrated
Stream Markdown	— Not migrated
StreamElement	— Not migrated
StreamText	— Not migrated
Suggestion Chips	— Not migrated
Switch	— Not migrated
TabBar	— Not migrated
Tabs	— Not migrated
Tag	— Not migrated
TagInput	— Not migrated
TaskRows	— Not migrated
Terminal	— Not migrated
Textarea	— Not migrated
TextMorph	— Not migrated
TextTransformer	— Not migrated
Theming	— Not migrated
Thinking Orb	— Not migrated
Timeline	— Not migrated
TimeseriesChart	— Not migrated
Toast	— Not migrated
ToastPanel	— Not migrated
Tool Call Card	— Not migrated
Tool Confirmation	— Not migrated
ToolChips	— Not migrated
Tooltip	— Not migrated
Transfer	— Not migrated
Transition	— Not migrated
Tree	— Not migrated
TreeSelect	— Not migrated
TuffLogoStroke	— Not migrated
TypingIndicator	— Not migrated
Utils	— Not migrated
VersionCapsule	— Not migrated
VirtualList	— Not migrated
VoiceBeam	— Not migrated
WorkingIndicator	— Not migrated

Templates

App shells

Content

AI apps

Data & flow

Basics

General

Form

Layout

Data Display

Feedback

Status & Empty

Pro

Interaction

Effects

Primitives

AI Suite

Partly adapted from Beautiful UI (MIT).

Chat

Agents

Reasoning

Context & Insight

Data

Charts

Visualization

Flow

Flowchart

Motion

Buttons

MotionButton

Card Spreads

CardSpread

3D Carousels

Hover, Cursor & Scroll

Toggles

MotionToggle

Transitions

MotionTransition

Technologies

Exported slug set: packages/tuffex/packages/components/src/components.ts. This page must link every documented export; apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts enforces it.
Demo registry: apps/nexus/app/components/content/demo-registry.ts; suite preview grid: apps/nexus/app/components/docs/DocsComponentsGallery.vue (suite is required).