CampX React Blueprint

⚠️ IMPORTANT: Starting from version 3.x.y, this library is built on shadcn/ui with all Material-UI (MUI) dependencies completely removed. Please ensure you are using the 2.x.y version or higher. Previous versions (2.x.y) still depend on Material-UI.

A comprehensive React component library built with TypeScript and shadcn/ui for building modern web applications with consistent design patterns and functionality.

Overview

CampX React Blueprint provides a complete set of reusable components organized into logical categories. The library is built on top of Material-UI v7 and provides additional functionality, styling, and patterns specific to CampX applications.

Key Features:

• 🎨 67+ Production-Ready Components - Comprehensive component library covering all common UI patterns
• 🎯 TypeScript First - Full type safety and excellent developer experience
• 🎨 Material-UI Foundation - Built on top of MUI v7 with consistent theming
• 📖 Storybook Documentation - Interactive component documentation and testing
• 🌓 Dark/Light Theme - Complete theming system with dark and light mode support
• ♿ Accessibility - WCAG compliant components with proper ARIA support
• 📱 Responsive Design - Mobile-first responsive components

Installation

npm install @campxdev/react-blueprint
# or
yarn add @campxdev/react-blueprint

Quick Start

import { MuiThemeProvider, Button, DataTable } from '@campxdev/react-blueprint';
import { lightTheme } from '@campxdev/react-blueprint';

function App() {
  return (
    <MuiThemeProvider theme={lightTheme}>
      <Button variant="contained" color="primary">
        Hello CampX!
      </Button>
    </MuiThemeProvider>
  );
}

Component Categories

The library includes 67+ components organized into 7 categories:

• Layout (5 components) - Application structure and page layout
• Input (21 components) - Form controls and user input elements
• Navigation (15 components) - Navigation and user interaction flows
• Feedback (6 components) - User feedback and status information
• Data Display (13 components) - Data presentation and organization
• Assets (7 components) - Static assets including error pages and icons
• Charts (5 components) - Data visualization with Recharts integration

Documentation

For Developers

• Component API Reference - Detailed component documentation

For AI Agents

• AI Agent Documentation - Comprehensive component reference designed specifically for AI agents to understand and work with the component system

The agents.md file provides detailed information about all components, their purposes, props, usage patterns, and relationships - specifically formatted for AI systems to parse and understand the component library structure.

Development Scripts

Development

yarn start          # Start development server
yarn storybook      # Launch Storybook documentation

Building

yarn build          # Build library for production
yarn build-storybook # Build Storybook for deployment

Testing

yarn test           # Run test suite

Component Architecture

Theme System

All components are built with a consistent theming system supporting both light and dark modes:

import { MuiThemeProvider, lightTheme, darkTheme } from '@campxdev/react-blueprint';

// Use light theme
<MuiThemeProvider theme={lightTheme}>
  <YourApp />
</MuiThemeProvider>

// Use dark theme
<MuiThemeProvider theme={darkTheme}>
  <YourApp />
</MuiThemeProvider>

Form Integration

Components work seamlessly together for form building:

import {
  FormWrapper,
  TextField,
  Button,
  FormActions,
} from '@campxdev/react-blueprint';

<FormWrapper onSubmit={handleSubmit}>
  <TextField label="Name" name="name" required />
  <TextField label="Email" name="email" type="email" required />
  <FormActions>
    <Button type="submit" variant="contained">
      Submit
    </Button>
    <Button variant="outlined">Cancel</Button>
  </FormActions>
</FormWrapper>;

Layout Structure

Build consistent application layouts:

import {
  AppHeader,
  Sidebar,
  PageContent,
  PageHeader,
} from '@campxdev/react-blueprint';

<div className="app">
  <AppHeader
    userFullName="John Doe"
    clientName="CampX"
    collapsed={sidebarCollapsed}
  />
  <div className="app-body">
    <Sidebar />
    <main>
      <PageHeader title="Dashboard" />
      <PageContent>{/* Your page content */}</PageContent>
    </main>
  </div>
</div>;

Contributing

This is a private CampX component library. For internal development guidelines and contribution processes, please refer to the internal CampX documentation.

License

Private - CampX Internal Use Only