Get Started

Meet Moul UI. An accessible, zero-runtime React component library built on React Aria and StyleX.

Moul UI is a modular component library designed for product engineers who want a modern, consistent, and highly accessible baseline for React applications.

By merging the robust, accessible foundations of React Aria with the compile-time type safety and efficiency of StyleX, Moul UI delivers beautiful default styles with zero runtime styling overhead.

Why Moul UI?

Accessible by Default

Full keyboard navigation, screen reader support, and robust interaction states powered by React Aria.

Zero-Runtime Styling

Built on StyleX. Atomic CSS is fully compiled and extracted at build time, resulting in zero Javascript style overhead.

Clean & Adaptable

A clean baseline of components designed to be easily modified and custom-themed to fit your branding.

Installation

Follow these steps to integrate @moul-dev/ui into your React project:

Install the Package

Add the library and its peer dependencies to your workspace:

bun add @moul-dev/ui

npm install @moul-dev/ui

pnpm add @moul-dev/ui

yarn add @moul-dev/ui

Import the CSS Stylesheet

To load the compiled StyleX atomic styles, import the stylesheet at the root of your application (typically in main.tsx, index.tsx, or your global CSS file):

import '@moul-dev/ui/style.css';

Wrap your App with ThemeProvider (Optional)

Wrap your application tree (or specific sections) with the ThemeProvider to control the color scheme or apply token overrides:

import { ThemeProvider } from '@moul-dev/ui';

function App({ children }) {
  return (
    <ThemeProvider colorScheme="light dark">
      {children}
    </ThemeProvider>
  );
}

Use the Components

Now you can import and use any of the Moul UI components:

import { Button } from '@moul-dev/ui';

function HomePage() {
  return (
    <div style={{ padding: '2rem', display: 'flex', gap: '1rem' }}>
      <Button variant="primary" onPress={() => console.log('Primary clicked!')}>
        Primary Button
      </Button>
      <Button variant="secondary" onPress={() => console.log('Secondary clicked!')}>
        Secondary Button
      </Button>
    </div>
  );
}

Next Steps

Explore the components sidebars to see all the available interactive elements, variations, and configuration settings!