# Catnip

> Signicat’s framework-agnostic design system: `catnip-*` custom elements, design tokens, CSS, icons, and assets.

Docs hosts: [catnip.signicat.dev](https://catnip.signicat.dev) (current) · [catnip.qa.signicat.dev](https://catnip.qa.signicat.dev) · [catnip.signicat.com](https://catnip.signicat.com)

## Must-read

- [Agent skill](https://catnip.signicat.dev/skills/catnip/SKILL.md) (development) · [production](https://catnip.signicat.com/skills/catnip/SKILL.md): Portable playbook for coding agents using Catnip packages in a product app (components, CSS, tokens, icons, assets)
- [Component API](https://catnip.signicat.dev/components/component-api.html): Props, slots, events, test selectors, Vue leading-dot rules
- [Usage](https://catnip.signicat.dev/components/usage.html): Framework usage overview
- [Installation](https://catnip.signicat.dev/developer-guide/installation.html): npm and CDN
- Custom Elements Manifest: [docs host](https://catnip.signicat.dev/custom-elements.json) · `@signicat/catnip-components/custom-elements.json` (after install)
- HTML editor data: [docs host](https://catnip.signicat.dev/html-custom-data.json) · `@signicat/catnip-components/html-custom-data.json`

## Packages

| npm package | Docs |
| --- | --- |
| `@signicat/catnip-components` | [Components](https://catnip.signicat.dev/components/) · [Component API](https://catnip.signicat.dev/components/component-api.html) |
| `@signicat/catnip-components-react` | [React](https://catnip.signicat.dev/components/react.html) |
| `@signicat/catnip-css` | [CSS](https://catnip.signicat.dev/css/) |
| `@signicat/catnip-design-tokens` | [Tokens](https://catnip.signicat.dev/tokens/) · [Theming](https://catnip.signicat.dev/developer-guide/theming.html) |
| `@signicat/catnip-icons` | [Icons](https://catnip.signicat.dev/assets/icons/overview.html) |
| `@signicat/catnip-assets` | [Assets](https://catnip.signicat.dev/assets/) |

## Topics

- [Agent skill (install)](https://catnip.signicat.dev/developer-guide/agent-skill.html) · [production](https://catnip.signicat.com/developer-guide/agent-skill.html)
- [Using props](https://catnip.signicat.dev/components/using-props.html)
- [Using slots](https://catnip.signicat.dev/components/using-slots.html)
- [Using events](https://catnip.signicat.dev/components/using-events.html)
- [React](https://catnip.signicat.dev/components/react.html)
- [Configuration](https://catnip.signicat.dev/components/configuration.html)

## Component catalogue

Per-component overview / specs / guidelines, for example:

- [Button — overview](https://catnip.signicat.dev/components/button/overview.html) · [specs](https://catnip.signicat.dev/components/button/specs.html)
- [Input — overview](https://catnip.signicat.dev/components/input/overview.html) · [specs](https://catnip.signicat.dev/components/input/specs.html)
- [Dialog — overview](https://catnip.signicat.dev/components/dialog/overview.html) · [specs](https://catnip.signicat.dev/components/dialog/specs.html)
- [Split button — overview](https://catnip.signicat.dev/components/split-button/overview.html) · [specs](https://catnip.signicat.dev/components/split-button/specs.html)
- [Table — overview](https://catnip.signicat.dev/components/table/overview.html) · [specs](https://catnip.signicat.dev/components/table/specs.html)

Browse the full catalogue from [Components](https://catnip.signicat.dev/components/).