Migration from EndUI to Catnip

Catnip replaces EndUI as Signicat's design system. This guide helps you migrate your applications from EndUI web components to Catnip.

Overview

EndUI	Catnip	Notes
@signicat/endui	@signicat/catnip-components	Both are Web Component libraries; Catnip uses catnip-* tags
@signicat/endui/style.css	@signicat/catnip-css	Base styles, utilities, grid
EndUI design tokens (CSS vars)	@signicat/catnip-design-tokens	--catnip-* variables + JS exports
@signicat/signicat-icons (via EndUI)	@signicat/catnip-icons	Icon webfont + SVG map

Before You Start

1. Audit your app for EndUI usage: search for end-ui-* tags and @signicat/endui imports
2. Install the Catnip packages you need
3. Plan a staged migration (page-by-page or component-by-component)

Component Mapping

EndUI exposes web components with end-ui-* tags. Catnip uses catnip-* tags. The table below maps each EndUI component to its Catnip equivalent.

EndUI Component	Catnip Equivalent	Status / Notes
end-ui-button	catnip-button	Replace directly; check variant values
end-ui-icon	catnip-icon	Replace directly; icon names may differ — see Icon
end-ui-spinner	catnip-spinner	Replace directly
end-ui-tooltip	catnip-tooltip	Replace directly; slot structure similar (anchor, content)

More components will be added in the future.

Migration Steps

1. Replace Dependencies

# Remove EndUI
npm uninstall @signicat/endui

# Add Catnip
npm install @signicat/catnip-components @signicat/catnip-css

2. Update Imports

Before (EndUI):

import "@signicat/endui";
import "@signicat/endui/style.css";

After (Catnip):

import "@signicat/catnip-components";
import "@signicat/catnip-css";

3. Replace Component Tags

Before (EndUI):

<end-ui-button variant="primary" size="large">Save</end-ui-button> <end-ui-icon icon-name="signicat-activity" size="24"></end-ui-icon>

After (Catnip):

<catnip-button appearance="primary" size="l">Save</catnip-button> <catnip-icon name="activity" size="24"></catnip-icon>

4. Map Props and Attributes

EndUI and Catnip use similar concepts but different attribute names:

EndUI	Catnip	Example
icon-name	name	catnip-icon name="check"
accessible-label	aria-label	aria-label="Submit"

Compare each component's docs: Icon, Button, Tooltip, Spinner.

5. Two-way state (Vue)

Both sides use update:modelValue, but v-model on a catnip-* host does not substitute for Vue SFC v-model — bind .modelValue (leading-dot DOM property) and @update:modelValue, or use the v-catnip-model directive when available (see Component API — Vue 3):

import { vueModelDirective } from "@signicat/catnip-components";
app.directive("catnip-model", vueModelDirective);

6. Update Design Tokens

Replace EndUI CSS variables with Catnip tokens:

/* Before (EndUI) */
color: var(--text-primary, #25292c);
padding: var(--spacing-m);

/* After (Catnip) — semantic color tokens */
color: var(--catnip-color-content-neutral-strongest);
/* Spacing: use catnip-css utilities or a fixed value until --catnip-space-* ships */
padding: 1rem;

See Design tokens and Color tokens. For layout spacing utilities, see Functional Classes.

7. Vite / Vue Config

Update custom element handling:

// Before
isCustomElement: (tag) => tag.startsWith("end-ui");

// After
isCustomElement: (tag) => tag.startsWith("catnip-");

8. Test Selectors (E2E)

EndUI supported test-selectors for E2E. Catnip has Component API — Test selectors (and Configuration — Test attributes) — update your selectors to match.

Quickstart After Migration

Once dependencies and imports are swapped:

• Quickstart — verify setup
• Theming — light/dark mode
• Components — full catalogue

Need Help?

• Components — Catnip component docs
• Configuration — i18n, test selectors, package variants
• Changelog Migration Guides — version-to-version upgrades within Catnip