@mycuppa/ui

React UI component library with accessible, customizable components.

Installation

npm install @mycuppa/ui react react-dom
# or
pnpm add @mycuppa/ui react react-dom
# or
yarn add @mycuppa/ui react react-dom

Features

• 🎨 Customizable - Theme with CSS variables
• ♿ Accessible - WAI-ARIA compliant components
• 📱 Responsive - Mobile-first design
• 🎯 Type-Safe - Full TypeScript support
• 🌙 Dark Mode - Built-in dark mode support

Quick Start

import { Button, Card, Input, Container } from '@mycuppa/ui'

function App() {
  return (
    <Container>
      <Card>
        <Card.Header>
          <h2>Welcome to Cuppa</h2>
        </Card.Header>
        <Card.Body>
          <Input label="Email" type="email" placeholder="Enter your email" />
          <Button variant="primary">Get Started</Button>
        </Card.Body>
      </Card>
    </Container>
  )
}

Components

Button

<Button variant="primary" size="medium" onClick={handleClick}>
  Click Me
</Button>

Variants: primary, secondary, outline, ghost Sizes: small, medium, large

Card

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
  <Card.Footer>Footer</Card.Footer>
</Card>

Input

<Input
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  error={error}
  required
/>

Container

<Container maxWidth="lg">Content</Container>

Max Widths: sm, md, lg, xl, full

Select

<Select
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
  ]}
  onChange={setValue}
/>

Modal

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Confirm">
  <p>Are you sure?</p>
  <Button onClick={handleConfirm}>Confirm</Button>
</Modal>

Spinner

<Spinner size="medium" color="primary" />

Theming

Customize with CSS variables:

:root {
  --cuppa-primary: #007bff;
  --cuppa-secondary: #6c757d;
  --cuppa-font-family: system-ui, sans-serif;
  --cuppa-border-radius: 4px;
  --cuppa-spacing-unit: 8px;
}

Dark Mode

[data-theme='dark'] {
  --cuppa-bg: #1a1a1a;
  --cuppa-text: #ffffff;
  --cuppa-primary: #66b2ff;
}

// Toggle dark mode
document.documentElement.setAttribute('data-theme', 'dark')

Accessibility

All components follow WAI-ARIA guidelines:

• ✅ Keyboard navigation
• ✅ Screen reader support
• ✅ Focus management
• ✅ WCAG AA color contrast

TypeScript Support

Full TypeScript support included:

import type { ButtonVariant, InputProps, CardProps } from '@mycuppa/ui'

Documentation

For detailed documentation, visit:

• UI Package Overview
• Component Reference
• Theming Guide

License

MIT