Skip to main content

Catalyst Component Library

Overview​

The Catalyst component library is a comprehensive collection of reusable UI components built with React, TypeScript, and Tailwind CSS. All components follow the Catalyst design system and are optimized for performance and accessibility.

Design System​

Color Palette​

/* Primary Colors */
--catalyst-50: #f8fafc
--catalyst-100: #f1f5f9
--catalyst-200: #e2e8f0
--catalyst-300: #cbd5e1
--catalyst-400: #94a3b8
--catalyst-500: #64748b
--catalyst-600: #475569
--catalyst-700: #334155
--catalyst-800: #1e293b
--catalyst-900: #0f172a
--catalyst-950: #020617

/* Accent Colors */
--blue-400: #60a5fa
--blue-500: #3b82f6
--blue-600: #2563eb
--green-400: #4ade80
--green-500: #22c55e
--green-600: #16a34a
--red-400: #f87171
--red-500: #ef4444
--red-600: #dc2626
--yellow-400: #facc15
--yellow-500: #eab308
--yellow-600: #ca8a04

Typography​

  • Font Family: Inter, system-ui, sans-serif
  • Font Sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl
  • Font Weights: font-normal, font-medium, font-semibold, font-bold

Spacing​

  • Base Unit: 4px (0.25rem)
  • Scale: 1, 2, 3, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

Base Components​

Button 🔘​

A versatile button component with multiple variants and sizes.

interface ButtonProps {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size?: 'default' | 'sm' | 'lg' | 'icon'
  asChild?: boolean
  children: React.ReactNode
  className?: string
  disabled?: boolean
  onClick?: () => void
}

Usage Examples:

// Primary button
<Button>Click me</Button>

// Secondary button
<Button variant="outline">Cancel</Button>

// Destructive button
<Button variant="destructive">Delete</Button>

// Small button with icon
<Button size="sm" className="bg-green-600 hover:bg-green-700">
  <CheckCircle className="w-4 h-4" />
  Complete
</Button>

// Icon button
<Button size="icon" variant="ghost">
  <Settings className="w-4 h-4" />
</Button>

Variants:

  • default: Primary blue button
  • destructive: Red button for destructive actions
  • outline: Outlined button with transparent background
  • secondary: Gray button for secondary actions
  • ghost: Transparent button with hover effects
  • link: Text button that looks like a link

Card 🃏​

A container component for grouping related content.

interface CardProps {
  children: React.ReactNode
  className?: string
}

// Sub-components
CardHeader, CardContent, CardTitle, CardDescription, CardFooter

Usage Example:

<Card className="bg-catalyst-800 border-catalyst-700">
  <CardHeader>
    <CardTitle>Task Details</CardTitle>
    <CardDescription>Review and manage task information</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Task content goes here</p>
  </CardContent>
  <CardFooter>
    <Button>Save Changes</Button>
  </CardFooter>
</Card>

Input 📝​

Form input component with consistent styling.

interface InputProps {
  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
  placeholder?: string
  value?: string
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
  disabled?: boolean
  className?: string
  error?: boolean
}

Usage Examples:

// Basic input
<Input placeholder="Enter your name" />

// Email input
<Input type="email" placeholder="Enter your email" />

// Input with error state
<Input 
  placeholder="Enter value" 
  error={true}
  className="border-red-500 focus:border-red-500"
/>

// Disabled input
<Input placeholder="Disabled input" disabled />

Select 📋​

Dropdown selection component with search and multi-select support.

interface SelectProps {
  value?: string
  onValueChange?: (value: string) => void
  placeholder?: string
  disabled?: boolean
  children: React.ReactNode
}

// Sub-components
SelectTrigger, SelectContent, SelectItem, SelectValue

Usage Example:

<Select value={selectedValue} onValueChange={setSelectedValue}>
  <SelectTrigger className="bg-catalyst-700 border-catalyst-600">
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent className="bg-catalyst-700 border-catalyst-600">
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Badge 🏷️​

Small status indicator component.

interface BadgeProps {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
  children: React.ReactNode
  className?: string
}

Usage Examples:

// Default badge
<Badge>Active</Badge>

// Status badges
<Badge className="bg-green-500/20 text-green-400">Completed</Badge>
<Badge className="bg-yellow-500/20 text-yellow-400">In Progress</Badge>
<Badge className="bg-red-500/20 text-red-400">Failed</Badge>

// Priority badges
<Badge className="border-red-500 text-red-400">High</Badge>
<Badge className="border-yellow-500 text-yellow-400">Medium</Badge>
<Badge className="border-blue-500 text-blue-400">Low</Badge>

Dialog 💬​

Modal dialog component for overlays and popups.

interface DialogProps {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  children: React.ReactNode
}

// Sub-components
DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter

Usage Example:

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent className="bg-catalyst-800 border-catalyst-700">
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to delete this item?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline" onClick={() => setIsOpen(false)}>
        Cancel
      </Button>
      <Button variant="destructive" onClick={handleDelete}>
        Delete
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Table 📊​

Data table component with sorting and filtering.

interface TableProps {
  children: React.ReactNode
  className?: string
}

// Sub-components
TableHeader, TableBody, TableRow, TableHead, TableCell

Usage Example:

