Skip to content
DocX

GHL UI Components

GHL UI Components

This section contains documentation for all available GHL UI components. Each component is documented with usage examples, props, and best practices.

Available Components

Layout Components

  • UICard - A versatile container component with header, content, and footer sections
  • UIContentWrap - A wrapper component for content with consistent padding and layout
  • UICollapse - Accordion-style collapsible content container
  • UICollapseTransition - A transition component for smooth collapse/expand animations
  • UIDrawer - A panel that slides in from the edge of the screen
  • UIDrawerContent - Content layout component for UIDrawer
  • UIHeader - A header component for page and section titles
  • UIToolbar - A toolbar component for organizing actions and controls
  • UISteps - A component for displaying step-by-step progress
  • UISortFilter - A component for combined sorting and filtering functionality
  • UISpace - A component for managing spacing between elements with flexible layout options
  • UIDivider - A component for creating horizontal or vertical dividing lines with optional titles
  • UITile - A selectable tile component used for grid-based selection interfaces

Typography Components

  • UIText - A collection of text components for consistent typography
    • UITextXlMedium - Extra large text with medium weight
    • UITextLgMedium - Large text with medium weight
    • UITextMdMedium - Medium text with medium weight
    • UITextSmMedium - Small text with medium weight
    • UITextXlNormal - Extra large text with normal weight
    • UITextLgNormal - Large text with normal weight
    • UITextMdNormal - Medium text with normal weight
    • UITextSmNormal - Small text with normal weight

Form Components

  • UIButton - A versatile button component with various styles and states
  • UIForm - A form component with validation and submission handling
  • UIInput - A versatile input component with various types and validation support
  • UIInputNumber - A numeric input component with increment/decrement controls
  • UIInputOtp - A component for one-time password input
  • UIInputAutoComplete - A text input with autocomplete suggestions
  • UISelect - A dropdown select component with single/multiple selection
  • UIAdvancedSelect - An enhanced select component with search and virtual scrolling
  • UITreeDropdown - A hierarchical dropdown selection component
  • UITreeSelect - A hierarchical selection component that combines a dropdown with a tree structure
  • UICheckboxGroup - Container component for grouping checkboxes
  • UICheckboxItem - Enhanced checkbox component with icon and content slots
  • UICheckbox - A checkbox component for multiple selections
  • UIColorPicker - A color picker component with various modes and formats
  • UIAdvancedColorPicker - Advanced color picker with brand colors support
  • UIIconPicker - A component for selecting icons from various icon sets
  • UISwitch - A toggle switch component for boolean input
  • UIRadio - A radio button component for single selection from multiple options
  • UISlider - A slider component for selecting numeric values within a range
  • UISearch - A search input component with advanced features
  • UITextarea - A multi-line text input component
  • UIFilterDropdown - A dropdown component for filtering options
  • UIDynamicTags - A component for managing dynamic tags
  • UIUpload - A component for uploading files with support for drag-and-drop, previews, and validation
  • UITimePicker - A component for selecting time with hour, minute, and second inputs
  • UIDraggableElement - A draggable element component for use in builder interfaces and drag-and-drop functionality

Data Display Components

  • UITable - A powerful table component with sorting, filtering, and pagination
  • UIProgress - A progress indicator component for displaying completion status
  • UISkeleton - A placeholder component for showing loading state of content
  • UIBadge - A component for displaying status badges and counters
  • UIAvatar - A component for displaying user avatars
  • UIAvatarGroup - A component for displaying groups of avatars with overflow handling
  • UIStatistic - A component for displaying statistical numbers and trends
  • UIPerformanceEllipsis - A component for truncating text with performance optimization
  • UIPagination - A component for handling pagination
  • UIPreview - A component for previewing content in a device frame
  • UISpinner - A component for displaying loading spinners
  • UIEmpty - A component for displaying empty state placeholders with customizable content
  • UITag - A component for displaying tags and labels with various styles and behaviors
  • UIBreadcrumb - A navigation component that shows the current location within a hierarchy
  • UITabs - A tabbed interface component for organizing content into multiple views
  • UITabPane - A tab panel component used within UITabs
  • UIMenu - A menu component for navigation and command execution
  • UIProgressSteps - A component for displaying step progress
  • UISegmentedControl - A segmented control for switching between views

Feedback Components

  • UINotification - A notification component for displaying global messages
  • UITooltip - A tooltip component for displaying informative text when hovering over elements
  • UIPopover - An enhanced tooltip component with more features
  • UISpin - A component for displaying loading spinners
  • UILoadingBar - A component for displaying loading progress bars
  • UIRating - A component for displaying and collecting ratings
  • UIModal - A modal dialog component for displaying content requiring user interaction
  • UIModalHeader - A header component for modal dialogs
  • UIModalFooter - A footer component for modal dialogs

Media Components

  • UICarousel - A slideshow component for cycling through elements
  • UICodeEditor - Code editor component with syntax highlighting

Component Structure

All components follow the Vue 3 composition API structure with TypeScript:

<script setup lang="ts">
// 1. External Imports
import { ... } from '@gohighlevel/ghl-ui'


// 2. Type Definitions
interface Props {
  // ...
}


// 3. Props Declaration
const props = defineProps<Props>()


// 4. Component Logic
</script>


<template>
  <!-- Component Template -->
</template>

For detailed implementation guidelines, refer to each component’s documentation.