Type-safe Composable CSS

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

styleframe.config.ts

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

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

const spacing = variable('spacing', '1rem');
const { colorPrimary } = useColor(s, {
    primary: '#318fa0',
});

selector('.button', {
    backgroundColor: ref(colorPrimary),
    padding: ref(spacing),
});

export default s;

Built for Excellent Developer Experience

Type-safe CSS API

All styles are validated at compile time, eliminating typos and runtime errors.

Easily Composable

Compose and reuse styles using functions, variables, arrays, or objects. Mix and match easily.

Built-in Theming Support

Easily create and manage light and dark themes for your design system.

Framework Agnostic

Works with any frontend stack (React, Vue, Solid, Svelte, Astro) and integrates seamlessly with Vite.

Fully Configurable

Build themes using composables, variables, selectors, variants, and utilities naturally.

Intuitive Developer Experience

Get auto-complete, in-editor documentation, and powerful static analysis for your CSS.

Zero-Runtime by Default, Dynamic When You Need It

Styleframe generates CSS at build time for maximum performance. When you need prop-based styling, an optional runtime handles Recipes.

Static Generation

CSS is generated at build time, resulting in zero runtime overhead for your base styles.

Dual Output

The transpiler outputs both CSS and TypeScript. Configure output on a per-token basis to control exactly what gets generated.

Optional Runtime

Need prop-based class generation? Use Recipes for dynamic component variants without sacrificing the static benefits.

Output

/* Static CSS generated at build time */
.button {
    background-color: var(--color-primary);
    padding: var(--spacing);
}

/* Optional runtime generated for Recipes */
export const button = recipe('button', {
    background: "primary",
}, {
    size: {
        sm: { padding: 'sm' },
        md: { padding: 'md' },
        lg: { padding: 'lg' }
    }
});

Compose Design Systems in Minutes

Use styleframe's native composability to construct your Design System out of existing parts. Plug and play composables, variables, selectors, variants, and utilities.

Infinitely Customizable

Make your Design System your own. Use the default theme as a starting point and customize it to fit your needs.

Mix and Match Composables

Colors from one theme, typography from another. Styleframe lets you combine different themes seamlessly.

Explore the default theme

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useColor } from '@styleframe/theme';
import { useSpacing, useTypography } from '@orgname/theme-minimal';
import { useComponents } from './my-components';

const s = styleframe();

// Colors from the default theme
const { colorPrimary, colorSecondary } = useColor(s, {
    primary: '#318fa0',
    secondary: '#ff6b6b'
});

// Typography and spacing from another theme
useTypography(s);
useSpacing(s);

// Plus your custom components
useComponents(s);

export default s;

Dark and Light Themes

Easily create and manage themes for your design system using styleframe's native theming capabilities.

Intuitive API

Writing CSS for different themes is as easy as defining a variable. No need to remember complex syntax or class names.

Mix and Match Themes

Colors from one theme, typography from another. Styleframe lets you combine different themes seamlessly.

Learn about themes

styleframe.config.ts

import { merge } from 'styleframe';

import lightTheme from './light.theme';
import darkTheme from './dark.theme';

export default merge(lightTheme, darkTheme);

light.theme.ts

import { styleframe } from 'styleframe';

const s = styleframe();
const { variable } = s;

export const colorPrimary = variable('color-primary', '#007bff');

export default s;

dark.theme.ts

import { styleframe } from 'styleframe';
import { colorPrimary } from './light.theme';

const s = styleframe();
const { theme } = s;

theme('dark', ({ variable }) => {
    variable(colorPrimary, '#0056b3');
});

export default s;

Coming Soon

AI that Writes Type-safe Composable CSS

Use styleframe for Agents. Choose from a variety of AI agents and start delegating work, from code generation to other technical tasks.

Styleframe MCP

Connect styleframe to your favorite tools including Cursor, Claude, ChatGPT, and more.

Useful AI natively built in

Styleframe uses the latest language models to power AI workflows that build your Design System for you.

Now Available

Build faster with styleframe Pro.

A collection of premium design system themes, composables, component styles, and utils built on top of styleframe.

Learn more See pricing plans

Fluid Responsive Design - styleframe Pro

Typography that flows naturally across every screen size

Say goodbye to cluttered breakpoint logic. Styleframe's fluid responsive design automatically scales your typography and spacing using mathematical precision.

Step 1

Define your minimum scale for mobile viewports

Step 2

Set your maximum scale for desktop displays

Step 3

Watch as everything scales fluidly in between

Interactive Controls

992px Tablet

320px1440px

MobileTabletLaptopDesktop