Home DocumentationGetting Started

Introduction to MaanOX UI

MaanOX UI is a modern, accessible, and customizable React component library that helps developers build beautiful UIs quickly.

Documentation

Comprehensive guides

Components

Ready-to-use UI elements

API Reference

Detailed specifications

Installation

You can install MaanOX UI using npm, yarn, or pnpm:

npm install @maanox/ui

yarn add @maanox/ui

pnpm add @maanox/ui

Configuration

MaanOX UI is built with Tailwind CSS. You need to configure your tailwind.config.js file:

// tailwind.config.js
const { maanoxPreset } = require('@maanox/ui/preset')

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@maanox/ui/**/*.{js,jsx,ts,tsx}'
  ],
  presets: [maanoxPreset],
}

Usage

Import components from MaanOX UI and use them in your React application:

import { Button } from '@maanox/ui/button'
import { Card } from '@maanox/ui/card'

export default function MyComponent() {
  return (
    <Card className="p-4">
      <h2 className="text-xl font-bold mb-4">Hello World</h2>
      <p className="mb-4">This is a card component from MaanOX UI.</p>
      <Button>Click me</Button>
    </Card>
  )
}

Previous Next