The Fever Component Library is a comprehensive, self-contained React component library built on the Fever Design System. All components are styled with internal design tokens and provide consistent, professional UI elements for modern web applications.

# Import components from the library
import { Button, Input, Modal, Card } from '../fever-components/src';

# Use components with TypeScript support
<Button variant="primary" size="lg">
  Click me
</Button>

• Button - Primary, secondary, ghost variants with sizes and states
• Input - Text fields with icons, validation, and accessibility
• Textarea - Multi-line text input with resizing options
• Badge - Status indicators with color variants
• Alert - Success, warning, error, info feedback messages

• Card - Flexible container with header, content, footer sections
• Progress - Linear progress bars with variants and animations
• Spinner - Loading indicators with multiple sizes and speeds
• Icons - Fever icon system with lucide-react integration

• Search - Interactive search with icons and states
• ProgressRing - Circular progress indicators
• BarChart - Horizontal bar charts for data visualization
• MetricCard - Context-aware metric display with trends
• FileUpload - Professional drag & drop with validation
• Modal - Confirmation, success, warning, error dialogs

• Primary: #ef4444 (Fever Red)
• Success: #166534 (Professional Green)
• Warning: #ff6b35 (Orange)
• Error: #ef4444 (Red)
• Text: #000000 / #64748b (Primary/Secondary)

• Font Family: Aeonik Pro
• Classes: .text-h1, .text-h2, .text-body, .text-label, .text-caption
• Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)

• Design Tokens: Consistent 8px base spacing scale
• Border Radius: 4px, 8px, 12px, 16px, full
• Shadows: Subtle elevation with consistent shadow tokens

• ✅ No External Dependencies: Uses only internal CSS variables
• ✅ Design Token System: Consistent --fever-* CSS custom properties
• ✅ TypeScript Support: Full type definitions for all props
• ✅ Accessibility: ARIA labels, keyboard navigation, focus management
• ✅ Animation System: Smooth transitions and micro-interactions

• Variant Support: Multiple visual styles for each component
• Size Options: Small, default, large sizing across components
• State Management: Hover, focus, active, disabled states
• Responsive Design: Mobile-first responsive behavior
• Theme Consistency: Unified color and spacing system

import { Button, Alert, Card } from '../fever-components/src';

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome</Card.Title>
      </Card.Header>
      <Card.Content>
        <Alert variant="success">
          Operation completed successfully!
        </Alert>
        <Button variant="primary" size="lg">
          Get Started
        </Button>
      </Card.Content>
    </Card>
  );
}

import { Modal, FileUpload, BarChart } from '../fever-components/src';

function AdvancedExample() {
  const [modalOpen, setModalOpen] = useState(false);

  const chartData = [
    { label: 'Revenue', value: 85, rightLabel: '$85K' },
    { label: 'Profit', value: 65, rightLabel: '$65K' },
  ];

  return (
    <>
      <BarChart
        data={chartData}
        variant="success"
        spacing="default"
      />

      <FileUpload
        maxSize={10 * 1024 * 1024}
        acceptedTypes={['image/*', 'application/pdf']}
        onFilesChange={(files) => console.log(files)}
      />

      <Modal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        variant="confirmation"
        title="Delete Item"
        description="Are you sure you want to delete this item?"
        primaryAction={{
          label: "Delete",
          onClick: () => handleDelete(),
          variant: "destructive"
        }}
        secondaryAction={{
          label: "Cancel",
          onClick: () => setModalOpen(false)
        }}
      />
    </>
  );
}

• Use Button for primary actions, Badge for status indicators
• Choose Alert for feedback, Modal for confirmations
• Leverage Card for content grouping, Progress for loading states

• Always use component variants instead of custom CSS
• Leverage the built-in size options (sm, default, lg, xl)
• Use the design token system for consistent spacing and colors

• All components include proper ARIA labels and roles
• Focus management is handled automatically
• Keyboard navigation is supported throughout

• Testing Page - Interactive component playground
• Progress Tracker - Development status and roadmap
• Design Tokens - Complete token system reference
• Base Styles - Core CSS implementation

Built with ❤️ by the Fever Team Last Updated: September 30, 2024