UI Component Library

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/components/ui/
• frontend/src/globals.css
• DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md
• FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md
• FRONTEND_IMPLEMENTATION_SUMMARY.md
• CRM_FRONTEND_SUMMARY.md
• frontend/VISUAL_BUILDER_QUICK_REFERENCE.md

The UI Component Library is a comprehensive collection of enterprise-grade, reusable components built using Next.js 14, React 19, and TypeScript. It leverages Shadcn UI (built on Radix UI primitives) and Tailwind CSS for styling, providing a unified design language across the GoHighLevel Clone platform. This library serves as the foundational building block for complex modules such as the Visual Workflow Builder and the CRM System.

The library is designed with a "copy-paste" philosophy, allowing for full ownership of the component code while ensuring accessibility (WCAG 2.1 AA compliance) and responsiveness. It provides both generic UI primitives and domain-specific components tailored for marketing automation and CRM workflows.

Sources: DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md, FRONTEND_IMPLEMENTATION_SUMMARY.md, CRM_FRONTEND_SUMMARY.md

Core Architecture and Tech Stack

The component library architecture follows a layered approach where base primitives are combined to create complex, feature-rich interfaces.

Technology Foundation

• Framework: React 19 with Next.js 14 App Router patterns.
• Styling: Tailwind CSS 3.4 using CSS variables for theming and dark mode support.
• Accessibility: Radix UI primitives ensuring keyboard navigation and ARIA compliance.
• Icons: Lucide React.
• Animations: Framer Motion for smooth UI transitions.

Sources: FRONTEND_IMPLEMENTATION_SUMMARY.md, CRM_FRONTEND_SUMMARY.md, DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md

Base UI Primitives (Shadcn UI)

The library includes over 30 base components designed for general-purpose UI construction. These components utilize class-variance-authority (CVA) for managing style variants.

Essential Component Inventory

Component	Purpose	Key Variants/Features
Button	Interactive triggers	default, destructive, outline, ghost, link
Input	Single-line text entry	Focus states, error validation styling
Card	Content containers	Header, Title, Description, Content, Footer
Badge	Status indicators	success, warning, destructive, outline
Table	Structured data display	Header, Body, Footer, Row, Cell
Skeleton	Loading placeholders	Pulsing animation for async data
Select	Dropdown selection	Searchable, multiselect support
Dialog/Modal	Overlay containers	Accessible focus trapping, Backdrop

Sources: DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md, CRM_FRONTEND_SUMMARY.md, FRONTEND_IMPLEMENTATION_SUMMARY.md

Domain-Specific Components

The library extends base primitives into specialized components designed for the Workflow and CRM modules.

Workflow Components

The workflow-specific components focus on automation visualization and status tracking.

• WorkflowStatusBadge: A specialized badge that color-codes workflow states (active, draft, paused, archived) and includes state-specific icons.
• WorkflowMetrics: A grid of cards displaying key performance indicators (KPIs) such as Total Enrolled, Active Contacts, and Completion Rate.
• StepNode: A custom node component for React Flow that visually represents triggers, actions, and logic steps with type-specific styling.

CRM Components

The CRM module introduces components for relationship management and data tracking.

• PipelineKanbanBoard: A drag-and-drop board built with @dnd-kit for deal management.
• ActivityTimeline: A chronological display of interactions (emails, calls, notes).
• LifecycleBadge: Indicators for lead stages (Subscriber, Prospect, Customer).

Sources: DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md, CRM_FRONTEND_SUMMARY.md, FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md

Visual Builder UI Integration

The Visual Workflow Builder utilizes specialized components to manage the canvas and configuration panels.

Canvas UI Elements

• Mini-map: A bottom-right navigation overlay for large workflow canvases.
• Controls: Zoom (0.1x to 2x), Fit-to-screen, and Undo/Redo buttons.
• Configuration Form: Dynamically generated forms supporting 12 field types (e.g., multiselect, tags, datetime) driven by Zod schemas.

Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md

Styling and Theming

Styles are managed through globals.css and a custom tailwind.config.ts. The system uses CSS variables to enable seamless theming.

Design Tokens (CSS Variables)

/* Examples from globals.css */
:root {
  --background: 0 0% 100%;
  --primary: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --border: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

Sources: frontend/QUICK_REFERENCE.md, DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md

Utility Functions

The library provides lib/utils.ts containing the cn() function, which combines clsx and tailwind-merge to allow for dynamic, conflict-free className manipulation.

Sources: DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md, frontend/QUICK_REFERENCE.md

Summary

The UI Component Library is a robust, TypeScript-first collection that bridges the gap between low-level accessible primitives and high-level domain features. By centralizing components like the WorkflowCanvas, CRM Table, and specialized Badges, the project ensures visual consistency and performance across all marketing automation tools. Its architecture supports advanced features like real-time SSE updates for execution logs and complex drag-and-drop interactions for pipeline management.

Sources: FRONTEND_IMPLEMENTATION_SUMMARY.md, FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md, CRM_FRONTEND_SUMMARY.md