A lightweight, type-safe CSS-in-JS library for React with CSS variables, built-in multi-theme support, and perfect Next.js integration.

Stoop is a CSS-in-JS library—a TypeScript-first approach to styling that provides type-safe CSS objects with full type inference. Similar to Stitches and Vanilla Extract, Stoop focuses on type safety and developer experience.

Stoop is a minimalist implementation of Stitches' high-level features. It provides a similar API for styled, css, and variants, but omits several Stitches features.

What's missing compared to Stitches:

• Compound variants
• Some of Stitches' built-in utility functions (Stoop has a flexible utility system but fewer built-ins)
• Additional Stitches APIs

Note: Both Stitches and Stoop generate CSS at runtime. We're exploring build-time extraction in future releases. For immediate build-time needs, consider Vanilla Extract or Panda CSS.

• Type-safe theming with TypeScript inference
• CSS variables for theme tokens
• Variant system for component variations
• Utility functions for custom CSS transformations
• Multiple themes with createTheme()
• SSR support via getCssText()
• React >=16.8.0 required (Next.js Pages & App Router supported)
• Automatic prefix (stoop by default) for CSS class names and variables
• Zero runtime dependencies - only React peer dependency

npm install stoop
# or
bun add stoop
# or
yarn add stoop

// stoop.theme.ts
import { createStoop } from "stoop";

const stoop = createStoop({
  theme: {
    colors: {
      primary: "#0070f3",
      background: "#ffffff",
      text: "#000000",
    },
    space: {
      small: "8px",
      medium: "16px",
      large: "24px",
    },
  },
});

export const { styled, css, createTheme, globalCss, keyframes } = stoop;

// Usage
const Button = styled("button", {
  padding: "$medium",
  backgroundColor: "$primary",
  color: "$text",
  variants: {
    variant: {
      primary: { backgroundColor: "$primary" },
      secondary: { backgroundColor: "$background", border: "1px solid $primary" },
    },
  },
});

<Button variant="primary">Click me</Button>;

See the full documentation for complete setup instructions.

📚 Full Documentation →

• Installation
• Theme Setup
• Creating Components
• SSR Guide
• API Reference
• Migration from Stitches

For internal implementation details, see packages/stoop/ARCHITECTURE.md (developer-only).

Creates a Stoop instance. Returns: styled, css, createTheme, globalCss, keyframes, getCssText, warmCache, preloadTheme, theme, config. If themes config is provided, also returns Provider and useTheme.

See the API Reference for complete API documentation.

Use $ prefix for theme tokens. Shorthand $token uses property-aware resolution (preferred); explicit $scale.token specifies the scale.

{
  color: "$primary",           // Shorthand (preferred, property-aware)
  padding: "$medium",          // Property-aware → space scale
  fontSize: "$fontSizes.small", // Explicit scale
}

Tokens resolve to CSS variables (var(--colors-primary)), enabling instant theme switching without recompiling CSS.

Variants create component variations via props:

const Button = styled("button", {
  variants: {
    variant: {
      primary: { backgroundColor: "$primary" },
      secondary: { backgroundColor: "$secondary" },
    },
    size: {
      small: { padding: "$small" },
      large: { padding: "$large" },
    },
  },
});

<Button variant="primary" size="small" />;

Stoop provides a similar API for the features it implements. Key differences:

• CSS variables for theme tokens
• Simple theme system with createTheme()
• Full TypeScript inference

See the Migration Guide for migration examples.

CSS-in-JS Libraries:

• Stitches - Original library Stoop is based on (no longer maintained)
• Vanilla Extract - Zero-runtime CSS-in-JS
• styled-components - CSS-in-JS library
• Emotion - CSS-in-JS library
• Goober - Lightweight CSS-in-JS library
• JSS - Framework-agnostic CSS-in-JS
• Compiled - Compile-time CSS-in-JS
• Stylex - Facebook's build-time CSS-in-JS
• Panda CSS - CSS-in-JS with build-time generation
• Linaria - Zero-runtime CSS-in-JS
• Treat - Themeable CSS-in-JS

Variant Systems:

• CVA - Class Variance Authority for component variants
• clsx - Tiny utility for constructing className strings

Utility-First:

• Tailwind CSS - Utility-first CSS framework
• UnoCSS - Instant atomic CSS engine

Component Libraries:

• Radix UI - Unstyled, accessible component primitives
• Chakra UI - Component library built on Emotion
• Mantine - React components library with Emotion

This is a monorepo using Bun workspaces. The project structure:

stoop/
├── packages/
│   ├── stoop/          # Main library package
│   ├── stoop-ui/       # UI component library built with stoop
│   └── benchmarks/     # Performance benchmarks (Stoop vs Stitches)
├── apps/
│   ├── website/        # Website/documentation site (Next.js)
│   └── playground/     # Component playground (Vite)
└── scripts/            # Shared scripts

# Install all dependencies (for all workspaces)
bun install

# Build all packages
bun run build:all

# Build individual packages
bun run build              # Build stoop
bun run build:stoop-ui     # Build stoop-ui
bun run build:website      # Build website (includes all packages)

# Development servers
bun run dev                # Build all packages + start website dev server
bun run dev:playground     # Build all packages + start playground dev server

# Build commands
bun run build              # Build stoop package
bun run build:stoop-ui     # Build stoop-ui package
bun run build:all          # Build both stoop and stoop-ui packages
bun run build:website      # Build all packages + website

# Publishing
bun run publish            # Publish stoop package to npm
bun run publish:stoop-ui   # Publish stoop-ui package to npm

# Code quality
bun run lint               # Lint all packages
bun run format             # Format code
bun run tidy               # Run lint + format

# Testing
bun run test               # Run tests
bun run test:coverage      # Run tests with coverage
bun run test:watch         # Run tests in watch mode

# Benchmarks
bun run benchmark          # Run performance benchmarks (Stoop vs Stitches)

# Work in stoop package
cd packages/stoop
bun run build
bun run test

# Work in stoop-ui package
cd packages/stoop-ui
bun run build
bun run test

# Work in website app
cd apps/website
bun run dev
bun run build

# Work in playground app
cd apps/playground
bun run dev
bun run build

• packages/stoop - The main Stoop library

  • Build: bun run build
  • Test: bun run test
  • Publish: bun run publish

• packages/stoop-ui - UI component library built with stoop

  • Build: bun run build:stoop-ui
  • Test: bun run test (from package directory)
  • Publish: bun run publish:stoop-ui

• apps/website - Website and documentation site (Next.js)

  • Dev: bun run dev
  • Build: bun run build:website

• apps/playground - Component playground for testing stoop-ui (Vite)

  • Dev: bun run dev:playground
  • Build: bun run build (from app directory)

• packages/benchmarks - Performance benchmarks comparing Stoop vs Stitches

  • Run: bun run benchmark (from root)
  • Bundle analysis: bun run analyze:bundle (from package directory)

All apps use stoop and stoop-ui as workspace dependencies, so changes to the packages are automatically available in the apps after rebuilding.

Feel free to get in touch with feedback, advice or suggestions. See Conventional Commits for new contributors.

MIT © Jackson Dolman