Migration from Prime CSS to Catnip CSS
This guide helps you migrate from @signicat/prime-css (Prime CSS, also known as Catnip CSS in the legacy repo) to @signicat/catnip-css.
Overview
| Prime | Catnip | Notes |
|---|---|---|
@signicat/prime-css (npm) | @signicat/catnip-css | NPM package |
CDN: static.signicat.com/prime-assets/styles-latest.css | @signicat/catnip-css on CDN or npm | See Installation — CDN |
--colors-*, --fonts-*, --spacing-* | --catnip-color-*, --catnip-font-* (shipped); --catnip-space-* (planned) | Token naming |
| BEM component classes (btn, link, etc.) | catnip-* utility classes + Web Components | Different approach |
Migration Steps
1. Replace Dependencies
# Remove Prime CSS
npm uninstall @signicat/prime-css
# Add Catnip
npm install @signicat/catnip-css2. Update Imports
Before (Prime — CDN):
<link href="https://static.signicat.com/prime-assets/styles-latest.css" rel="stylesheet" crossorigin="anonymous" />Before (Prime — npm):
import "@signicat/prime-css";After (Catnip):
@import "@signicat/catnip-css";Or in JS/TS:
import "@signicat/catnip-css";After (Catnip — CDN):
<link rel="stylesheet" href="https://static.signicat.com/catnip/css/latest/styles.css" />See Installation — CDN for EndUI, dark theme, and optional modules.
3. Backwards Compatibility (Prime Class Names)
Prime used utility classes without a prefix (e.g. .m-m, .headline-1-font). Catnip uses the catnip- prefix. If you have many Prime classes, you can:
- Replace gradually — Map each Prime class to its Catnip equivalent (see tables below).
- Use a compatibility layer — Some builds may offer Prime-compatible class names; check with your team or the Catnip maintainers.
Prime classes you will need to update include:
- Typography:
.headline-1-font….headline-5-font,.paragraph1-regular-font….paragraph5-bold-font→ Catnip type scale (.catnip-font-display-*,.catnip-font-heading-*,.catnip-font-paragraph-*,.catnip-font-text-*, …) or keep Prime names via the optional backwards-compatibility layer (mapped to the new tokens). - Spacing:
.m-3xs….m-4xl,.p-s,.m-t-m,.m-x-l→.catnip-m-*,.catnip-p-* - Shadows:
.shadow--small-element,.shadow--card,.shadow--popup-modal→.catnip-shadow--small-element,.catnip-shadow--card,.catnip-shadow--popup-modal
4. Map CSS Variables
| Prime | Catnip |
|---|---|
--colors-grey-950 | --catnip-color-grey-950 |
--colors-purple-600 | --catnip-color-purple-600 |
--fonts-size-headline-1 | Prefer --catnip-font-display-l (or related heading/text preset); Prime font-size vars are not 1:1 with the new scale |
--spacing-m | var(--catnip-space-5) when spacing tokens ship (utility .catnip-m-m today; variable undefined until then) |
--headline-1-font | --catnip-font-display-l (compat layer still exposes --headline-1-font as an alias) |
Prime uses --colors-*, --fonts-*, --spacing-*. Catnip ships --catnip-color-* and responsive --catnip-font-* presets; --catnip-space-* is planned. See Design tokens, Typography tokens, and Spacing tokens.
5. Map Utility Classes
| Prime | Catnip |
|---|---|
.m-m, .m-s, .p-l | .catnip-m-m, .catnip-m-s, .catnip-p-l |
.headline-1-font | .catnip-font-display-l (or keep .headline-1-font with compat layer) |
.paragraph2-regular-font | .catnip-font-paragraph-m |
.color-primary-600 | Use var(--catnip-color-purple-600) or token |
.bg-primary-600 | Use var(--catnip-color-purple-600) or token |
.shadow--card | .catnip-shadow--card |
.shadow--small-element | .catnip-shadow--small-element |
.shadow--input-focus | .catnip-shadow--input-focus |
See Functional Classes for the full list.
6. Map Typography Classes
| Prime | Catnip (type scale) |
|---|---|
.headline-1-font | .catnip-font-display-l |
.headline-2-font | .catnip-font-display-m |
.headline-3-font | .catnip-font-heading-xl |
.headline-4-font | .catnip-font-heading-l |
.headline-5-font | .catnip-font-heading-s |
.paragraph1-regular-font … | .catnip-font-paragraph-l (+ font-weight for medium/bold) |
.paragraph2-regular-font … | .catnip-font-paragraph-m (+ font-weight) |
.paragraph3-regular-font … | .catnip-font-paragraph-s (+ font-weight) |
.paragraph4-regular-font … | .catnip-font-text-m (+ font-weight) |
.paragraph5-regular-font … | .catnip-font-text-s (+ font-weight) |
The backwards-compatibility layer keeps Prime class names but points them at these tokens (with font-weight overrides where needed).
7. Component Classes
Prime uses BEM-style component classes (e.g. .btn, .btn--primary, .link, .prime-table). Catnip does not ship equivalent BEM components — it provides:
- Web Components for UI (button, icon, etc.) — see Components
- Utility classes for typography, spacing, shadows
- Design tokens for custom styling
Replace Prime component markup with Catnip Web Components where available, or build custom components using Catnip tokens and utilities.
8. Grid
Prime uses Bootstrap grid (bootstrap-grid.min.css). Catnip has an optional grid module:
@import "@signicat/catnip-css/grid";See Grid.
9. Icons
Prime loads Signicat icons from CDN (prime-assets/signicat-icons). Catnip uses @signicat/catnip-icons:
npm install @signicat/catnip-icons@import "@signicat/catnip-icons";Use .catnip-icon--{iconName} instead of icon--signicat-{iconName}. See Icons and Migration from Prime Assets.
Catnip's default icon sizing is scoped to .catnip-icon--{iconName} classes. Make sure every font icon has its icon class; plain <i> elements remain ordinary text and inherit the surrounding typography.
10. Fonts
Prime loads Inter from its assets. Catnip includes Inter via @signicat/catnip-css and @signicat/catnip-assets. No change needed if you use the default stack.
Need Help?
- CSS Overview — Catnip CSS docs
- Functional Classes — utility class reference
- Design tokens — token reference
- Grid — grid system