---
title: Theme Recipes
metaTitle: Theme Recipes - JavaScript Data Grid | Handsontable
permalink: /recipes/themes
canonicalUrl: /recipes/themes
searchCategory: Recipes
hotPlugin: false
editLink: false
type: how-to
id: a8f2d91c
description: Practical recipes for integrating Handsontable with design systems and UI libraries.
react:
  id: b3e4c82d
  metaTitle: Theme Recipes - React Data Grid | Handsontable
angular:
  id: c5f6d93e
  metaTitle: Theme Recipes - Angular Data Grid | Handsontable
vue:
  id: iyf124u6
  metaTitle: Theme Recipes - Vue Data Grid | Handsontable
---
[[toc]]

## Overview

This section provides practical, ready-to-use recipes for matching Handsontable to your app's design system. Each recipe includes complete working examples with step-by-step instructions.

## Getting Started

Read the [Themes guide](@/guides/styling/themes/themes.md) first to understand the Theme API, built-in themes, and how to apply or customize themes programmatically.

## Available Recipes

Recipes in this section cover common use cases and demonstrate best practices for:

- **Design system integration** – Match the grid to shadcn/ui, Fluent UI, Tailwind, or other design systems
- **Theme API** – Register and configure themes with colors, density, and dark mode

Current recipes:

<div class="boxes-list">

- [Handsontable with shadcn/ui](@/recipes/themes/custom-theme/custom-theme.md)
- [Handsontable with MUI](@/recipes/themes/mui-theme/mui-theme.md)
- [Handsontable with Base Web](@/recipes/themes/base-theme/base-theme.md)
- [Handsontable with Ant Design](@/recipes/themes/ant-design/ant-design.md)
- [Handsontable with Fluent UI](@/recipes/themes/fluent-ui/fluent-ui.md)

</div>

Each recipe includes complete code examples, configuration options, and troubleshooting tips to help you integrate Handsontable with your app's look and feel.