Quickstart
Get Catnip running in 5 minutes.
1. Install
npm (bundler or local static server)
Install @signicat/catnip-components and @signicat/catnip-css together — components need the CSS package for design tokens and base styles.
bash
npm install @signicat/catnip-components @signicat/catnip-cssCDN (no npm, no bundler)
Load the standalone bundle and CSS from Signicat’s CDN:
html
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/default.css">
<link rel="stylesheet" href="https://static.signicat.com/catnip/icons/latest/catnip-icons.min.css">
<link rel="stylesheet" href="https://static.signicat.com/catnip/css/latest/styles.css">
<link rel="stylesheet" href="https://static.signicat.com/catnip/components/latest/foucPrevention.min.css">
<script src="https://static.signicat.com/catnip/components/latest/catnip-components.standalone.js" defer></script>
<catnip-button>Click me</catnip-button>URL patterns, optional CSS, assets, and configuration are in Installation — CDN.
2. Import
Import only what you use. Components and CSS can be used independently.
Vanilla HTML (CDN)
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://static.signicat.com/catnip/components/latest/foucPrevention.min.css">
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/default.css">
<link rel="stylesheet" href="https://static.signicat.com/catnip/icons/latest/catnip-icons.min.css">
<link rel="stylesheet" href="https://static.signicat.com/catnip/css/latest/styles.css">
</head>
<body>
<catnip-button>Click me</catnip-button>
<catnip-spinner size="48" type="default"></catnip-spinner>
<script src="https://static.signicat.com/catnip/components/latest/catnip-components.standalone.js" defer></script>
</body>
</html>Vanilla HTML (npm)
html
<!DOCTYPE html>
<html>
<head>
<!-- Import CSS only if you need styles/utilities -->
<link rel="stylesheet" href="node_modules/@signicat/catnip-css/dist/styles.css" />
<script type="module" src="node_modules/@signicat/catnip-components/dist/catnip-components.es.js"></script>
</head>
<body>
<catnip-button>Click me</catnip-button>
<catnip-spinner size="48" type="default"></catnip-spinner>
</body>
</html>Vue 3
vue
<script setup>
// Import components (registers web components)
import "@signicat/catnip-components";
// Import CSS only if you need styles/utilities
import "@signicat/catnip-css";
</script>
<template>
<catnip-button>Save</catnip-button>
<catnip-icon name="user" size="24" />
</template>Bundler (Vite, webpack, etc.)
js
// Components
import "@signicat/catnip-components";
// CSS — only if you need it
import "@signicat/catnip-css";3. Use Components
html
<catnip-button appearance="primary">Primary</catnip-button>
<catnip-button appearance="secondary">Secondary</catnip-button>
<catnip-icon name="tick" size="32" />Next Steps
- Installation — CDN — URL patterns, assets, configuration
- Components — Explore all components
- Design tokens — CSS variables and JS exports
- Theming — Add dark mode