Moto UI is a modern React component library built for developers who care about accessibility, performance, and developer experience. It combines the headless, accessible foundation of Ark UI with the type-safe, build-time styling power of Panda CSS to help teams build interfaces that are fast, flexible, and easy to maintain.

Moto UI is also heavily inspired by Chakra UI and Hero UI. From Chakra UI, it borrows the idea of making UI development simple, composable, and friendly for teams. From Hero UI, it takes inspiration for modern patterns and polished component design.

Core Stack

• Ark UI provides the accessible, headless primitives and WAI-ARIA-aligned behavior.
• Panda CSS provides type-safe styles that are extracted at build time, which keeps runtime overhead low.

Design Principles

• Accessibility first: components are designed to work well with keyboard navigation and assistive technologies from the start.
• Type safety: the library is written in TypeScript, with typed components, props, and design tokens.
• Compound component pattern: the API is structured to make composition flexible and give you more control over the final UI.
• Styling flexibility: Panda CSS recipes and tokens make it easier to keep styles consistent while still allowing customization.

Architecture

Moto UI is organized as a pnpm monorepo, which helps keep the project modular and easier to maintain.

• @moto-ui/react — the core component library.
• @moto-ui/preset-base — shared design tokens and Panda CSS configuration.
• @moto-ui/styled-system — the generated styled-system utility package.

Why Moto UI?

Moto UI is built for teams and devlopers that want a component library that feels modern, practical, and scalable. Instead of forcing you into a rigid design system, it gives you a strong accessible foundation plus the flexibility to shape the UI to your brand and product needs.

Get Started

Visit Moto UI to learn more and get started.