> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Template Variants

## Overview

The Template Variants content block is a dynamic and powerful way to document your component library while ensuring that it stays up to date as your component props evolve. By automatically reflecting changes in props, this block eliminates the need to manually update "old stories" or demos, keeping your documentation in sync with the latest component versions.

By selecting a pattern and its associated renderer (e.g. React, Vue, etc.), you can customize and display a collection of variants generated from the component's props. This allows for flexible, scalable documentation that grows with your design system.

### Key configuration options include:

* **Variation Name**: The base demo you are using to generate variants (e.g. "Primary").
* **Prop Name**: The prop to loop over, which generates a group of variants displayed within the block.
* **Asset Set**: View your component variations across all your brand themes—an essential feature for managing multiple themes or brand styles.
* **Include Value**: Display only options that match specified values (you can enter multiple comma-separated values).
* **Exclude Value**: Exclude options that match specified values (you can enter multiple comma-separated values).

The Template Variants content block ensures your components are consistently represented in their most current form, enabling efficient organization and documentation of all component variations.

![Screenshot 2024-09-10 at 12.05.47 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/3ad9f7bd0a59c8d789e78c073e285d104ec7f205b5c056b1db4413215e897e7c/docs/assets/images/7148068a-screenshot-2024-09-10-at-120547-pm-jbecfrvatppng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211123Z&X-Amz-Expires=604800&X-Amz-Signature=ad190493da0f5d445176c0dabe43e1141c1689531790aa865b4ca074a08162d5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

### Example screenshot

The example below shows our Button 'variant' variations (outlined, filled, and text):

![Screenshot 2024-09-10 at 12.06.12 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/0b756d2052c5f24130e425aba7859b3d5e37adbba2be01ae2f690fa0d5a9cadf/docs/assets/images/47ae35f3-screenshot-2024-09-10-at-120612-pm-3i2kv5ylcfpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211123Z&X-Amz-Expires=604800&X-Amz-Signature=8fd01d0bfb6c4f0024da7b2aaa2fa0639a52b082ad3a77f9481d4fb018a56fa3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)