Quickstart

Five steps from an empty React app to a themed screen and a working agent loop. Slipstream ships 109 components; this page wires one, then shows where the rest live.

1. Check the requirements

• Node.js 20.9 or newer, and pnpm 8 or newer (npm and yarn also work).
• React 18 or 19.
• Tailwind CSS 3.4 or 4.x, or the prebuilt stylesheets when the app does not run Tailwind.
• TypeScript is recommended; every package ships types.

2. Install

The CLI is the shortest path: it detects Next.js or Vite, writes slipstream.config.json, creates the component directory, and injects the theme variables.

npx @slipstream-ui/cli@latest init

Prefer package imports or want to copy source into your repository? Both paths are supported and can coexist:

# Package imports
pnpm add @slipstream-ui/core @slipstream-ui/ai @slipstream-ui/themes

# Copy one component's source into your own tree
npx @slipstream-ui/cli@latest add message

# Or use the shadcn-compatible registry
npx shadcn@latest add https://slipstreamui.com/registry/message.json

Use package imports for a quick client-side integration. Use registry or CLI copies when the host renders server components or needs editable source. The installation guide has the full comparison, including the server-component boundary behavior.

3. Add the theme

Tailwind 3 users can use the published preset; Tailwind 4 users import the CSS-first theme contract. Both map the same semantic tokens, and both support a custom createTheme().

// tailwind.config.js - Tailwind 3
module.exports = {
  presets: [require('@slipstream-ui/themes/tailwind-preset')],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@slipstream-ui/**/*.{js,ts,tsx}',
  ],
};

/* Tailwind 4 */
@import "tailwindcss";
@import "@slipstream-ui/themes/tailwind-v4.css";

@source "../../node_modules/@slipstream-ui/core/dist";
@source "../../node_modules/@slipstream-ui/ai/dist";

Not running Tailwind? Import the prebuilt sheets instead:

import '@slipstream-ui/themes/styles.css';
import '@slipstream-ui/core/styles.css';

To brand the components, pass your colors to createTheme() and emit the CSS variables once. The theming guide covers presets, dark mode, and radius.

4. Compose a screen

Start with a page structure: a Section owns the band, a Hero owns the headline, and Card plus Button handle the content. No providers or global state are required.

import { Button, Card, CardContent, Hero, Section } from '@slipstream-ui/core';

export function Home() {
  return (
    <Section tone="inverse" padding="lg">
      <Hero
        badge="Now booking"
        title="Find your next dance"
        description="Competitions, socials, and studios across Utah."
        actions={<Button>Browse events</Button>}
        media={<Card><CardContent>Season line-up</CardContent></Card>}
      />
    </Section>
  );
}

Need a different shape? Hero has split, centered, stacked, and overlay layouts; see the Hero page for live previews. Every component page follows the same Preview / Code / Usage / Types structure.

5. Verify, then connect your agent

Run your normal checks first: typecheck, lint, and a production build. Then give your coding agent the same source of truth:

pnpm add -D @slipstream-ui/mcp-server

# .mcp.json (Claude Code) or your client's MCP settings
{
  "mcpServers": {
    "slipstream-ui": {
      "command": "npx",
      "args": ["-y", "@slipstream-ui/mcp-server"]
    }
  }
}

The loop is search, read the manifest, write JSX, validate. The validator catches hallucinated props, invalid enum values, and missing required props before the diff reaches your editor.

search_components("chat input")
  -> Conversation, PromptInput, Response

get_component_manifest("prompt-input")
  -> exact props, defaults, required flags

validate_usage({
  componentId: "prompt-input",
  code: "<PromptInput onSubmit={send} isLoading={busy} onStop={stop} />"
})
  -> { valid: true, issues: [] }

Troubleshooting

Next