@mycuppa/ui

A modern React component library with built-in theming support and TypeScript types.

Installation

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

Components

Button

Versatile button component with multiple variants and sizes:

import { Button } from '@mycuppa/ui'

function App() {
  return (
    <div>
      {/* Variants */}
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
      <Button variant="danger">Danger</Button>

      {/* Sizes */}
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
      <Button size="large">Large</Button>

      {/* Full width */}
      <Button fullWidth>Full Width Button</Button>

      {/* Disabled */}
      <Button disabled>Disabled</Button>
    </div>
  )
}

Container

Layout component for consistent spacing and max-width:

import { Container } from '@mycuppa/ui'

function App() {
  return (
    <Container maxWidth="large" padding centered>
      <h1>My App</h1>
      <p>Content goes here</p>
    </Container>
  )
}

Props:

• maxWidth - Maximum width (small, medium, large, full)
• padding - Add padding (default: true)
• centered - Center content (default: true)

Theming

useTheme Hook

Manage theme state in your application:

import { useTheme } from '@mycuppa/ui'

function ThemeToggle() {
  const { theme, setTheme, resetTheme } = useTheme()

  return (
    <div>
      <p>Current primary color: {theme.primary}</p>

      <button onClick={() => setTheme({ primary: '#ff0000' })}>
        Red Theme
      </button>

      <button onClick={() => setTheme({ primary: '#0000ff' })}>
        Blue Theme
      </button>

      <button onClick={resetTheme}>Reset Theme</button>
    </div>
  )
}

Default Theme

{
  primary: '#007bff',
  secondary: '#6c757d',
  background: '#ffffff',
  text: '#212529',
  border: '#dee2e6',
  borderRadius: '0.25rem',
  spacing: {
    small: '0.5rem',
    medium: '1rem',
    large: '1.5rem',
  }
}

Custom Theme

import { useTheme } from '@mycuppa/ui'

function App() {
  const { theme } = useTheme({
    primary: '#8b5cf6',
    secondary: '#ec4899',
    background: '#1f2937',
    text: '#f9fafb',
  })

  return <div style={{ color: theme.text }}>Custom themed app</div>
}

Styling

The UI components use CSS classes with the cuppa- prefix. You can customize them with your own CSS:

/* Override button styles */
.cuppa-button--primary {
  background: linear-gradient(to right, #8b5cf6, #ec4899);
  border: none;
}

.cuppa-button--primary:hover {
  opacity: 0.9;
}

/* Override container styles */
.cuppa-container--large {
  max-width: 1400px;
}

TypeScript Support

All components are fully typed:

import type { ButtonProps, ContainerProps, Theme } from '@mycuppa/ui'

const customButton: ButtonProps = {
  variant: 'primary',
  size: 'large',
  fullWidth: true,
  onClick: () => console.log('Clicked!'),
}

Best Practices

1. Use semantic variants - Choose the right variant for the action
2. Consistent sizing - Stick to the predefined sizes
3. Theme at the root - Initialize theme at the app root
4. CSS customization - Override CSS classes for custom styling
5. Accessibility - Always provide meaningful button text

Examples

Form with Validation

import { Button, Container } from '@mycuppa/ui'
import { useState } from 'react'

function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Login:', { email, password })
  }

  return (
    <Container maxWidth="small">
      <form onSubmit={handleSubmit}>
        <h2>Login</h2>

        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />

        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />

        <Button type="submit" variant="primary" fullWidth>
          Sign In
        </Button>
      </form>
    </Container>
  )
}

API Reference

Button Props

• variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
• size?: 'small' | 'medium' | 'large'
• fullWidth?: boolean
• disabled?: boolean
• className?: string
• testId?: string
• All standard button HTML attributes

Container Props

• maxWidth?: 'small' | 'medium' | 'large' | 'full'
• padding?: boolean
• centered?: boolean
• className?: string
• testId?: string
• All standard div HTML attributes

useTheme Hook

Returns:

• theme: Theme - Current theme object
• setTheme: (theme: Partial<Theme>) => void - Update theme
• resetTheme: () => void - Reset to default theme