The fastest way to start is with the Prism CLI installer, which handles package installation and updates for you.
At a minimum, you’ll need to:
- Authenticate with the package registry
- Install Prism via the CLI
- Add our font (IBM Plex Sans)
1. Authenticate with the registry
Before using the CLI, make sure you’re logged in to the correct registry:
Using NPM (default):
npm login
Using GitHub Packages:
npm set "//npm.pkg.github.com/:_authToken=$GITHUB_TOKEN"
👉 You’ll need a GitHub PAT authorised for the EcoOnline organisation.
2. Install Prism CLI
Install the CLI globally (only once per machine):
npm install -g @ecoonline/prism
Install Prism packages
The CLI gives you full control over which packages you install:
# Interactive installation (recommended) prism install
# Install everything (tokens, components, icons) prism install --all
# Install only web components (example) prism install --components
Other useful commands:
- prism update → update all Prism packages to the latest version
- prism docs → open Prism documentation in your browser
- prism feedback → share feedback with the team
Repo: https://github.com/EcoOnline/prism
3. Add the Prism font
Prism uses IBM Plex Sans. The simplest way is via Google Fonts:
Embed code in the <head> of your html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
Embed code in the <head> of your html
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
Use pdt-font-family-sans token in stylesheets
body {
font-family: var(--pdt-font-family-sans); /* When using CSS Prism Design Tokens */
font-family: $pdt-font-family-sans; // When using SCSS Prism Design Tokens
font-family: @pdt-font-family-sans; // When using Less Prism Design Tokens
font-family: "IBM Plex Sans", system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; /* When not using Prism Design Tokens */
}
Self-hosting – download from Google Fonts and serve with your app for full control.
Verify your setup
- ✅ IBM Plex Sans is loading correctly
- ✅ Tokens are available in your styles
- ✅ Components and icons render without errors
Installing packages individually
If you don’t want to use the CLI, you can still install packages directly:
Framework wrappers
If you’re using a modern framework, we provide wrappers around Prism Web Components for better developer experience.
- React wrapper → Prism React
- Vue wrapper → Prism Vue
- Angular wrapper → Prism Angular
Support & Issues
Need help or want to report a problem?
- Contact Us
- If you find a bug or want a new feature, please raise an issue in the specific repository where the package lives:
- Components → Prism Web Components repo
- Icons → Prism Icons repo
- Tokens → Prism Design Tokens repo
- Framework wrappers → their respective repos
This helps us respond faster and track issues accurately.