Getting Started

Learn how to install and set up MattersUI in your React project. MattersUI is designed to work with modern React applications, providing a set of accessible and customizable components.

Installation

Install MattersUI using your favorite package manager.

npm

bash

npm install mattersui

yarn

bash

yarn add mattersui

pnpm

bash

pnpm add mattersui

Usage

Import and use MattersUI components in your React application.

Basic Example

jsx

import React from 'react';
import { Button, ThemeProvider } from 'mattersui';

function App() {
  return (
    <ThemeProvider>
      <div className="p-4">
        <h1>Hello, MattersUI!</h1>
        <Button variant="primary">Click Me</Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

Next.js App Router Setup

For Next.js App Router projects, create a client component wrapper:

jsx

// app/components/ui.tsx
"use client";

import { Button, ThemeProvider, Switch } from 'mattersui';

export { Button, ThemeProvider, Switch };

Then use it in your pages:

jsx

// app/page.tsx
import { Button } from './components/ui';

export default function Home() {
  return (
    <div>
      <h1>Hello, MattersUI with Next.js!</h1>
      <Button variant="primary">Click Me</Button>
    </div>
  );
}

Theming

MattersUI provides a ThemeProvider component that allows you to switch between light and dark themes.

Basic Theming

jsx

import React from 'react';
import { ThemeProvider, Button, useTheme } from 'mattersui';

function ThemeSwitcher() {
  const { mode, toggleMode } = useTheme();
  
  return (
    <Button onClick={toggleMode}>
      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
    </Button>
  );
}

function App() {
  return (
    <ThemeProvider defaultMode="light">
      <div className="p-4">
        <h1>Themed Application</h1>
        <ThemeSwitcher />
      </div>
    </ThemeProvider>
  );
}

Configuration

MattersUI is built with Tailwind CSS and can be customized to match your brand.

Tailwind CSS Configuration

If you're using Tailwind CSS, you can extend your tailwind.config.js to customize the theme:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/mattersui/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
        // Add more custom colors here
      },
    },
  },
  plugins: [],
}

Next Steps

Now that you have MattersUI set up, explore our components to build your application.

Browse Components

Explore our library of UI components.

Theming Guide

Learn how to customize themes for your application.