@trinityui/design-system

v1.0.12

Published

5 days ago

Trinity Design System - A customizable MUI-based component library

0High
0Medium
0Low

trinityui

design-system mui material-ui react theme components

Trinity Design System

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

It provides:

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

Architecture

Design Tokens -> Theme Layer -> React Components (@trinityui/design-system) -> React Consumer Apps
Design Tokens -> CSS Variables Build -> CSS Package (@trinityui/design-system-css) -> 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