Frequently Asked Questions
What is HighRise
HighRise is both the design system and a brand new library of components for GoHighLevel.
How do I configure TailwindCSS with HighRise?
Use the HLTailwindConfig export from @platform-ui/highrise in your TailwindCSS config file. Spread the configuration and customize it according to your usecase. For more sophisticated customizations, lodash-es/merge can be used.
What is HLContentWrap and when should I use it?
HLContentWrap is a layout component that provides proper scoping and styling context for HighRise components. Use it only for the root page component as nesting HLContentWrap will cause unexpected behavior. Always use namepsace in HLContentWrap and scope global styles from your app into the .[namespace] class.
Is there an automated way to migrate from GHL-UI to HighRise?
Yes! Use the Model Context Protocol (MCP) migration tool. It automatically scans your Vue files, replaces component tags, updates imports, and maps props from GHL-UI to HighRise equivalents.
Can I use both GHL-UI and HighRise together?
Yes, using compat mode. Install @gohighlevel/ghl-ui@compat and import both stylesheets. Use HLContentWrap from HighRise (UIContentWrap is deprecated), and be aware of classname prefix changes. Refer docs.
How do I set up HighRise in a Nuxt SSR application?
Use the ghl-ssr-boilerplate template for best results.
Why do I need specific css-render version resolutions for SSR?
Specific css-render version resolutions (^0.15.14) in package.json ensure compatibility between HighRise components and Nuxt SSR environment, preventing hydration mismatches and styling issues.
Should I pin HighRise to a specific version in production?
During development, keep the version set to latest to receive patches. Before production deployment, fix the version in package.json to ensure consistency and prevent unexpected updates.
Note
Setting the package version to latest during development does not guarantee you will use the corresponding version of the package as the version which you installed initially would have been saved in the lockfile. Run yarn add @platform-ui/highrise@latest regularly during development to ensure the you are using the latest version.
How do I choose the right namespace for my application?
Use your application name from webpack config as the namespace in both PostCSS config prefix and HLContentWrap namespace prop. This ensures proper CSS scoping and prevents conflicts in micro-frontend architectures.
Where can I get help or report issues with HighRise?
Reach out to the team in the #design-system Slack channel. Enhancement requests are only considered for HighRise going forward, as GHL-UI is entering maintenance mode.
I am facing an issue when opening multiple detached elements (Modals, Drawers, Popovers etc.) where I am not able to focus on input elements
Apply :trapFocus="false" to your detached elements and use the :to to teleport the detached elements to a container in your app to prevent z-index conflicts and unfocusable input elements when attaching directly to the DOM body by default.
Facing TypeError: Cannot read properties of null (reading 'ce') or TypeError: Cannot read properties of null (reading 'isCE')?
Add the below configuration to your package.json file. This is a yarn v1 issue where the package manager is unable to consistently resolve different versions of the same dependency (especially with vue). This yarn issue is triggered by packages listing vue as a direct dependency even though our consuming apps already have vue installed.
"resolutions": {
"vue": "<your version>"
}Note
resolutions is the key for yarn. For npm it is overrides: { ... } and for pnpm it is pnpm: { overrides: { ... } }