Getting Started

Installation

Get up and running with MatrixUI in minutes. Choose your preferred installation method.

Prerequisites

React 18.0 or higher

MatrixUI is built for modern React applications

Tailwind CSS 3.0 or higher

Required for styling and theming

Node.js 16.0 or higher

For package management and build tools

Installation Methods

1. Install the package

npm install @matrix-ui/components

2. Configure Tailwind CSS

Add the MatrixUI path to your tailwind.config.js content array:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@matrix-ui/components/**/*.{js,ts,jsx,tsx}'
  ],
  // ... rest of your config
}

3. Add CSS variables

Add the CSS variables to your global CSS file:

@layer base {
  :root {
    --matrix-background: 0 0% 100%;
    --matrix-foreground: 0 0% 9%;
    /* ... */
  }
}

Pro tip

You can find the complete CSS variables list in the Theming section.

4. Start using components

Import and use MatrixUI components in your React application:

import { Button, Card, Input } from '@matrix-ui/components'

export default function App() {
  return (
    <Card>
      <Input placeholder="Enter your email" />
      <Button>Subscribe</Button>
    </Card>
  )
}

Framework Guides

Next.js

Full support for Next.js 13+ with App Router and Server Components.

Vite

Optimized for Vite with fast HMR and minimal bundle size.

Remix

Works seamlessly with Remix for full-stack React applications.

Create React App

Compatible with Create React App for quick prototyping.

Troubleshooting

Components are not styled correctly

Make sure you've added the MatrixUI path to your Tailwind content configuration and included the CSS variables in your global CSS file.

Dark mode is not working

Ensure you have the dark class configured in your Tailwind config and add the dark mode CSS variables to your global styles.

TypeScript errors with component props

MatrixUI exports all component prop types. Import them directly from the package for proper type checking.