10X Roofing UI Components

A reusable React component library built for the 10X Roofing ecosystem, featuring glass morphism design patterns, dashboard components, and comprehensive form elements.

Installation

npm install @10x-roofing/ui-components

Quick Start

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Heading,
  Text,
  StatusBar,
  DataTable
} from '@10x-roofing/ui-components';

function MyDashboard() {
  return (
    <Card variant="default">
      <CardHeader>
        <CardTitle>Sales Dashboard</CardTitle>
      </CardHeader>
      <CardContent>
        <Heading size="h4">Performance Metrics</Heading>
        <StatusBar percentage={85} />
        <Button variant="primary">View Details</Button>
      </CardContent>
    </Card>
  );
}

Components

Layout Components

• Card - Glass morphism cards with variants: default, simple, subtle, flat
• LoadingAnimation - Loading spinners and skeleton states

Form Components

• Button - Multiple variants: primary, secondary, glass, tab, outline, icon
• Select - Dropdown selectors with search and loading states
• SearchInput - Debounced search with clear functionality
• FilterDropdown - Filter dropdowns with icons and counts

Data Components

• DataTable - Complete table with search, filtering, sorting, and pagination
• StatusBar - KPI progress bars with automatic color coding
• TrendIndicator - Trend arrows showing positive/negative/neutral states

Typography

• Heading - Semantic headings: hero, display, h1-h5
• Text - Body text: body-lg, body, body-sm, caption, tiny

Styling

This package uses Tailwind CSS and includes:

• Glass morphism effects (glass-elevated, glass-subtle)
• Brand gradient backgrounds (brand-gradient)
• KPI color system (auto-colored based on percentages)
• Typography scale matching dashboard patterns

Usage in Different Applications

React/Next.js Applications

import { Button, Card } from '@10x-roofing/ui-components';

TypeScript Support

All components are fully typed with TypeScript interfaces.

Customization

Components use CSS classes that can be extended:

<Button variant="primary" className="my-custom-styles">
  Custom Button
</Button>

Design System

• Colors: Automatic KPI coloring (green >80%, amber 60-80%, orange 40-60%, red <40%)
• Spacing: 4px-based spacing system
• Animations: Swift (100ms) and smooth (240ms) transitions
• Typography: Montserrat font family with proper line heights

Examples

See TestUIComponents.tsx for comprehensive examples of all components in action.

Development

Built with:

• React 18+
• TypeScript
• Tailwind CSS
• Framer Motion (for animations)

Perfect for sales dashboards, admin panels, data visualization tools, and any application needing professional glass morphism UI components.