Moon React

Moon is a multi-layered, scalable, customizable, and adaptable Design System.

Moon React represents the third layer of the Moon Design System. The package relies on Moon UI CSS classes, which compose the second layer of Moon Design System.

Moon React provides simple functional components, architected with the Compound Pattern, and two optional installation methods: Package Installation or CLI Scaffolding.

📦 Installation

Full Package Installation

Install the complete component library:

npm install @moondesignsystem/react
# or
yarn add @moondesignsystem/react
# or
pnpm install @moondesignsystem/react

Component Installation via CLI

Install selective components using the CLI:

# Add a single component
npx @moondesignsystem/react --add button

# Add multiple components
npx @moondesignsystem/react --add button input

Or install all components at once:

npx @moondesignsystem/react --add-components

Moon UI Integration

Moon UI is a standalone library for generating core and component CSS files from Figma design tokens.

Configuration

If you need to customize default Moon core and components styling, add a FIGMA_TOKEN variable to your .env file and include this file in .gitignore:

FIGMA_TOKEN=your-figma-token-here

CLI Options for Moon UI

# Specify your project name for css files generation
npx @moondesignsystem/react --projectName your-project

# Use custom Figma files
npx @moondesignsystem/react --coreFileId CORE_FILE_ID --componentsProjectId COMPONENTS_PROJECT_ID

# Configure for non-Tailwind projects (default is 'tailwindcss')
npx @moondesignsystem/react --target css

# Generate vanilla CSS files with browser CSS reset. Not needed with tailwindcss target
npx @moondesignsystem/ui --target css --preflight

📝 Component Usage

When installed via package.json

import { Button } from "@moondesignsystem/react";

const App = () => <Button>Click me</Button>;

When installed locally in your project directory

import { Button } from "../local-path-to-moon-components;

const App = () => <Button>Click me</Button>;

License

MIT

Versioning

Moon UI follows Semantic Versioning. View available versions in the repository tags.

• MAJOR: Incompatible API changes
• MINOR: New backward-compatible functionality
• PATCH: Backward-compatible bug fixes