Introduction

MyUI is a collection of 40+ accessible React components built on a design-token core. Every component ships unstyled where it matters and styled where it helps — so your brand stays in control while you skip the boring parts.

Components are tree-shakeable, keyboard-friendly by default, and tested against WCAG 2.2 AA contrast ratios.

Installation

Install the core package with your favorite package manager:

Prefer another registry? yarn add myui or pnpm add myui work exactly the same.

Setup

Wrap your app in the MyUIProvider once, and every component inherits your tokens automatically.

import { MyUIProvider } from 'myui';

createRoot(document.getElementById('root')).render(
  <MyUIProvider theme="brand">
    <App />
  </MyUIProvider>
);

Theming

Tokens live in a single theme.js file. Override accent colors, radii, and typography — every component picks them up instantly, including dark mode.

export const brand = {
  accent: '#7c3aed',
  radius: 12,
  font: 'Inter, sans-serif',
};

Your First Component

Import a component and drop it anywhere in your tree. It just works — focus rings, ARIA attributes and all.

import { Button } from 'myui';

export default function App() {
  return <Button variant="primary">Hello, MyUI!</Button>;
}