Styleframe Logo
Getting Started

Installation

Get started with styleframe in your project. Choose the installation method that best fits your setup.

Styleframe is designed to work seamlessly with your existing project setup. Whether you're using Vite, Nuxt, or have a custom build pipeline, we've got you covered.

Choose Your Installation Method

Select the installation guide that matches your project setup:

Vite

Quick setup for Vite projects with automatic configuration. Perfect for Vue, React, or vanilla JavaScript applications.

Nuxt

Seamless integration with Nuxt applications. Automatic module setup with zero configuration required.

Custom Setup

Manual installation for custom build pipelines or frameworks. Full control over your styleframe configuration.

What Happens During Installation?

All installation methods will:

  • Install styleframe as a development dependency
  • Create a styleframe.config.ts configuration file
  • Set up the build pipeline integration (when applicable)
  • Generate a virtual CSS module for importing in your project

Need Help?

Having trouble with installation?

Next Steps

After installation, you'll be ready to:

  1. Create your first styleframe configuration
  2. Define design tokens and variables
  3. Build type-safe, maintainable CSS

Start building your design system →

Introduction

Welcome to styleframe - the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript.

Vite Installation

Get started with styleframe in your Vite project.