---
title: "React with CSS Modules"
description: "A cva button component styled with CSS Modules in React."
url: "https://cva.style/beta/examples/react/css-modules/"
---

This example builds a `button` component with `cva`, styled with CSS Modules, in a React project. The button gallery in `src/app.tsx` reads the component schema with [`getSchema`](https://cva.style/beta/getting-started/tools#generate-a-react-variant-gallery), so new variant values appear without updating a second list.

This example declares `defaultVariants` on the class function, so `getSchema` exposes each variant’s `defaultValue`. See [Default variants](https://cva.style/beta/getting-started/variants#default-variants) for when to use class-function defaults or framework prop defaults.

[View source on GitHub ↗](https://github.com/joe-bell/cva/tree/main/examples/beta/react-with-css-modules/src/components/button/button.tsx)

Sorry, your browser [doesn't support](https://developer.stackblitz.com/platform/webcontainers/browser-support) this type of embed.

Try [visiting the example directly](https://stackblitz.com/github/joe-bell/cva/tree/main/examples/beta/react-with-css-modules?file=src/components/button/button.tsx) or reopen this page in a Chromium-based browser.