Usage Guide

Learn how to import, customize, and integrate MoonUI components into your React projects with best practices and real-world examples.

IMPORT

Import Components

Start using MoonUI in seconds

app.tsx

import { Button } from "@moontra/moonui"

TypeScript Ready

Full type definitions included

Tree Shakeable

Import only what you need

CLI

Use CLI Tool

Add components with one command

terminal

$ moonui add button card

Auto Setup

Handles dependencies automatically

Updates Available

Keep components up to date

Import Methods

Different ways to use MoonUI components

1. NPM Package Import

Import components directly from the NPM packages:

app.tsx

// Free components
import { Button, Card, Dialog } from "@moontra/moonui"

// Pro components (requires license)
import { DataTable, Calendar } from "@moontra/moonui-pro"

// With types
import { Button, type ButtonProps } from "@moontra/moonui"

2. Local Component Import

After using CLI to add components to your project:

component.tsx

// Import from your local ui directory
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

// Import variants for custom styling
import { buttonVariants } from "@/components/ui/button"

3. Import Aliasing

Avoid naming conflicts by aliasing imports:

app.tsx

// Alias to avoid conflicts
import { Button as MoonButton } from "@moontra/moonui"
import { Dialog as MoonDialog } from "@moontra/moonui"

// Use with custom names
<MoonButton variant="primary">Click me</MoonButton>
<MoonDialog>...</MoonDialog>

Pro Tip

Use named imports for better tree-shaking and smaller bundle sizes. Import only what you need!

CLI Commands

Powerful commands to manage your components

Adding Components

Add specific components:

terminal

$ moonui add button card dialog

Add all free components:

terminal

$ moonui add --all

Add Pro components:

terminal

$ moonui add data-table --pro

Best Practices

Guidelines for building with MoonUI

Component Architecture

Keep components small and focused
Use composition over inheritance
Extract reusable logic into hooks
Implement proper error boundaries

State Management

Use local state when possible
Lift state up when needed
Consider Zustand for global state
Optimize with React.memo

Accessibility

Use semantic HTML elements
Add proper ARIA labels
Test keyboard navigation
Ensure color contrast ratios

Performance

Implement lazy loading
Optimize bundle size
Use code splitting
Cache API responses

Browse Components

Explore our collection of 168 components

Customize Theme

Learn how to customize MoonUI to match your brand