---
title: React Quickstart
description: Learn how to integrate c15t into your React application with this step-by-step guide. We'll cover installation, configuration, and basic usage.
lastModified: 2025-08-22
availableIn:
  - framework: 'javascript'
    url: '/docs/frameworks/javascript/quickstart'
    title: 'JavaScript'
  - framework: 'react'
    url: '/docs/frameworks/react/quickstart'
    title: 'React'
  - framework: 'next'
    url: '/docs/frameworks/next/quickstart'
    title: 'Next.js'
---
## CLI Setup (Recommended)

You can get started with the `@c15t/cli` which will generate the code for you!

| Package manager | Command                       |
| :-------------- | :---------------------------- |
| npm             | `npx @c15t/cli generate`      |
| pnpm            | `pnpm dlx @c15t/cli generate` |
| yarn            | `yarn dlx @c15t/cli generate` |
| bun             | `bunx @c15t/cli generate`     |

## Manual Setup

1. **Install @c15t/react Package**

   | Package manager | Command                   |
   | :-------------- | :------------------------ |
   | npm             | `npm install @c15t/react` |
   | pnpm            | `pnpm add @c15t/react`    |
   | yarn            | `yarn add @c15t/react`    |
   | bun             | `bun add @c15t/react`     |

2. **Add to Your Application**

   ```tsx
   import { 
     ConsentManagerDialog,
     ConsentManagerProvider,
     CookieBanner,
   } from '@c15t/react';

   function App() {
     return (
       <ConsentManagerProvider options={{  
         mode: 'c15t', 
         backendURL: "https://your-instance.c15t.dev",
         consentCategories: ['necessary', 'marketing'], // Optional: Specify which consent categories to show in the banner. 
         ignoreGeoLocation: true, // Useful for development to always view the banner.
       }}>
         <div className="App">
           {/* Your application content */}
         </div>
         <CookieBanner />
         <ConsentManagerDialog />
       </ConsentManagerProvider>
     );
   }

   export default App;
   ```

## Storing Consent

We recommend using the [hosted solution](/docs/frameworks/react/storing-consent/hosted) with [consent.io](https://consent.io) to store your consent.