HighRise

Migration Guide: GHL-UI to HighRise ​

This guide is designed to help you migrate your components from GHL-UI to HighRise. It covers breaking changes, new features, and provides step-by-step migration instructions for each component.

WARNING

This is an initial migration guide and is a work in progress.

Automated Migration using MCP ​

The easiest and most reliable way to migrate is by using our Model Context Protocol (MCP) tool. This CLI tool is designed to automatically scan your Vue files, replace ghl-ui components with their Highrise equivalents, and map props for you.

What the MCP Tool Does: ​

✅ Replaces component tags (e.g., <UIButton> → <HLButton>)
✅ Updates component import statements
✅ Intelligently maps old props to new props

Learn more about using the MCP migration tool

Notable New Features ​

HighRise introduces several improvements over GHL-UI:

  • Enhanced TypeScript Support: Full TypeScript support with improved type definitions
  • Modern Component Architecture: Components built with Vue 3 Composition API
  • Improved Performance: Optimized rendering and reduced bundle size
  • Better Accessibility: ARIA attributes and keyboard navigation support
  • Consistent Design System: Unified design tokens and styling approach
  • Enhanced Documentation: Comprehensive documentation with examples

Breaking Changes ​

Component Naming ​

  • All components are now prefixed with HL in the @platform-ui/highrise package (e.g., UIButton → HLButton)

Props and Events ​

  • Some prop names have been standardized
  • Event names now follow Vue 3 conventions
  • Removed deprecated props and events

Styling ​

  • Tailwind classes have been updated to match new design system
  • Some component-specific styles have been moved to design tokens

Component Structure ​

  • Components now use Vue 3's Composition API
  • Updated slot naming conventions

Migration Steps ​

  1. Preparation

    • Update your project to Vue 3
    • Install HighRise package
    • Review breaking changes

  2. Component Migration

    • Replace @gohighlevel/ghl-ui imports with @platform-ui/highrise
    • Update component names and props
    • Migrate component-specific code

  3. Styling Updates

    • Update CSS variables
    • Migrate custom styles

  4. Testing

    • Test all migrated components
    • Verify accessibility
    • Check performance