Trinity Design System

Trinity Design System is an enterprise component platform built on MUI.

It provides:

A React component library: @trinityui/design-system
A CSS-only package for non-React apps: @trinityui/design-system-css

Architecture

flowchart LR
  A["Design Tokens"] --> B["Theme Layer"]
  B --> C["React Components<br/>@trinityui/design-system"]
  A --> D["CSS Variables Build"]
  D --> E["CSS Package<br/>@trinityui/design-system-css"]
  C --> F["React Consumer Apps"]
  E --> G["Angular / Vue / Static Apps"]

Packages

Package	Use Case
`@trinityui/design-system`	React + MUI applications
`@trinityui/design-system-css`	Angular, Vue, static HTML, or any CSS-only integration

Installation

React package

pnpm add @trinityui/design-system react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

CSS-only package

pnpm add @trinityui/design-system-css

React Quick Start

import { ThemeProvider, CssBaseline } from '@mui/material';
import { lightTheme } from '@trinityui/design-system';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

Import Strategy

Use MUI for standard UI primitives, and Trinity for domain-specific components and tokens.

import { Button, Card, TextField } from '@mui/material';
import { StatusIndicator, Toast, useToast } from '@trinityui/design-system';

Entry Points

Import	Purpose
`@trinityui/design-system`	Full API
`@trinityui/design-system/essentials`	Lean entry for common setup and core components
`@trinityui/design-system/theme`	Theme-only exports
`@trinityui/design-system/tokens`	Token-only exports
`@trinityui/design-system/data-table`	DataTable exports (requires `@mui/x-data-grid`)
`@trinityui/design-system/css`	CSS file from the React package

Optional Feature Dependency

DataTable is intentionally isolated behind a subpath.

Install dependency only if you use it:

pnpm add @mui/x-data-grid

Import from:

import { DataTable } from '@trinityui/design-system/data-table';

CSS-Only Usage

Option 1: package CSS import

@import '@trinityui/design-system-css';

Option 2: direct file path

<link rel="stylesheet" href="node_modules/@trinityui/design-system-css/dist/trinity.css" />

Dark mode

<html data-theme="dark">

Theming

import { lightTheme, darkTheme } from '@trinityui/design-system';

const theme = isDarkMode ? darkTheme : lightTheme;

Development

pnpm install
pnpm run start
pnpm run build
pnpm run test
pnpm run lint

Release and Publishing

Push to main triggers publish workflows for:
- @trinityui/design-system
- @trinityui/design-system-css
Version is auto-bumped if the current version is already published.
CHANGELOG.md is generated during release workflow.

Support Docs

License

MIT