Cotton - AI-Native Design System

   ██████╗ ██████╗ ████████╗████████╗ ██████╗ ███╗   ██╗
  ██╔════╝██╔═══██╗╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║
  ██║     ██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║
  ██║     ██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║
  ╚██████╗╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║
   ╚═════╝ ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝

AI-Native Design System

Build consistent, accessible UIs with AI-powered components and design tokens. Cotton understands your code and helps AI assistants write better software.

Get Started View on GitHub

Everything You Need

A complete toolkit for building modern applications

AI-Native

Core

Built for AI workflows with MCP integration and intelligent code generation

86+ Components

Production-ready React components with full TypeScript support

Design Tokens

Tokens

Semantic tokens for colors, spacing, typography that adapt to any theme

Accessibility

A11y

WCAG 2.1 AA compliant with keyboard navigation and screen reader support

Themes

Light and dark themes out of the box with easy customization

TypeScript

Full type safety with detailed prop documentation and IntelliSense

Quick Start

Get up and running in minutes

1. Install the package

npm install @akrade/cotton-ui

2. Import and use components

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

function App() {
  return (
    <CottonCard size="lg">
      <CottonButton variant="primary">
        Get Started
      </CottonButton>
    </CottonCard>
  );
}

Read the full documentation