# Subframe Docs

## Docs

- [Code generation](https://docs.subframe.com/concepts/code-generation.md): How Subframe generates clean, production-ready React code.
- [Design to code workflow](https://docs.subframe.com/concepts/design-to-code.md): How Subframe connects designs to your codebase.
- [Exporting pages](https://docs.subframe.com/concepts/exporting-pages.md): Export page designs to your codebase and add business logic.
- [Syncing components](https://docs.subframe.com/concepts/syncing-components.md): Keep your design system in sync between Subframe and your codebase.
- [Astro](https://docs.subframe.com/frameworks/astro.md): Install Subframe in Astro projects.
- [Manual installation](https://docs.subframe.com/frameworks/manual.md): Step-by-step guide to manually install Subframe without the CLI.
- [Monorepo](https://docs.subframe.com/frameworks/monorepo.md): Set up Subframe in a monorepo to share components across multiple apps.
- [Next.js](https://docs.subframe.com/frameworks/nextjs.md): Install Subframe in Next.js projects.
- [Vite](https://docs.subframe.com/frameworks/vite.md): Install Subframe in Vite projects.
- [Accessibility](https://docs.subframe.com/guides/accessibility.md): Build accessible interfaces with Subframe components.
- [Component docs](https://docs.subframe.com/guides/component-docs.md): Find documentation for Subframe components and their underlying libraries.
- [Dark mode](https://docs.subframe.com/guides/dark-mode.md): Setting up dark mode using CSS variables
- [MCP server](https://docs.subframe.com/guides/mcp-server.md): Let AI coding assistants directly access your Subframe designs and documentation.
- [Publishing to NPM](https://docs.subframe.com/guides/publish-to-npm.md): Distribute components as a package.
- [Agent skills](https://docs.subframe.com/guides/skills.md): Guided workflows that teach AI assistants how to design and implement UIs with Subframe.
- [Testing](https://docs.subframe.com/guides/testing.md): Add test attributes to Subframe components.
- [Installation](https://docs.subframe.com/installation.md): Set up Subframe in your codebase.
- [Auth tokens](https://docs.subframe.com/learn/admin/auth-tokens.md): Create and manage auth tokens for the Subframe CLI.
- [Team members](https://docs.subframe.com/learn/admin/managing-team.md): Invite collaborators and manage roles for your team.
- [Pricing and plans](https://docs.subframe.com/learn/admin/pricing-and-plans.md): Compare plans and manage your subscription.
- [Okta SSO](https://docs.subframe.com/learn/admin/sso/okta.md): Configure Okta single sign-on for your Subframe team.
- [Image to design](https://docs.subframe.com/learn/ask-ai/image-to-design.md): Upload images to prompt AI when generating designs.
- [Quick edits](https://docs.subframe.com/learn/ask-ai/making-quick-edits.md): Ask AI in context to edit or insert specific elements.
- [Personalizing AI](https://docs.subframe.com/learn/ask-ai/personalizing-ai.md): Train AI with your project context for more relevant design generations.
- [Generating designs](https://docs.subframe.com/learn/ask-ai/prompt-to-design.md): Use AI to generate page designs, make edits, and update your theme.
- [Referencing pages](https://docs.subframe.com/learn/ask-ai/referencing-pages.md): Add existing pages as references to remix designs with AI.
- [Overview](https://docs.subframe.com/learn/code-mode/overview.md): View and export code from your designs.
- [Import existing design system](https://docs.subframe.com/learn/components/importing.md): Import existing React components into Subframe.
- [Overview](https://docs.subframe.com/learn/components/overview.md): Reusable UI building blocks for your designs.
- [Props & slots](https://docs.subframe.com/learn/components/props-and-slots.md): Add data and composition to your components.
- [Hover, active, focus states](https://docs.subframe.com/learn/components/states.md): Add interaction states to your components.
- [Subcomponents](https://docs.subframe.com/learn/components/subcomponents.md): Child components scoped to a parent component.
- [Variants](https://docs.subframe.com/learn/components/variants.md): Create different visual styles for your component.
- [Concepts](https://docs.subframe.com/learn/concepts.md): Learn the core concepts behind Subframe's design-to-code workflow.
- [Adding elements](https://docs.subframe.com/learn/design-mode/adding-elements.md): Add elements to your design using quick insert or drag-and-drop.
- [Comments](https://docs.subframe.com/learn/design-mode/comments.md): Leave feedback and collaborate on your designs.
- [Custom CSS](https://docs.subframe.com/learn/design-mode/custom-css.md): Add custom Tailwind classes as an escape hatch for CSS properties not available in the Inspector.
- [Inspector](https://docs.subframe.com/learn/design-mode/inspector.md): Configure element properties in the right sidebar.
- [Keyboard shortcuts](https://docs.subframe.com/learn/design-mode/keyboard-shortcuts.md): Speed up your workflow with keyboard shortcuts.
- [Layers](https://docs.subframe.com/learn/design-mode/layers.md): Navigate and organize the element hierarchy.
- [Page layouts](https://docs.subframe.com/learn/design-mode/page-layouts.md): Apply reusable navigation and modal layouts to your pages.
- [Previewing designs](https://docs.subframe.com/learn/design-mode/preview.md): Preview your designs and test interactions.
- [Quick actions](https://docs.subframe.com/learn/design-mode/quick-actions.md): Set properties and take actions on elements.
- [Responsive design](https://docs.subframe.com/learn/design-mode/responsive-design.md): Design for mobile and desktop breakpoints.
- [Share designs](https://docs.subframe.com/learn/design-mode/share-designs.md): Let your teammates and external stakeholders view your designs.
- [Working with stacks](https://docs.subframe.com/learn/design-mode/working-with-stacks.md): Master stack-based layouts with direction, spacing, and alignment.
- [Overview](https://docs.subframe.com/learn/editor/overview.md): Learn the Subframe editor interface and navigate between editing modes.
- [Elements](https://docs.subframe.com/learn/elements/elements.md): The building blocks of all designs.
- [FAQ](https://docs.subframe.com/learn/faq.md): Answers to frequently asked questions about Subframe.
- [Flows](https://docs.subframe.com/learn/flows/flows.md): Organize pages into flows.
- [Working with AI agents](https://docs.subframe.com/learn/guides/working-with-ai-agents.md): Walk through the full design-to-code workflow using Subframe with AI coding assistants.
- [Introduction](https://docs.subframe.com/learn/introduction.md): Design visually with real components and export production-ready React code.
- [Pages](https://docs.subframe.com/learn/pages/pages.md): Design individual pages in your project.
- [Overview](https://docs.subframe.com/learn/projects/overview.md): Create, manage, and organize projects for your team.
- [Project settings](https://docs.subframe.com/learn/projects/project-settings.md): Configure project settings like code generation and AI preferences.
- [Version history](https://docs.subframe.com/learn/projects/version-history.md): View and restore previous versions.
- [Annotations](https://docs.subframe.com/learn/prototype-mode/annotations.md): Add implementation notes to guide AI prototype generation.
- [Interactions](https://docs.subframe.com/learn/prototype-mode/click-through-prototypes.md): Create clickable prototypes in preview mode.
- [Prototype with AI](https://docs.subframe.com/learn/prototype-mode/overview.md): Create interactive prototypes with AI-powered code generation.
- [Quickstart](https://docs.subframe.com/learn/quickstart.md): Create your first project and export a design to code in minutes.
- [Snippets](https://docs.subframe.com/learn/snippets/snippets.md): Save and reuse design patterns.
- [Adding custom fonts](https://docs.subframe.com/learn/theme/adding-custom-fonts.md): Upload custom font files to use in your theme.
- [Customizing theme](https://docs.subframe.com/learn/theme/customizing-theme.md): Define design tokens for colors, typography, borders, corners, and shadows.
- [Exporting theme](https://docs.subframe.com/learn/theme/exporting-theme.md): View your generated Tailwind config and sync theme changes to your codebase.
- [Importing tokens](https://docs.subframe.com/learn/theme/importing-tokens.md): Import design tokens from Tailwind config, CSS, or JSON files to set up your theme.
- [Why Subframe](https://docs.subframe.com/overview.md): Subframe is an AI design tool that outputs production-ready React code.

## OpenAPI Specs

- [package](https://docs.subframe.com/package.json)

## Optional

- [Go to Subframe](https://subframe.com?utm_source=mintlify&utm_medium=docs&utm_campaign=global_link)
- [Slack Community](https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ)
- [YouTube](https://www.youtube.com/@SubframeApp)