Components

Catnip components are Web Components (Custom Elements) that work in any framework — Vue, React, Angular, or plain HTML and JavaScript. Design tokens are available as CSS variables and JavaScript objects. You can import only the packages you need.

Install

npm install @signicat/catnip-components @signicat/catnip-css

Import both — components need @signicat/catnip-css for --catnip-* tokens and base styles. See Installation.

CDN (no npm)

For plain HTML without a bundler, load the standalone bundle — see Installation — CDN.

<script src="https://static.signicat.com/catnip/components/latest/catnip-components.standalone.js" defer></script>

Import

import "@signicat/catnip-components";

Import once at your app's entry point. Components register as custom elements on the global window, so they are available across the entire document—including in micro-frontends. You do not need to import in each child app.

Usage

How to bind props, use slots, listen for events, and wire test selectors in Vue, React, Angular, or vanilla JS — plus links to deeper guides — lives on Usage.

For React specifically, the supported path is @signicat/catnip-components-react — see React (one page for install, wrappers, and links to the same catalogue docs as other frameworks).

For CatnipConfig, internationalization, package entry points, and test attributes, see Configuration.

Live examples

These are the same Web Components you get after import "@signicat/catnip-components" (this site loads them in the docs theme).