Getting Started

Cotton is an AI-Native Design System with 88 accessible React components, MCP server for Claude Desktop, Figma token sync, and zero-config theming.

Quick Start

Install the Cotton UI package:

npm install @akrade/cotton-ui

Import and use components:

import { CottonButton, CottonInput } from '@akrade/cotton-ui';

function App() {
  return (
    <form>
      <CottonInput label="Email" type="email" />
      <CottonButton type="submit">Submit</CottonButton>
    </form>
  );
}

Features

AI-Native — MCP server lets AI assistants write production-quality code following your conventions
Zero Config — CSS auto-injects when components render. No stylesheet imports needed.
Figma Sync — Token pipeline connects directly to Figma Variables API
Accessible — Built on Radix UI primitives. WCAG 2.1 AA compliant.

Packages

@akrade/cotton-ui — React components (start here)
@akrade/cotton-tokens — Design tokens for Tailwind/CSS
@akrade/cotton-ux — Theme engine for custom frameworks
@akrade/cotton-ai — AI preferences engine
@akrade/cotton-mcp — MCP server for Claude Desktop

Next Steps