HighRise

@platform-ui/highrise ​

Getting started with the HighRise UI library

1. Authentication ​

Append the below snippet to the app's .npmrc / .yarnrc.yml file

txt
@gohighlevel:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken='<GITHUB_PKG_AUTH_TOKEN>'

@platform-ui:registry=https://us-central1-npm.pkg.dev/highlevel-staging/frontend-core/
//us-central1-npm.pkg.dev/highlevel-staging/frontend-core/:always-auth=true
//us-central1-npm.pkg.dev/highlevel-staging/frontend-core/:_authToken='<GOOGLE_PKG_AUTH_TOKEN>'

@ghl-plugins:registry=https://us-central1-npm.pkg.dev/highlevel-staging/ghl-plugins/
//us-central1-npm.pkg.dev/highlevel-staging/ghl-plugins/:always-auth=true
//us-central1-npm.pkg.dev/highlevel-staging/ghl-plugins/:_authToken='<GOOGLE_PKG_AUTH_TOKEN>'
yaml
nodeLinker: node-modules
npmScopes:
  gohighlevel:
    npmAlwaysAuth: true
    npmRegistryServer: 'https://npm.pkg.github.com/'
    npmAuthToken: '<GITHUB_PKG_AUTH_TOKEN>'
  platform-ui:
    npmAlwaysAuth: true
    npmRegistryServer: 'https://us-central1-npm.pkg.dev/highlevel-staging/frontend-core/'
    npmAuthToken: '<GOOGLE_PKG_AUTH_TOKEN>'
  ghl-plugins:
    npmAlwaysAuth: true
    npmRegistryServer: 'https://us-central1-npm.pkg.dev/highlevel-staging/ghl-plugins/'
    npmAuthToken: '<GOOGLE_PKG_AUTH_TOKEN>'

GitHub Package Token ​

For accessing private GitHub packages, obtain the token from this thread.

Google Artifact Registry Authentication ​

Run the following command to authenticate with Google Artifact Registry:

bash
sh
npx google-artifactregistry-auth

If your npmrc file is present at a different path, run the following command:

bash
sh
npx google-artifactregistry-auth --repo-config <PATH_TO_READ_ONLY_NPMRC> --credential-config <PATH_TO_WRITE_NPMRC>

Note: For Yarn 2+ users, after running the above command, we need to manually copy the generated token from .npmrc to your .yarnrc.yml file as gcloud-cli doesn't support authenticating from .yarnrc.yml files yet.

2. Prerequisites ​

Package Manager ​
  • node.js >= 20 ( 20.10.0 recommended)
  • yarn >= 1 ( 4.6.0 recommended)
  • npm >= 7 ( 9.0.0 recommended)
Tailwind ​
  • autoprefixer >= 10 (10.4.20 recommended)
  • postcss >= 8 (8.4.47 recommended)
  • tailwindcss >= 3 (3.4.14 recommended)

Note: Follow the compatibility guide if you wish to use both @gohighlevel/ghl-ui & @platform-ui/highrise simulataneously. If you’re still facing issues, please feel free to reach out to the team here.

Install Tailwind ​
sh
yarn add [email protected] [email protected] [email protected] -D

3. Required Packages Installation ​

Please keep the version set to latest in your dependencies while under development of your app. We'll keep pushing minor patches to the components in parallel. Before productionalization of the app, we can fix the version in package.json

bash
sh
# Install HighRise UI components and ghl-icons
yarn add @platform-ui/highrise @gohighlevel/ghl-icons @ghl-plugins/tailwind-prefix-wrapper

Note: This command will install the HighRise library along with the GHL icons, which is a dependency.

4. Setting up fonts ​

Add Inter stylesheet to your project

Note

This is needed only for iframe and standalone apps. For module-federated apps, fonts are initialized in spm-ts

index.html
html
<html>
  <head>
    <link rel="preconnect" href="https://rsms.me/" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
  </head>
</html>

5. Setting up tailwind config ​

The HLTailwindConfig export provides our pre-configured Tailwind settings optimized for the HighRise component system. While using the configuration as-is works for most applications, you can extend it for custom needs:

  • Spread ...HLTailwindConfig to inherit our base configuration
  • Preserve our plugins by spreading [...HLTailwindConfig.plugins, /* <other plugins> */] into your plugins array
  • For deep customization, use lodash.merge() to ensure proper config inheritance
js
const { HLTailwindConfig } = require('@platform-ui/highrise')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  ...HLTailwindConfig,
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}
ts
import { HLTailwindConfig } from '@platform-ui/highrise'
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  ...HLTailwindConfig,
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}
Add required Tailwind directives in your main CSS file: ​
src/index.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom styles below */

6. Setting up PostCSS config ​

Create a file named postcss.config.js in the root of your app and add the below content. Replace <appNamePlaceholder> with the name of your app. The same name has to be included in the namespace prop in the next step.

js
const tailwindWrapper = require('@ghl-plugins/tailwind-prefix-wrapper')

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer'), tailwindWrapper({ prefix: '.<appNamePlaceholder>' })],
}
ts
import autoprefixer from 'autoprefixer'
import tailwindWrapper from '@ghl-plugins/tailwind-prefix-wrapper'
import tailwindcss from 'tailwindcss'

export default {
  plugins: [tailwindcss(), autoprefixer(), tailwindWrapper({ prefix: '.<appNamePlaceholder>' })],
}

7. Working on your first screen ​

  • Setup your new module-federated application using the boilerplate provided here.

    WARNING

    Use HLContentWrap only for the root page component. Nesting HLContentWrap will cause unexpected behaviour.

  • Add HLContentWrap and stylesheet imports to App.vue and main.ts respectively for standalone / iframe apps.
  • Make sure to import your main css file in every page of your module-federated application.
src/pages/MyNewPage.vue
html
<script lang="ts" setup>
  import { HLContentWrap } from '@platform-ui/highrise'
  import '@platform-ui/highrise/style.css'
  import '@/index.css' // Add your main css file here
</script>

<template>
  <HLContentWrap namespace="<appNamePlaceholder>">
    hello world!
    <!-- other SFCs -->
  </HLContentWrap>
</template>