Migrate your Stitches codebase to Stoop

Stoop is similar to Stitches but with some key differences:

• Stoop uses CSS variables for theme tokens (no runtime theme injection)
• Stoop supports 13 approved theme scales (same as Stitches)
• Stoop has built-in multi-theme support via Provider
• Stoop uses $ prefix for theme tokens (same as Stitches)

1. Install Stoop

npm install stoop
Copy

2. Update Imports

// Before (Stitches)
import { styled, css } from "@stitches/react";

// After (Stoop)
import { styled, css } from "./theme";
Copy

3. Update Theme Configuration

// Before (Stitches)
const { styled, css } = createStitches({
  theme: { ... },
});

// After (Stoop)
const { styled, css } = createStoop({
  theme: { ... },
  themes: {
    light: lightTheme,
    dark: darkTheme,
  },
});
Copy

4. Update Component Usage

Component API is mostly the same:

// Works the same in both
const Button = styled("button", {
  padding: "$medium",
  variants: {
    size: {
      small: { padding: "$small" },
    },
  },
});
Copy

• Theme tokens resolve to CSS variables instead of runtime values
• Multi-theme requires Provider wrapper
• Some utility functions may differ

• Installation Guide - Get started with Stoop
• Theme Setup - Configure your theme
• Creating Components - Learn how to create styled components
• Comparison: Stitches vs Stoop - Detailed feature comparison