Thyris UI Documentation
Thyris UI is the shared React interface system for Thyris products. It provides application-independent primitives, semantic design tokens, low-level utilities, and reusable presentation patterns for dashboards, portals, operational tools, and administration interfaces.
This documentation assumes that the required Thyris UI package is already available in the consuming application. It begins with consumer configuration and supported imports rather than package installation.
Package Boundaries
| Package | Owns | Must Not Own |
|---|---|---|
@thyris/ui | Primitive controls, interaction behavior, semantic tokens, cn, and useMediaQuery. | Product routes, API clients, authentication, permissions, database types, and domain workflows. |
@thyris/ui-patterns | Reusable prop-driven compositions such as page headers, table shells, filters, metrics, and wizard framing. | Data fetching, mutations, credential handling, business validation, and navigation state. |
Applications own backend integration and orchestration. Shared components receive presentation-ready data and callbacks.
Documentation Map
| Document | Use It For |
|---|---|
| Consumer Setup | Configure Tailwind scanning, load tokens, import components, and establish the application shell. |
| Themes and Design Tokens | Use semantic colors, light and dark themes, typography, spacing, and chart tokens. |
| Primitive Components | Choose and compose controls from @thyris/ui. |
| Presentation Patterns | Build standardized pages, collection tools, metrics, dialogs, and domain presentations. |
| Implementation Recipes | Apply recommended forms, dialogs, tables, navigation, and chart patterns. |
| Accessibility, Responsive Design, and Troubleshooting | Validate production quality and resolve common consumer problems. |
Supported Baseline
| Concern | Baseline |
|---|---|
| Node.js | 20.9 or newer |
| React and React DOM | 19.2.x |
| TypeScript | 5.5 or newer in strict mode |
| Tailwind CSS | 3.4.x |
| Lucide React | 0.546.x |
| React Hook Form | 7.71.x |
| Recharts | 2.12.x |
The host application owns React, React DOM, Tailwind, and its build configuration. Radix primitives and the other runtime dependencies used by exported components are owned by the package.
Design Principles
- Operational clarity: interfaces remain calm, compact, and easy to scan repeatedly.
- One visual language: consumers use the same semantic tokens and interaction behavior.
- Accessible by default: semantics, focus, keyboard behavior, and readable contrast are part of the contract.
- Responsive by composition: components protect local usability while applications choose page-level layout.
- Pure presentation: shared packages render data and invoke callbacks; applications perform business work.
Import Contract
Prefer supported public exports:
import {Button, Card, CardContent} from "@thyris/ui"
import {PageHeader, StatusBadge} from "@thyris/ui-patterns"
Narrow package subpaths are also supported:
import {Button} from "@thyris/ui/button"
import {PageHeader} from "@thyris/ui-patterns/page-header"
Never import from @thyris/ui/src/* or @thyris/ui-patterns/src/*. Source paths are implementation details and are not part of the release contract.