<Table>
  <TableHeader>
    <TableRow className="border-catalyst-700">
      <TableHead className="text-catalyst-300">Name</TableHead>
      <TableHead className="text-catalyst-300">Status</TableHead>
      <TableHead className="text-catalyst-300">Created</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {items.map((item) => (
      <TableRow key={item.id} className="border-catalyst-700">
        <TableCell className="text-catalyst-100">{item.name}</TableCell>
        <TableCell>
          <Badge className="bg-green-500/20 text-green-400">
            {item.status}
          </Badge>
        </TableCell>
        <TableCell className="text-catalyst-400">
          {formatDate(item.created_at)}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Form Components​

Form 📝​

Form wrapper with validation and error handling.

interface FormProps {
  children: React.ReactNode
  onSubmit?: (e: React.FormEvent) => void
  className?: string
}

// Sub-components
FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage

Usage Example:

<Form onSubmit={handleSubmit}>
  <FormField
    name="email"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input type="email" {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
  <Button type="submit">Submit</Button>
</Form>

Checkbox ☑️​

Checkbox input component.

interface CheckboxProps {
  checked?: boolean
  onCheckedChange?: (checked: boolean) => void
  disabled?: boolean
  className?: string
}

Usage Example:

<Checkbox 
  checked={isChecked} 
  onCheckedChange={setIsChecked}
  className="border-catalyst-600"
/>

Textarea 📄​

Multi-line text input component.

interface TextareaProps {
  placeholder?: string
  value?: string
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
  disabled?: boolean
  className?: string
  rows?: number
}

Usage Example:

<Textarea 
  placeholder="Enter your message..."
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  rows={4}
  className="bg-catalyst-700 border-catalyst-600 text-catalyst-100"
/>

Layout Components​

Sidebar 📱​

Navigation sidebar component.

interface SidebarProps {
  activeSection: string
  onSectionChange: (section: string) => void
  isOpen?: boolean
  onClose?: () => void
  userRole?: string
  selectedClient?: Client | null
}

Features:

  • Collapsible navigation sections
  • Role-based menu items
  • Mobile-responsive design
  • Active state highlighting

Header 🏠​

Top navigation header component.

interface HeaderProps {
  user: User
  clients: Client[]
  selectedClient: Client | null
  onClientChange: (client: Client) => void
  onLogout: () => void
  onMenuToggle: () => void
}

Features:

  • User profile and logout
  • Client switching dropdown
  • Mobile menu toggle
  • Notification indicators

Data Display Components​

Pagination 📄​

Pagination component for large datasets.

interface PaginationProps {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
  className?: string
}

Usage Example:

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
  className="justify-center"
/>

Skeleton 💀​

Loading skeleton component for better UX.

interface SkeletonProps {
  className?: string
  children?: React.ReactNode
}

Usage Examples:

// Text skeleton
<Skeleton className="h-4 w-32" />

// Card skeleton
<Skeleton className="h-32 w-full rounded-lg" />

// Table skeleton
<div className="space-y-2">
  <Skeleton className="h-10 w-full" />
  <Skeleton className="h-10 w-full" />
  <Skeleton className="h-10 w-full" />
</div>

Progress 📈​

Progress bar component.

interface ProgressProps {
  value: number
  max?: number
  className?: string
}

Usage Example:

<Progress 
  value={75} 
  max={100} 
  className="w-full"
/>

Utility Components​

Separator ➖​

Visual separator component.

interface SeparatorProps {
  orientation?: 'horizontal' | 'vertical'
  className?: string
}

Usage Example:

<div className="flex items-center space-x-4">
  <span>Left content</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Right content</span>
</div>

Tooltip 💡​

Tooltip component for additional information.

interface TooltipProps {
  content: React.ReactNode
  children: React.ReactNode
  side?: 'top' | 'right' | 'bottom' | 'left'
}

Usage Example:

<Tooltip content="This action cannot be undone">
  <Button variant="destructive">Delete</Button>
</Tooltip>

Toast 🍞​

Notification toast component.

interface ToastProps {
  title?: string
  description?: string
  variant?: 'default' | 'destructive'
  duration?: number
}

Usage Example:

const { toast } = useToast()

// Show success toast
toast({
  title: "Success",
  description: "Task created successfully!",
})

// Show error toast
toast({
  title: "Error",
  description: "Failed to create task",
  variant: "destructive",
})

Custom Hooks​

useAuth 🔐​

Authentication hook for user management.

const { user, logout, isLoading } = useAuth()

useToast 🍞​

Toast notification hook.

const { toast } = useToast()

useMobile 📱​

Mobile detection hook.

const isMobile = useMobile()

Styling Guidelines​

Dark Theme​

All components are designed for dark theme with catalyst color palette:

// Background colors
className="bg-catalyst-900" // Main background
className="bg-catalyst-800" // Card background
className="bg-catalyst-700" // Input background

// Text colors
className="text-catalyst-100" // Primary text
className="text-catalyst-300" // Secondary text
className="text-catalyst-400" // Muted text

// Border colors
className="border-catalyst-700" // Card borders
className="border-catalyst-600" // Input borders

Interactive States​

// Hover states
className="hover:bg-catalyst-800 hover:text-catalyst-50"

// Focus states
className="focus:ring-2 focus:ring-blue-500 focus:border-transparent"

// Disabled states
className="disabled:opacity-50 disabled:pointer-events-none"

Responsive Design​

// Mobile first approach
className="flex flex-col md:flex-row gap-4"

// Responsive text
className="text-sm md:text-base"

// Responsive spacing
className="p-4 md:p-6"

Accessibility​

ARIA Labels​

<Button aria-label="Close modal">
  <X className="w-4 h-4" />
</Button>

Keyboard Navigation​

All interactive components support full keyboard navigation.

Screen Reader Support​

Proper semantic HTML and ARIA attributes for screen readers.

Performance​

Memoization​

const ExpensiveComponent = React.memo(({ data }) => {
  // Component implementation
})

Lazy Loading​

const LazyComponent = lazy(() => import('./LazyComponent'))

Code Splitting​

Components are automatically code-split by route.

This component library provides a comprehensive set of reusable UI components. For specific implementation details and advanced usage, refer to the source code and Storybook documentation.