Build interfaces agents can understand

madagent is an accessible React design system built with TypeScript and CSS Modules. It combines OKLCH tokens, RTL-first behavior, and structured documentation for faster, more reliable implementation.

Explore components Design tokens

TokensColor, type, space

ThemesLight, dark, custom

ComponentsTyped React primitives

ProductConsistent interfaces

Start with the essentials

Install the package, stylesheet, and provider.

Install

Install madagent and its peer dependencies.

bash

npm install madagent react react-dom lucide-react recharts

Add the provider

Import the stylesheet once and wrap your application.

app.tsx

import { ThemeProvider } from "madagent";
import "madagent/styles";

export function App() {
  return (
    <ThemeProvider>
      {/* Your product */}
    </ThemeProvider>
  );
}

Designed for humans and agents

A shared foundation for product teams and coding systems.

Accessible by default

Keyboard behavior, focus management, ARIA semantics, and screen-reader support are built into the primitives.

OKLCH theming

Perceptually consistent color ramps, semantic tokens, and light and dark modes without runtime CSS-in-JS.

RTL first

Logical properties and mirrored interactions make every component work in both directions from the same API.

Agent-readable contracts

Typed props, structured documentation, and generated registries give coding agents reliable implementation context.

Choose your next step

Move from orientation to implementation.

ComponentsBrowse the complete library and inspect live examples.Design tokensExplore color, spacing, typography, radius, and elevation.Theming guidanceCreate, apply, and switch themes across your application.

Built with typed APIs, scoped CSS, and zero runtime styling dependencies.