Components

Cotton includes 88 accessible React components built on Radix UI primitives. All components are WCAG 2.1 AA compliant out of the box.

Interactive Documentation

Visit our Storybook for interactive examples, prop documentation, and live playground.

Component Categories

Form Controls

• CottonButton — Primary action button
• CottonInput — Text input field
• CottonTextarea — Multi-line text input
• CottonSelect — Dropdown select
• CottonCheckbox — Checkbox input
• CottonSwitch — Toggle switch
• CottonRadioGroup — Radio button group
• CottonSlider — Range slider

Layout

• CottonBox — Flexible container
• CottonStack — Vertical/horizontal stack
• CottonFlex — Flexbox container
• CottonGrid — CSS Grid container
• CottonContainer — Max-width container
• CottonSection — Page section

Data Display

• CottonCard — Content card
• CottonBadge — Status badge
• CottonAvatar — User avatar
• CottonTable — Data table
• CottonDataTable — Interactive data table

Feedback

• CottonAlert — Alert message
• CottonToast — Toast notification
• CottonProgress — Progress bar
• CottonSkeleton — Loading skeleton
• CottonSpinner — Loading spinner

Overlays

• CottonDialog — Modal dialog
• CottonSheet — Slide-out panel
• CottonPopover — Popover content
• CottonTooltip — Tooltip
• CottonDropdownMenu — Dropdown menu

Navigation

• CottonTabs — Tab navigation
• CottonBreadcrumb — Breadcrumb trail
• CottonPagination — Page navigation
• CottonSidebar — Sidebar navigation

Usage Example

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

function LoginForm() {
  return (
    <CottonCard padding="lg">
      <CottonStack gap="md">
        <CottonInput label="Email" type="email" />
        <CottonInput label="Password" type="password" />
        <CottonButton variant="primary" fullWidth>
          Sign In
        </CottonButton>
      </CottonStack>
    </CottonCard>
  );
}