@webspire/cli

Add Webspire snippets, patterns, canvas effects, templates, and motion recipes to your Tailwind v4 project. 3-layer token system for brand customization.

Install

npx @webspire/cli init

Commands

Initialize

webspire init                           # Create webspire.json + CSS directory
webspire init --tokens                  # Generate webspire token + component CSS
webspire init --css-dir ./src/css       # Custom CSS directory

Add Content

webspire add glass/frosted              # CSS snippet by full ID
webspire add frosted                    # By name (auto-resolves)
webspire add animations/fade-in         # Animation snippet
webspire add hero/split                 # UI pattern
webspire add hero/developer             # Developer tool hero with install block

On first add, webspire-tokens.css is automatically created if it doesn't exist. If a snippet declares dependencies, webspire add installs them automatically.

Browse Content

webspire list                           # List snippets by category
webspire list -c glass                  # Filter by category
webspire list --patterns                # List UI patterns
webspire list --patterns -f hero        # Filter by family
webspire list --json                    # JSON output

Content

| Type | Count | Description | |------|-------|-------------| | CSS Snippets | 144 | Effects across 12 categories: glass, animations, scroll, decorative, interactions, text, and more | | UI Patterns | 519+ | Token-based page sections and elements across 170+ families | | Canvas Effects | 3 | Dynamic JS visuals with mountCanvas runtime | | Page Templates | 42 | Complete standalone pages (SaaS, agency, portfolio, shop, company) | | Motion Recipes | 3 | Framework-agnostic animation patterns using GSAP and Motion One |

The CLI always fetches the current registry when run, so you get newly added patterns and snippets without updating the package.

Token System

Patterns use a 3-layer token architecture:

Your Tokens → WebSpire Alias Tokens → Component Tokens → Markup

Setup

webspire init --tokens
# Creates ./src/styles/webspire/webspire-tokens.css
# Creates ./src/styles/webspire/webspire-components.css

Customize

/* Override alias tokens — every Webspire pattern adapts */
:root {
  --ws-color-primary: #2563eb;
  --ws-color-primary-hover: #1d4ed8;
  --ws-color-surface: #fafaf9;
}

/* Override a single component */
.ws-cta {
  --ws-cta-action-bg: #dc2626;
}

How It Works

1. webspire init creates config + CSS directory
2. webspire init --tokens generates token CSS files
3. webspire add <id> fetches from the registry and writes a standalone file
4. Import the CSS files — no build plugin needed
5. Override --ws-color-* tokens to match your brand

Docs & visual configurator: https://webspire.de/tokens