# Knapsack Documentation

> Documentation for Knapsack, the design system platform that unifies design tokens, components, and docs so teams design, build, and ship consistent products.

## Instructions for AI Agents

- For clean Markdown of any page, append `.md` to the page URL
- For section-specific indexes, append `/llms.txt` to any section URL
- For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server

## Docs

- [Knapsack Documentation](https://docs.knapsack.cloud/.md): Meet Knapsack—a design system platform that connects teams and improves digital experiences.
- [Get Started](https://docs.knapsack.cloud/get-started.md)
- [Storage Options](https://docs.knapsack.cloud/get-started/storage-options.md): Choose how Knapsack stores your design system content.
- [Required Prep](https://docs.knapsack.cloud/get-started/required-prep.md): Before diving into the technical setup, ensure you have all the necessary preparations in place. This includes understanding system prerequisites, gathering essential information, and setting up initial configurations.
- [System Prerequisites](https://docs.knapsack.cloud/get-started/required-prep/system-prerequisites.md): Before you can start running Knapsack, it’s essential to prepare your system to ensure a smooth setup process. This document provides detailed information on the necessary software and configurations required for a successful Knapsack implementation.
- [Knapsack Architecture](https://docs.knapsack.cloud/get-started/required-prep/knapsack-architecture.md): The "Knapsack Architecture" document is designed to provide a clear and detailed understanding of the various technologies and infrastructures that support Knapsack's technical framework. This resource is crucial for stakeholders, developers, and IT professionals who need to grasp how Knapsack integrates with existing systems and the underlying components that ensure its robust performance.
- [Install Knapsack](https://docs.knapsack.cloud/get-started/install.md): Follow this step-by-step guide to get Knapsack up and running on your local machine.
- [Update Knapsack](https://docs.knapsack.cloud/get-started/updating-knapsack.md): Knapsack releases updates to its packages and data structure often.
- [Navigating Knapsack](https://docs.knapsack.cloud/get-started/editing-interface.md): Learn how to navigate and use the editorial interface to create and manage your documentation content efficiently.
- [Run Locally](https://docs.knapsack.cloud/get-started/running-knapsack-locally.md): Detailed instructions on how to run Knapsack locally for development, testing, and deployment purposes.
- [Deploy Knapsack](https://docs.knapsack.cloud/get-started/deploying-knapsack.md): This page provides a  guide to deploying your Knapsack workspace. It covers all the necessary steps to ensure a smooth deployment process, including installing dependencies, building the codebase, and executing essential Knapsack commands to serve your design system.
- [Git Providers](https://docs.knapsack.cloud/get-started/deploying-knapsack/supported-git-providers.md): Choosing the Right Version Control Solution for Your Project
- [GitHub](https://docs.knapsack.cloud/get-started/deploying-knapsack/supported-git-providers/github.md): GitHub is a widely used Git hosting service that provides a robust platform for code collaboration and version control.
- [GitLab](https://docs.knapsack.cloud/get-started/deploying-knapsack/supported-git-providers/gitlab.md): GitLab offers a comprehensive DevOps platform that includes Git repository management, CI/CD pipelines, and more.
- [Bitbucket](https://docs.knapsack.cloud/get-started/deploying-knapsack/supported-git-providers/bitbucket.md): Bitbucket is a versatile Git hosting service that supports collaborative code development and version control.
- [Azure Dev Ops](https://docs.knapsack.cloud/get-started/deploying-knapsack/supported-git-providers/azure-dev-ops.md): Azure DevOps combines Git repository management with a suite of development tools, including CI/CD pipelines, project management, and more.
- [Configure Knapsack](https://docs.knapsack.cloud/get-started/knapsack-config.md): The knapsack.config.js file is the cornerstone of your Knapsack workspace configuration.
- [Branching and Publishing](https://docs.knapsack.cloud/branching.md): Work on changes safely, review them with your team, and publish updates without disrupting your main workspace.
- [Code Sources](https://docs.knapsack.cloud/code-sources.md): Sync your code to automatically discover and import your components.
- [Asset Sets](https://docs.knapsack.cloud/code-sources/asset-sets.md): Asset sets provide a method of managing theme or style variations for your patterns in Knapsack and in your production applications.
- [Angular](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-angular.md): Knapsack for Angular lets you develop and test components in isolation.
- [Handlebars](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-handlebars.md): Knapsack for Handlebars lets you develop and test components in isolation.
- [React](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-react.md): Knapsack for React lets you develop and test components in isolation.
- [Twig](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-twig.md): Knapsack for Twig lets you develop and test components in isolation.
- [Vue](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-vue.md): Knapsack for Vue lets you develop and test components in isolation.
- [Web Components](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-web-components.md): Knapsack for Web Components lets you develop and test components in isolation.
- [Advanced Prop Configurations](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations.md): Learn how to apply advanced prop configurations within JSON Schema.
- [Using Arrays of Objects](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-arrays-of-objects.md): Learn how to configure and utilize arrays of objects within your components.
- [Using Components as Props](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-components-as-props.md): Discover the power of using components as props to create more modular and reusable code.
- [Using Functions as Props](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-functions-as-props.md): Explore the benefits of passing functions as props to enhance the interactivity and behavior of your components.
- [Using Image Property Detection](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-image-property-detection.md): Automatically identify properties related to images and enable asset uploads
- [Using Multiple Prop Types](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-multiple-prop-types.md): Understand how to configure props that can accept multiple types, increasing the versatility of your components.
- [Using Objects as Props](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-objects-as-props.md): Master the technique of passing objects as props to encapsulate related data and functionality.
- [Design Sources](https://docs.knapsack.cloud/figma-design-source.md): The Figma Design Source integration gives the ability to display components, frames, and other artifacts from your Figma design files.
- [Design Tokens and Variables](https://docs.knapsack.cloud/design-tokens.md): Unlock Consistency and Flexibility in Design with Powerful Token Management and Theming Tools.
- [Managing Tokens in the UI](https://docs.knapsack.cloud/design-tokens/adding-tokens-through-ui.md): Easily add and manage design tokens through Knapsack's intuitive interface. Input and organize tokens directly within Knapsack, streamlining the process without needing to dive into code.
- [Importing Tokens](https://docs.knapsack.cloud/design-tokens/importing-tokens.md): Bring your existing design tokens into Knapsack seamlessly. This guide shows you how to import your tokens JSON into Knapsack for further management and usage.
- [Configuring Token Engine](https://docs.knapsack.cloud/design-tokens/token-engine-configuration.md): Learn how to configure Knapsack's Token Engine to transform your design tokens, such as colors, typography, and spacing, into reusable code and assets. This section covers generating design tokens in various file formats, ensuring they integrate smoothly into diverse development platforms and workflows.
- [Using Tokens in Projects](https://docs.knapsack.cloud/design-tokens/using-tokens-in-projects.md): Learn how to use Variables within your workspace.
- [Figma Plugin](https://docs.knapsack.cloud/design-tokens/figma-plugin.md): Import Your Figma Variables into Knapsack
- [Variables](https://docs.knapsack.cloud/design-tokens/variables.md): Explore how to use variables to create collections, modes, and themes that enhance the flexibility of your design system.
- [Adding Documentation](https://docs.knapsack.cloud/documentation.md): Let's walk through how to use Knapsack to build clear, useful docs that people will want to use.
- [Content Blocks](https://docs.knapsack.cloud/documentation/blocks-overview.md): Explore the use of dynamic content blocks, such as component variations, design token blocks, and embeds, to create interactive and informative documentation.
- [Adding Blocks](https://docs.knapsack.cloud/documentation/blocks-overview/adding-blocks.md): Learn how to enhance your documentation by adding dynamic content blocks.
- [Managing Blocks](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks.md): Discover how to efficiently manage and organize your content blocks. This section covers techniques for editing, rearranging, and removing blocks to ensure your documentation remains up-to-date and well-structured, providing a seamless user experience.
- [Callout Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/callout-block.md): Creates a callout banner to share pertinent information with the user
- [Divider Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/divider-block.md): Create an hr element for separating content on the page.
- [Shortcuts Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/shortcuts-block.md): The Shortcuts Block organizes a collection of one or more tiles to represent links. These links can direct users to other content within your documentation or external sources.
- [Table Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/table-block.md): The table block allows you to organize data in a structured format.
- [Text Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/text-block.md): Add rich textual content to your design system documentation.
- [Figma Component Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/figma-component-block.md): Showcase all the variants of a single component.
- [Figma Tiles Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/figma-tiles-block.md): Showcase specific items from your design source.
- [Guidelines Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/guidelines-block.md): Give examples of how particular components should be used and common mistakes to avoid.
- [Design Tokens Block](https://docs.knapsack.cloud/documentation/blocks-overview/managing-blocks/design-tokens-block.md): Showcase and Customize Your Design Tokens with Flexible Display Options.
- [Embed Blocks](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks.md): The iFrame Block allows you to embed any web page or web content using an iframe. This block is versatile and can be used to display content from any website that supports embedding.
- [Attachments Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/attachments-block.md): Add file attachments to your docs that users can download. Once you've added the Attachments Block, you can upload a file or add a URL link to a file hosted elsewhere.
- [Code Snippet Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/code-snippet-block.md): The Code Snippet Block provides syntax highlighting for a variety of programming languages. This block is perfect for displaying code examples with proper formatting and readability, making it easier for users to understand and utilize the provided code.
- [Image Gallery Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/image-block.md): Add and manage images for your documentation. This block is ideal for showcasing visual content and illustrations that complement your documentation.
- [Video Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/video-block.md): Seamlessly integrate videos into your documentation
- [Patterns Grid Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/patterns-grid-block.md): Display a grid of the patterns in your design system. This block arranges your design patterns in a visually appealing grid format, allowing users to quickly browse and identify different components.
- [Patterns Status Table Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/patterns-status-table-block.md): Display a table of the patterns in your design system. This block organizes your design patterns in a tabular format, providing a clear and structured overview of each pattern's status, making it easier to track and manage the components within your system.
- [Template Playground](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/template-playground.md): A Powerful Tool for Customizing and Displaying Pattern Variations.
- [Template Variants](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/template-variants.md): Automatically Document and Display Component Variations as They Evolve.
- [Template Spec](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/pattern-spec.md): Display Component Specifications Anywhere in Your Documentation.
- [Markdown Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/markdown-block.md): The Markdown Block allows you to add custom content using Markdown syntax. This block supports a wide range of formatting options, enabling you to create rich text content, lists, links, images, and more. It offers a versatile way to incorporate customized and detailed information into your documentation.
- [Navigation](https://docs.knapsack.cloud/documentation/navigation.md): Learn how to manage both primary and secondary navigation within your workspace. This includes organizing your pages and ensuring that users can easily find the information they need.
- [Pages](https://docs.knapsack.cloud/documentation/pages.md): Detailed guidance on adding new pages to your documentation, including layout options and best practices.
- [Patterns](https://docs.knapsack.cloud/documentation/patterns.md): By creating pattern-specific pages, you can centralize and document your design system components, making it easier to maintain consistency and share them with your team.
- [Creating Demos](https://docs.knapsack.cloud/composition-and-prototyping/creating-demos.md): Comprehensive Guide to Creating Component and Figma Demos in Knapsack
- [Slots and Sub Components](https://docs.knapsack.cloud/composition-and-prototyping/slots-and-sub-components.md): Slots allow you to embed components within other components, creating dynamic and interactive demos.
- [Prototyping](https://docs.knapsack.cloud/composition-and-prototyping/prototyping.md)
- [Intelligent Tools](https://docs.knapsack.cloud/intelligent-tools.md): Close the gaps between AI output & your actual standards
- [Configuring VS Code](https://docs.knapsack.cloud/intelligent-tools/configure-with-vs-code.md): MCP integration for VS Code
- [Configuring Claude](https://docs.knapsack.cloud/intelligent-tools/configure-with-claude.md): MCP integration for Claude Desktop
- [Prompting Intelligent Tools](https://docs.knapsack.cloud/intelligent-tools/data-sources.md): Access to your design tokens, components and documentation so that outputs are grounded in the guidelines and standards that define your brand
- [MCP Server](https://docs.knapsack.cloud/intelligent-tools/mcp-server.md): Connect Claude Code, Cursor, and other AI clients directly to this documentation site
- [llms.txt](https://docs.knapsack.cloud/intelligent-tools/llms-txt.md): How AI agents and crawlers can discover and read this documentation as Markdown
- [Administrative](https://docs.knapsack.cloud/administrative.md): Manage and Customize Your Knapsack Workspace with Advanced Administrative Tools
- [Team Management](https://docs.knapsack.cloud/administrative/team-management.md): Learn about the various roles and privileges available in Knapsack.
- [Inviting Users](https://docs.knapsack.cloud/administrative/team-management/inviting-users.md): Control Workspace Access by Inviting and Managing Users with Ease.
- [Name, Logo, and Favicon](https://docs.knapsack.cloud/administrative/team-management/name-logo-and-favicon.md): Personalize your workspace and make it your own. Whether it's setting the name, uploading a custom logo, hiding the name in the navigation bar, or customizing the favicon, you have full control over how your workspace looks and feels.
- [Table of Contents Controls](https://docs.knapsack.cloud/administrative/team-management/table-of-contents-controls.md): Learn how to control the Table of Contents at a global and page level.
- [Content Block Settings](https://docs.knapsack.cloud/administrative/team-management/settings-content-blocks.md): Customize the Behavior and Appearance of Content Blocks in Your Workspace.
- [Page Settings](https://docs.knapsack.cloud/administrative/team-management/page-settings.md): Customize the Default Appearance and Table of Contents Settings of Your Pages.
- [Status Sets Settings](https://docs.knapsack.cloud/administrative/team-management/status-sets-settings.md): Customize and Track the Progress of Your Design System Components with Configurable Status.
- [Adding Search Terms](https://docs.knapsack.cloud/administrative/team-management/adding-search-terms-to-patterns.md): Make finding content easier in Knapsack by adding search terms.
- [Workspace Doctor](https://docs.knapsack.cloud/administrative/team-management/doctor.md): Keep Your Workspace Clean and Organized with the Doctor Tool.
- [Appearance](https://docs.knapsack.cloud/administrative/appearance-overview.md): Customize the Look and Feel of Your Knapsack Workspace.
- [Custom Fonts](https://docs.knapsack.cloud/administrative/appearance-overview/custom-fonts.md): Easily Integrate and Manage Custom Fonts in Your Knapsack Workspace.
- [Navigation](https://docs.knapsack.cloud/administrative/appearance-overview/navigation-styling.md): Customize the Primary, Secondary, and Tab Navigation Styles in Your Workspace.
- [Typography Styling](https://docs.knapsack.cloud/administrative/appearance-overview/typography-styling.md): Customize the Typography of Your Workspace for Consistent and Cohesive Design.
- [Changelog Plugin](https://docs.knapsack.cloud/administrative/appearance-overview/changelog-plugin.md): Easily Display and Manage Your Project's Updates with the Change Log Plugin.
- [Getting Help](https://docs.knapsack.cloud/getting-help.md): How to get expert technical or user support and guidance for your workspace.
- [User Guides](https://docs.knapsack.cloud/user-guides.md): Essential Guides for Navigating, Personalizing, and Optimizing Your Knapsack Experience.
- [Signing In](https://docs.knapsack.cloud/user-guides/signing-in.md): A simple a straightforward process to signing in.
- [Editing Your Profile](https://docs.knapsack.cloud/user-guides/editing-your-profile.md): Personalize Your Profile and Manage Account Settings.
- [Search (Command Bar)](https://docs.knapsack.cloud/user-guides/search-command-bar.md): Quickly Navigate and Access Content Across Your Knapsack Workspace.
- [Image Sizing](https://docs.knapsack.cloud/user-guides/image-sizing.md): Get crisp, professional images for your page headers and shortcut tiles.
- [Developer Guides](https://docs.knapsack.cloud/developer-guides.md): Advanced Guides and Developer Workflows for Your Knapsack Design System.
- [Cypress Testing](https://docs.knapsack.cloud/developer-guides/cypress-testing.md): Learn ways to use Cypress with Knapsack.
- [Deploy Previews (Per PR Deployments)](https://docs.knapsack.cloud/developer-guides/deploy-previews.md): Enable Per-PR Deployments with Heroku and the Heroku GitHub app.
- [Deploy Previews for GitHub](https://docs.knapsack.cloud/developer-guides/deploy-previews/deploy-previews-for-github.md): Learn how to configure Deploy Previews using the GitHub + Heroku Plugin.
- [Deploy Previews for GitLab](https://docs.knapsack.cloud/developer-guides/deploy-previews/deploy-previews-for-gitlab.md): Learn how to configure Deploy Previews using the Heroku CLI and GitLab Environments.
- [System Guides](https://docs.knapsack.cloud/system-guides.md): Essential Setup and Configuration for System-Level Integrations.
- [Configuring Single Sign-On (SSO)](https://docs.knapsack.cloud/system-guides/configuring-single-sign-on-sso.md): Streamline access for your entire organization with SSO.