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.

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