Get Started with Matic UI
Everything you need to know to build beautiful applications with our component libraries.
Introduction
Welcome to Matic UI - a comprehensive collection of React and React Native components designed to accelerate your development workflow.
300+ Components
Comprehensive library covering all common UI patterns
TypeScript First
Built with TypeScript for better developer experience
Fully Customizable
Theme system allows complete visual customization
Installation
Get started by installing Matic UI in your React or Next.js project.
npm install @matic-ui/reactQuick Start
Here's a simple example to get you started with Matic UI components.
1. Import Components
import { Button, Card } from '@matic-ui/react';
import '@matic-ui/react/styles.css';
function App() {
return (
<Card>
<Card.Header>
<Card.Title>Welcome to Matic UI</Card.Title>
</Card.Header>
<Card.Content>
<Button variant="primary">
Get Started
</Button>
</Card.Content>
</Card>
);
}2. Configure Tailwind (Optional)
If you're using Tailwind CSS, add our plugin to your configuration:
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./node_modules/@matic-ui/react/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
},
},
},
},
plugins: [require('@matic-ui/react/plugin')],
};Next Steps
Browse Components
Explore our comprehensive component library with live examples
Theming Guide
Learn how to customize colors, typography, and create custom themes
React Native Setup
Get started with our React Native component library
Examples & Templates
Ready-to-use templates and example applications