Zum Inhalt springen

Curated UI Registry for Tailwind v4

148 CSS snippets, 628+ UI patterns, 42 page templates — copy-paste ready, no framework dependency, AI-native via MCP. Only what Tailwind cannot do natively.

148 CSS Snippets 628+ UI Patterns 42 Page Templates Tailwind v4 MCP-native AI-first Copy-Paste No Lock-in MIT License Open Source

The Project

Webspire

Open Source · MIT

A curated registry of high-quality CSS effects and UI components, designed for Tailwind v4. No runtime dependencies, no framework lock-in — every snippet works standalone. For developers who need production-ready UI fast, and for AI agents that access the registry directly via MCP.

  • Tailwind v4 — complement, not replacement
  • Every snippet under 50 lines, standalone
  • Semantic system: domain, tone, UX goal
  • MCP server for AI agents (Claude, Cursor etc.)
  • prefers-reduced-motion + dark mode everywhere
  • MIT licensed, commercially usable
webspire.de github.com/casoon/webspire

What the Registry Contains

Five content types, designed to complement each other — from individual CSS effects to complete page templates.

148
CSS Snippets
628+
UI Patterns
42
Page Templates
3
Canvas Effects
25
Font Recommendations

CSS Snippets

148 effects in 12 categories

Visual effects Tailwind doesn't offer natively. Every snippet is standalone, under 50 lines, and equipped with configurable CSS custom properties.

glassanimationsscrolleasinginteractionstextlightingdepthmaskssurfacesdecorativeatmosphere

UI Patterns

628+ sections in 186 families

Complete page sections with a 3-layer token system. Semantically annotated by domain, tone and UX goal — for precise search and AI composition.

heronavbarpricingfeaturesdashboarde-commerceaiteamtestimonialscontactfooterbento

Page Templates

42 ready-to-use pages

Complete, production-ready HTML pages for SaaS, agency, portfolio, shop and company — with Tailwind CDN, responsive, vanilla JS.

Canvas Effects

3 dynamic visuals

Particle Fields, Proximity Dots, Gradient Orbs — with mountCanvas runtime, HiDPI support and ResizeObserver.

Motion & Fonts

Recipes + 25 fonts

Framework-agnostic animation patterns (GSAP, Motion One) and semantic font recommendations by domain and tone.

CSS Snippets

Visual effects Tailwind cannot do natively — curated, documented, production-ready.

Why custom snippets alongside Tailwind?

Tailwind covers spacing, colors and layout exceptionally well. What it cannot do: complex filter effects, scroll animations, glassmorphism, backdrop-blur variants and specialised CSS timing curves. That's exactly the gap the snippet registry fills.

  • Standalone — every snippet works without importing others
  • Under 50 lines — manageable, adaptable, no overhead
  • CSS Custom Properties — configurable parameters without forking
  • Reduced Motion — all animations respect prefers-reduced-motion
  • Dark Mode — color-scheme-aware, no separate override needed
glass

Glassmorphism & backdrop filter

animations

Entrance animations, reveal, fade

easing

Timing functions & curves

scroll

Scroll effects & parallax

interactions

Hover, click, pointer feedback

text

Typography effects, glow, shimmer

lighting

Light & shadow effects

depth

Depth & perspective

masks

Masks & cutouts

decorative

Backgrounds & gradients

surfaces

Surfaces & textures

atmosphere

Mood overlays

UI Patterns

628+ sections for every page — semantically annotated, ready to drop in.

Semantic System

Patterns are not just organised by type — they are semantically annotated: domain (industry), tone and UX goal. So a search returns not just "hero", but the right hero for a law firm that needs a serious tone and wants to build trust.

  • Domain — legal, healthcare, saas, agency, education, ecommerce and more
  • Tone — serious, premium, modern, friendly, technical, playful
  • UX Goal — build_trust, drive_signup, explain_offer, showcase_work and more
  • compose_page — AI assembles complete pages from matching patterns

Pattern Families (Selection)

hero
navbar
pricing
features
dashboard
team
testimonials
contact
footer
e-commerce
ai
developer tools
bento
stats
timeline
accordion
about
enterprise saas

186+ families in total

AI-native via MCP

Webspire is built for AI agents — not as an afterthought, but as a core architecture decision.

Why MCP instead of REST?

MCP expects persistent connections — a stateless HTTP endpoint is architecturally wrong. The Webspire MCP server therefore runs as a local npm package via stdio, with the full registry bundled inside. Offline-capable, zero latency, no API costs.

Setup in 2 steps

Add to the .mcp.json of your AI client, done:

{
  "mcpServers": {
    "webspire": {
      "command": "npx",
      "args": ["-y", "@webspire/mcp"]
    }
  }
}

Works with Claude Code, Cursor, Cline and all MCP-compatible clients.

21 available tools

  • search_snippets / get_snippet
  • recommend_snippet
  • search_patterns / get_pattern
  • compose_page
  • search_templates / get_template
  • search_canvas_effects
  • search_motion_recipes
  • recommend_fonts
  • setup_tokens
  • recommend_token_mapping

How AI-assisted page composition works

1

Describe intent

"Professional landing page for a law firm with a contact form"

2

System normalises

domain: legal · tone: serious · ux_goal: build_trust, drive_contact

3

Page is assembled

Matching patterns, snippets and font stack — in the right order

3-Layer Token System

All patterns adapt automatically once your own design tokens are set.

Layer 1

Host Tokens

Your project's own design variables — colours, spacing, radii. Set once, applies everywhere.

--color-brand, --radius-card,
--font-heading ...

Layer 2

Alias Tokens

Generic Webspire variables pointing to host tokens. The bridge between your project and the registry.

--ws-color-primary,
--ws-font-heading,
--ws-radius-sm ...

Layer 3

Component Tokens

Component-specific overrides — for precise control without global changes.

--ws-hero-headline-color,
--ws-cta-action-bg,
--ws-navbar-bg ...

What the token system delivers

  • Set branding once — all patterns pick it up automatically
  • Override individual components via component tokens without affecting others
  • Dark mode without duplicate CSS — tokens switch, patterns respond
  • setup_tokens generates the token file via MCP automatically
  • recommend_token_mapping maps existing tokens to --ws-* variables
  • No rewrite required — integrates into existing design systems

Get Started

Add the MCP server or browse the website directly — both take under a minute.

MCP Server (recommended)

Add to your AI client's MCP config. No separate download, no build step.

npx -y @webspire/mcp

21 tools available: search, retrieval, page composition, token setup.

CLI

Retrieve snippets and patterns directly from the terminal and insert them into projects.

npx @webspire/cli init

For workflows without an AI client — or as a complementary tool in the development process.

Website

Browse the registry, preview components, copy directly

webspire.de

GitHub

Source code, issues, contributions — MIT licensed

github.com/casoon/webspire

npm

MCP server and CLI as npm packages

@webspire/mcp @webspire/cli

Using Webspire in a project?

Questions about integration, token mapping or custom pattern sets — just get in touch.

Get in touch