Type-safe Composable CSS

Write type-safe, composable, future-proof Design Systems code using styleframe's powerful TypeScript CSS API.

Get started

Star on GitHub

styleframe.config.ts

import { stylefame } from 'stylefame';

const s = stylefame();
const { variable, ref, selector } = s;
const { colorBlue } = useColors(s);

const colorPrimary = variable('color-primary', ref(colorBlue));

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

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.

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 { stylefame } from 'stylefame';
import { useReset, useBorder, useBorderRadius, useBoxShadow, useColors, useGrid, useScale, useSpacing, useTypography } from '@stylefame/theme-default';

const s = stylefame();

useReset(s);
useBorder(s);
useBorderRadius(s);
useBoxShadow(s);
useColors(s);
useGrid(s);
useScale(s);
useSpacing(s);
useTypography(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.

Explore the default theme

styleframe.config.ts

import { stylefame } from 'stylefame';

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

const cardBackground = variable('card--background', '#ffffff');

selector('.card', {
    background: ref(cardBackground),
});

theme('dark', ({ variable }) => {
    variable(cardBackground, '#18181b');
});

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.

Coming Soon

Build faster with styleframe Pro.

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