Type-safe Composable CSS in TypeScript

From simple UI styles to full Design Systems, write code using Styleframe's powerful TypeScript CSS API.

Homepage · Documentation · Discord

---

Features

• Type-safe CSS API — All styles are validated at compile time. No typos, no runtime surprises.
• Composable architecture — Mix, match, and reuse style logic using functions, variables, and composables. Build your design system from ready-made parts.
• Zero-runtime by default — CSS is generated at build time for maximum performance. An optional lightweight runtime handles Recipes (component variants).
• Built-in theming — Create light, dark, and custom themes with a few lines of code using the data-theme attribute.
• Design token composables — 200+ utility and 50+ modifier composables from @styleframe/theme for colors, spacing, typography, breakpoints, and more.
• Framework agnostic — Works with React, Vue, Svelte, Solid, Astro, and any modern frontend stack.
• Figma sync — Free, bidirectional design token sync between code and Figma using the W3C DTCG format.

Quick Start

Use the CLI to initialize Styleframe in your project:

# pnpm
pnpx styleframe init
pnpm install

# npm
npx styleframe init
npm install

# yarn
yarn create styleframe
yarn install

# bun
bunx styleframe init
bun install

The CLI will:

• Install all styleframe packages as dependencies
• Create a styleframe.config.ts configuration file
• Create or update tsconfig.json with Styleframe includes
• Add the Styleframe plugin to Vite or Nuxt, if detected

Then import the generated CSS in your entry file:

// main.ts
import 'virtual:styleframe.css';

Usage

import { styleframe } from 'styleframe';
import { useColor } from '@styleframe/theme';

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

// Use design token composables
const { colorPrimary } = useColor(s, {
    primary: '#318fa0',
});

// Define custom tokens
const spacing = variable('spacing', '1rem');

// Create type-safe selectors
selector('.button', {
    backgroundColor: ref(colorPrimary),
    padding: ref(spacing),
    borderRadius: '4px',
    color: 'white',

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

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

export default s;

How It Works

Styleframe is a transpiler-first system. You define design tokens, selectors, utilities, and recipes in TypeScript. The transpiler generates dual outputs:

• CSS — Variables, selectors, utilities, themes, keyframes
• TypeScript — Typed recipe functions with full IDE autocomplete

This architecture gives you complete type safety, IDE auto-complete, and static analysis for your CSS — while producing zero-runtime overhead for base styles.

Integrations

Styleframe works with any modern frontend framework and build tool.

Build tools (via native plugin or unplugin):

Tool	Integration
Vite	Native plugin
Nuxt	Native module
Webpack	Via unplugin
Rollup	Via unplugin
esbuild	Via unplugin
Rspack	Via unplugin
Farm	Via unplugin
Astro	Via unplugin

Frameworks: React, Vue, Svelte, Solid, Astro — any framework that consumes CSS.

See the installation guide for setup instructions.

Figma Integration

Sync design tokens between your code and Figma — free, with no seat limits.

• Bidirectional sync — Export tokens from code to Figma, or import Figma Variables back to TypeScript
• Multi-mode support — Light, dark, and custom themes preserved as Figma modes
• W3C DTCG format — Compatible with Style Dictionary, Tokens Studio, and other DTCG tools
• CI/CD ready — Run styleframe figma export in your build pipeline to keep Figma in sync automatically

# Export design tokens to DTCG JSON
npx styleframe figma export \
    --config styleframe.config.ts \
    --output tokens.json \
    --collection "Design Tokens"

Learn more about the Figma plugin.

Documentation

• Introduction — What Styleframe is and how it works
• Installation — Setup guides for Vite, Nuxt, and custom builds
• API Reference — Variables, selectors, utilities, recipes, themes, and more
• Design Tokens — Colors, spacing, typography, borders, breakpoints
• Tooling — Figma plugin and utility scanner
• Guides — Build a design system in under 15 minutes

Community

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

Styleframe Pro

Looking for advanced features? Check out Styleframe Pro for:

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

Development

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

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build
pnpm build

License

Styleframe is MIT licensed.

---

_{Built with ❤️ by Styleframe}