JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 188
  • Score
    100M100P100Q90357F
  • License MIT

Trinity Design System - A customizable MUI-based component library

Package Exports

  • @trinityui/design-system
  • @trinityui/design-system/css
  • @trinityui/design-system/essentials
  • @trinityui/design-system/theme
  • @trinityui/design-system/tokens

Readme

Trinity Design System

MUI v6/7 with Trinity branding. WCAG 2.1 AA accessible.

npm install @trinityui/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled

Setup (One Time)

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

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      <YourApp />
    </ThemeProvider>
  );
}

That's it. All MUI components now have Trinity styling.

The Golden Rule

Use MUI for everything. Trinity just gives you a theme + a few custom components.

✅ Use MUI (99% of your code)

import { Button, Card, TextField, Typography, Chip } from '@mui/material';

These are already styled by Trinity's theme. No extra imports needed.

✅ Use Trinity (only for these)

import { 
  StatusIndicator,    // Status badges (success/warning/error)
  Modal,              // Accessible modal dialogs
  Toast, useToast,    // Notifications
  FileUpload,         // Drag-and-drop upload
  SimpleTable,        // Basic table (no dependencies)
  DataCard,           // KPI/metric cards
} from '@trinityui/design-system';

Quick Reference

Need Import From
Button, Card, TextField, etc. @mui/material
Status badge StatusIndicator from Trinity
Modal dialog Modal from Trinity
Toast notification Toast from Trinity
Simple table SimpleTable from Trinity
Advanced data grid @mui/x-data-grid (optional dep)
Charts recharts (optional dep)

Entry Points

Import What You Get
/essentials Start here. Theme + 10 components (16 exports)
Main Full API (100+ exports)
/theme Theme utilities only
/tokens Design tokens only
/css CSS variables (no React) 
// Recommended for most projects
import { lightTheme, StatusIndicator, Modal } from '@trinityui/design-system/essentials';

// Full API when needed
import { TopNavHeader, InsightEngine, DataTable } from '@trinityui/design-system';

Dark Mode

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

const theme = isDarkMode ? darkTheme : lightTheme;

CSS-Only Theme (No React)

For projects without React (static HTML, Vue, Angular, vanilla JS), use the CSS file directly.

📄 View CSS Source

When to Use CSS-Only

Use Case Solution
React + MUI app Use lightTheme / darkTheme (JS)
Static HTML site Use CSS file
Vue / Angular / Svelte Use CSS file
WordPress / PHP Use CSS file
Email templates Use CSS file

Setup

<!-- Option 1: Link directly -->
<link rel="stylesheet" href="node_modules/@trinityui/design-system/dist/trinity.css" />

<!-- Option 2: Copy to your project -->
<link rel="stylesheet" href="/css/trinity.css" />
/* Option 3: Import in your CSS/SCSS */
@import '@trinityui/design-system/css';

Usage

/* Use Trinity variables in your styles */
.card {
  background: var(--trinity-surface);
  border: 1px solid var(--trinity-border);
  border-radius: var(--trinity-radius-lg);
  padding: var(--trinity-space-4);
  box-shadow: var(--trinity-shadow-md);
  font-family: var(--trinity-font-family);
}

.button-primary {
  background: var(--trinity-coral);
  color: var(--trinity-white);
  border-radius: var(--trinity-radius-pill);
  padding: var(--trinity-space-2) var(--trinity-space-4);
}

.status-success {
  color: var(--trinity-success);
  background: var(--trinity-success-bg);
}

Dark Mode

<!-- Add attribute to enable dark mode -->
<html data-theme="dark">
// Toggle with JavaScript
document.documentElement.setAttribute('data-theme', 'dark');

Available Variables

Category Examples
Brand --trinity-navy, --trinity-coral, --trinity-purple, --trinity-azure
Semantic --trinity-text, --trinity-background, --trinity-surface, --trinity-border
Status --trinity-success, --trinity-warning, --trinity-error, --trinity-info
Spacing --trinity-space-1 through --trinity-space-16
Radius --trinity-radius-sm, --trinity-radius-md, --trinity-radius-lg, --trinity-radius-pill
Typography --trinity-font-family, --trinity-text-sm, --trinity-font-bold
Shadows --trinity-shadow-sm, --trinity-shadow-md, --trinity-shadow-lg

Optional Dependencies

Only install if you need these features:

npm install @mui/x-data-grid  # For DataTable component
npm install recharts          # For Charts components

💡 Use SimpleTable for basic tables — no extra deps needed.

Development

npm run storybook    # Component docs at localhost:6006
npm run dev          # Dev server at localhost:5173
npm run build        # Production build
npm run test         # Run tests
npm run lint         # Lint code

Developer Quick Start

1. Clone & Install

git clone git@github.com:Trinity-UI-Components/trinity-design-system.git
cd trinity-design-system
npm install

2. Run Storybook

npm run storybook

Open http://localhost:6006 to see all components with live examples.

3. Project Structure

src/
├── components/       # All components
├── theme.ts          # MUI theme (lightTheme, darkTheme)
├── tokens.ts         # Design tokens
├── essentials.ts     # Simplified entry point
├── index.ts          # Full public API
└── stories/          # Storybook stories

4. Create a New Component

// src/components/MyComponent/MyComponent.tsx
import { Box } from '@mui/material';
import { semanticTokens } from '../../tokens';

export interface MyComponentProps {
  label: string;
}

export const MyComponent = ({ label }: MyComponentProps) => (
  <Box sx={{ color: semanticTokens.text.primary }}>
    {label}
  </Box>
);

// src/components/MyComponent/index.ts
export { MyComponent } from './MyComponent';
export type { MyComponentProps } from './MyComponent';

5. Add a Story

// src/stories/MyComponent.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { MyComponent } from '../components/MyComponent';

const meta: Meta<typeof MyComponent> = {
  title: 'Components/MyComponent',
  component: MyComponent,
  tags: ['autodocs'],
};
export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: { label: 'Hello World' },
};

6. Export from Public API

// src/index.ts
export { MyComponent } from './components/MyComponent';
export type { MyComponentProps } from './components/MyComponent';

MIT License • Built with MUI + Vite