Getting Started

What is Webspire?

Webspire is a library of copy-paste UI patterns built with Tailwind CSS. No npm install, no dependencies, no lock-in. Browse, copy the HTML, paste it into your project, and customize.

• 666 patterns across 187 families (hero, pricing, navbar, kanban, timeline, ...)
• 179 CSS snippets for effects Tailwind can't do (glass, animations, hover effects)
• 48 full-page templates ready to use
• MCP tools so AI coding assistants can find and compose patterns for you

Important Expectations

Webspire is a moving registry, not a frozen standard library.

• Not every pattern or snippet is fully optimized yet.
• The collection is under continuous revision: code, taxonomy, metadata, composition logic, and recommendations can change over time.
• The only reliable answer is the one you get at the moment you make the request.
• This is intentional. The system is designed to improve continuously instead of pretending the current state is final.

The stable principle is different: the output should remain dependency-free. AI and MCP help with retrieval, ranking, and composition, but they should hand you code you can own directly instead of forcing you into a runtime or component package.

Start in 30 Seconds

If you’re new, follow this order:

1. Pick your domain, tone, and UX goals
2. Choose a page structure before styling details
3. Pull the matching patterns and snippets
4. Only then refine color, spacing, typography, and prompts

This sounds obvious, but most weak results come from reversing that order and styling before the page logic is clear.

Three Ways to Use Webspire

1. Browse & Copy

The simplest approach. Go to Patterns or Snippets, find what you need, and copy the HTML.

<!-- Copy this hero section into your project -->
<section class="relative overflow-hidden bg-slate-950 text-slate-100">
  <div class="mx-auto max-w-7xl px-6 py-20 lg:py-28">
    <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
      Your headline here.
    </h1>
    <p class="mt-5 max-w-xl text-lg text-slate-300">
      Your supporting text here.
    </p>
  </div>
</section>

Every pattern is pure HTML + Tailwind. You own the code.

2. Use the CLI

Install the CLI globally:

npm install -g @webspire/cli

Then add patterns directly:

webspire list                    # See all available patterns
webspire add hero/base           # Copy hero pattern to your project
webspire add pricing/compare     # Copy pricing comparison table

3. Let AI Compose Pages

If you use an AI coding tool (Claude Code, Cursor, Codex), install the MCP server:

npm install -g @webspire/mcp

Then ask your AI:

Build me a landing page for a SaaS product. Modern tone, explain the offer, drive signups.

The AI uses compose_page to select and order the right patterns for your context, and can now also suggest matching snippets for the final polish layer.

Good vs. Bad Starting Point

Weak start

Make me a modern landing page.

Why it fails:

• No audience
• No UX goal
• No page structure
• No constraint on tone or complexity

Strong start

Build a landing page for a SaaS workflow tool.
Tone: modern, clear, slightly technical.
UX goals: `explain_offer`, `drive_signup`, `reduce_friction`.

Use only canonical taxonomy values in MCP calls. If you're unsure about the exact spelling of a domain, tone, UX goal, or content need, check [Domains & Tones Reference](/guides/semantics/domains-and-tones) and [Composing Pages](/guides/semantics/composing-pages).
Sections: hero, features, integrations, testimonials, pricing, faq, cta.
Use Webspire patterns where possible and keep the result Tailwind-only.

Why it works:

• It gives the AI a business context
• It makes the conversion goal explicit
• It constrains the section order
• It points the output back to actual Webspire assets

Recommended Learning Path

Start with these guides in order:

1. Finding the Right Patterns — How to pick patterns for your industry and tone
2. Composing Pages — How to structure a page from hero to footer
3. Design Brief Template — How to brief AI tools for consistent results
4. Component Generation — How to prompt AI for production-ready components

Go deeper

• Styling: Color Harmony · Dark Mode · Type Scales
• Design Systems: Apple HIG · Material Design
• AI Power Users: Claude Code Skills · Style Transfer

Quick Reference

• A hero section → Patterns: Hero
• A pricing table → Patterns: Pricing
• A glass card effect → Snippets: Glass
• A fade-in animation → Snippets: Animations
• A complete SaaS page → Templates
• Patterns for my industry → Domains & Tones Reference
• How to structure a page → Composing Pages

Common Mistakes

• Choosing sections by visual taste instead of user intent
• Mixing tones like serious and playful on the same page
• Asking AI for “premium” without defining audience, offer, and CTA
• Starting with color effects before the headline and page flow are clear
• Copying many patterns without checking if they support the same conversion path