Moto UI is a high-performance, accessible component library engineered for speed and scalability. Built on the foundation of Ark UI and powered by Panda CSS, it provides a robust toolkit for building modern, themeable design systems.

• ♿ Accessible by Design – Built with Ark UI’s headless logic, ensuring full WAI-ARIA compliance out of the box.
• 🎨 Style with Velocity – Utilizes Panda CSS for build-time CSS-in-JS, offering type-safe styles without the runtime overhead.
• 🧩 Compound Architecture – Flexible component composition using the "Compound Component" pattern for maximum developer control.
• 🛠️ Fully Typed – First-class TypeScript support for a predictable and error-free developer experience.
• 📱 Responsive & Themeable – Easily customize tokens and recipes to match your brand identity.

## 🚀 Getting Started

Moto UI relies on **Panda CSS** for its high-performance styling engine. Follow these steps to integrate the library and its design tokens into your project.

---

### 1. Installation

Install the Moto UI core components and the Panda CSS development dependencies:

```bash
pnpm add @moto-ui/react @moto-ui/preset-base @moto-ui/styled-system &&
pnpm add -D @pandacss/dev
# OR
npm install @moto-ui/react @moto-ui/preset-base @moto-ui/styled-system &&
npm install -D @pandacss/dev
# OR
yarn add @moto-ui/react @moto-ui/preset-base @moto-ui/styled-system &&
yarn add -D @pandacss/dev
# OR
bun add @moto-ui/react @moto-ui/preset-base @moto-ui/styled-system &&
bun add -D @pandacss/dev

Run the initialization command to set up your PostCSS and Panda configuration:

pnpm panda init --postcss
# OR
npm panda init --postcss
# OR
yarn panda init --postcss
# OR
bun panda init --postcss

Add a prepare script to your package.json. This ensures that the Panda CSS engine generates the necessary styling code whenever you install dependencies:

{
  "scripts": {
    "prepare": "panda codegen"
  }
}

Create a panda.config.ts file in your project root. This configuration imports the Moto UI base preset to ensure all component styles are correctly mapped:

import { basePreset } from "@moto-ui/preset-base";
import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  // Allows full customization of the preset styles
  eject: true,
  outExtension: "js",
  jsxFramework: "react",
  presets: [basePreset],

  // Path to your source files
  include: [
    "./src/**/*.{ts,tsx}", 
    "node_modules/@moto-ui/react/dist/buildinfo.json",
  ],
});

Create a global CSS file (e.g., src/index.css or global.css) and include the Panda CSS layers. Import this file at the root of your application:

@layer reset, base, tokens, recipes, utilities;

• Node.js:
• Package Manager: pnpm, npm, or yarn

npm install @moto-ui/react
# or
yarn add @moto-ui/react
# or
pnpm add @moto-ui/react

Install @moto-ui/react and start using the available components:

import { Button } from '@moto-ui/react';

function App() {
  return (
    <Button variant="primary" size="lg" onClick={() => console.log('Accelerating!')}>
        Get Started
    </Button>
  );
}

Moto UI includes a comprehensive suite of primitives:

• Layout: Box, Stack, Grid, Flex
• Forms: Input, Checkbox, Select, Radio Group, Slider
• Data Display: Accordion, Tabs, Tags, Tables
• Feedback: Alert, Toast, Progress, Spinner
• Overlay: Dialog, Popover, Tooltip, HoverCard

Moto UI leverages Panda CSS recipes and tokens. You can extend the default theme in your panda.config.ts:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Extend Moto UI tokens here
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: { value: '#FF5733' }
        }
      }
    }
  }
})

The Moto UI project is organized into the following packages:

• packages/color: Provides color definitions for Moto UI base on TailwindCSS v4 colors.
• packages/preset-base: The base preset for Moto UI, providing shared design tokens and configurations.
• packages/styled-system: Compiles styled tokens, CSS files, and TS definitions into the dist/ directory.
• packages/react: Provides React components and hooks for building styled UI with Moto UI.
• packages/storybook: Provides Storybook configuration for Moto UI components.

graph TD
    A["@moto-ui/colors"] -->|Imports| B["@moto-ui/preset-base"]
    B -->|Presets Configuration| C["@moto-ui/styled-system"]
    C -->|Styles & Types| D["@moto-ui/react"]
    D -->|Components| E["apps/docs & apps"]

1. Preset Input: Imports design configurations from @moto-ui/preset-base.
2. styled-system compilation: Compiles tokens, keyframes, and recipes into dist/.
3. React consumption: @moto-ui/react consumes @moto-ui/styled-system/jsx and recipes to build styled components.

We welcome contributions to make Moto UI even faster! Please check our Contributing Guide to get started.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

Built with ❤️ for the React ecosystem.