MattersUI

Features

• 🚀 Highly Optimized: Lightweight and performance-focused
• 🎨 Customizable: Easily adapt components to your brand
• 📱 Responsive: Works on all screen sizes
• ⚡ Modern: Built with React and TypeScript
• 🔄 Consistent: Unified design language across components
• 🌙 Dark Mode: Built-in dark mode support
• ♿ Accessible: WCAG 2.1 AA compliant components

Installation

# npm
npm install mattersui

# yarn
yarn add mattersui

# pnpm
pnpm add mattersui

Quick Start

import React from 'react';
import { Button, Switch, SwitchList, CodeViewer, HeaderLayout, PageLayout } from 'mattersui';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

function App() {
  const [selected, setSelected] = React.useState('option1');
  
  return (
    <ThemeProvider theme={yourTheme}>
      <CssBaseline />
      <PageLayout>
        <HeaderLayout
          headerTitle="My Page"
          primaryCTOs={<Button variant="primary">Action</Button>}
        />
        <SwitchList
          options={[
            { label: 'Option 1', value: 'option1' },
            { label: 'Option 2', value: 'option2' }
          ]}
          value={selected}
          onChange={setSelected}
        />
        <CodeViewer
          code="const hello = 'world';"
          language="javascript"
        />
      </PageLayout>
    </ThemeProvider>
  );
}

Peer Dependencies

MattersUI v1.0.0 requires the following peer dependencies:

npm install react react-dom @mui/material @emotion/react @emotion/styled react-hook-form

Documentation

For full documentation, visit mattersui.eshank.tech.

Components

MattersUI v1.0.0 includes the following stable components migrated from Matters AI's production codebase:

Core Components

• Button - Customizable button with multiple variants (primary, secondary, alert, premium) and types (solid, outlined)
• Switch - Multi-style switch component (toggle, click, radio, ring, checkbox)
• SwitchList - Radio-like switch list with react-hook-form integration
• CodeViewer - Syntax-highlighted code viewer with multiple language support
• HeaderLayout - Flexible page header layout component
• PageLayout - Consistent page container with responsive spacing

Additional Components

• Tag - Tag/badge component
• Tabs - Tab navigation component
• ThemeProvider - Theme context provider

Coming Soon

• More components from the Matters AI product codebase
• Enhanced documentation and examples

Customize Theme

MattersUI components use CSS variables for theming, compatible with Material-UI themes:

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
  // Your MUI theme configuration
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* Your application with MattersUI components */}
    </ThemeProvider>
  );
}

Components support CSS custom properties for colors:

• --primary-normal, --primary-active, --primary-text, --primary-border
• --secondary-normal, --secondary-active, --secondary-text, --secondary-border
• --alert-normal, --alert-active, --alert-text, --alert-border
• --premium-normal, --premium-active, --premium-text, --premium-border
• --disabled-normal, --disabled-text

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE 11 (with polyfills)

Contributing

We welcome contributions! Please see our contributing guidelines for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.