React Components

PrimitiveKit for React provides 38 production-ready components with complete TypeScript support and zero hardcoded values.

Installation

npm install @primitivekit/react

Quick Start

import { Button, Card, Badge } from '@primitivekit/react';
import '@primitivekit/react/tokens/tokens.css';

function App() {
  return (
    <Card variant="elevated">
      <h2>Welcome to PrimitiveKit</h2>
      <Badge variant="solid" color="primary">New</Badge>
      <Button onClick={() => alert('Hello!')}>
        Click Me
      </Button>
    </Card>
  );
}

Features

• ✅ 38 Components - Complete component library
• ✅ TypeScript - Full type definitions included
• ✅ 600+ Design Tokens - Comprehensive customization
• ✅ Zero Hardcoded Values - Everything customizable via CSS variables
• ✅ Accessible - WCAG 2.1 AA compliant
• ✅ Tree Shakeable - Import only what you need

Component Categories

Layout Components

• Card - Flexible container with variants
• Container - Responsive content wrapper
• Grid - Flexible grid system
• Stack - Vertical/horizontal stacking
• Space - Spacing between elements
• Divider - Visual separator

Form Components

• Button - Interactive button
• Input - Text input field
• Select - Dropdown selection
• Checkbox - Checkbox input
• Radio - Radio button
• Switch - Toggle switch
• Textarea - Multi-line text input
• Slider - Range slider
• Form - Form wrapper
• Upload - File upload

Feedback Components

• Alert - Alert messages
• Badge - Status indicators
• Spinner - Loading spinner
• Progress - Progress bar
• Skeleton - Loading placeholder

Navigation Components

• Link - Navigation link
• Breadcrumb - Breadcrumb navigation
• Tabs - Tab navigation
• Menu - Navigation menu
• Steps - Step indicator
• Pagination - Page navigation

Overlay Components

• Modal - Modal dialog
• Drawer - Side drawer
• Tooltip - Tooltip overlay
• Popover - Popover overlay
• Dropdown - Dropdown menu

Data Display Components

• Avatar - User avatar
• Tag - Tag label
• Table - Data table
• Collapse - Collapsible content
• Image - Image component
• Empty - Empty state
• Typography - Text styling

Version

Current version: 0.2.1

Repository

GitHub • NPM