Type-safe, Composable CSS in TypeScript

From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API — AI-ready by design.

Homepage · Documentation

• 🛡️ Type-safe CSS API - Catch style bugs at compile time with full TypeScript support
• 🧩 Composable & Modular - Build design systems from reusable, composable functions
• 🎨 Built-in Theming - Create light/dark modes and custom themes effortlessly
• ⚡ Framework Agnostic - Works with React, Vue, Svelte, Solid, Astro, and more
• 🔥 First-class DX - IDE auto-complete, in-editor docs, and static analysis

# npm
npx styleframe init && npm install

# pnpm
pnpx styleframe init && pnpm install

# yarn
yarn styleframe init && yarn install

# bun
bunx styleframe init && bun install

Using the CLI command above, it will:

• Install styleframe as a development dependency to your project
• Add the styleframe plugin to Vite, if possible
• Create a new styleframe.config.ts file

import { styleframe } from "styleframe";

const s = styleframe();
const { variable, ref, selector, theme } = s;

// Define design tokens
const colorPrimary = variable("color--primary", "#006cff");
const spacing = variable("spacing--md", "1rem");

// Create styles
selector(".button", {
    backgroundColor: ref(colorPrimary),
    padding: ref(spacing),
    borderRadius: "4px",
    color: "white",

    "&:hover": {
        opacity: 0.9,
    },
});

// Add dark theme
theme("dark", (ctx) => {
    ctx.variable(colorPrimary, "#60a5fa");
});

export default s;

Styleframe is extremely powerful and flexible. The code preview above is just a small example of what you can achieve with styleframe.

Read the full documentation at https://styleframe.dev.

After over 10 years of working on Design Systems for successful companies, we've learned a lot about what makes a great Design System. Styleframe is built on these learnings and is designed to help you easily build your own.

Read more about styleframe's philosophy and design principles.

Styleframe works seamlessly with any framework:

• Vite - Native plugin support
• React - Perfect for component libraries
• Vue - Full SFC compatibility
• Svelte - Works out of the box
• Astro - Static site ready
• Solid - Reactive styling

See the installation guide for framework-specific setup.

• Getting Started - Learn the basics
• API Reference - Complete API documentation
• Guides - Step-by-step tutorials
• Examples - Real-world examples

• Discord - Chat with the community
• GitHub Issues - Report bugs or request features
• Discussions - Ask questions and share ideas

# Clone the repository
git clone https://github.com/styleframe-dev/styleframe.git

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build
pnpm build

Styleframe is MIT licensed.

Looking for advanced features? Check out Styleframe Pro for:

• Premium composables and design tokens
• Advanced theming capabilities
• Priority support
• Commercial licenses