---
title: ConsentDialog
description: A modal dialog where users can toggle individual consent categories.
---
## Basic Usage
```tsx
import { ConsentManagerProvider, ConsentBanner, ConsentDialog } from '@c15t/react';
export function ConsentManager() {
return (
);
}
```
## Controlled State
By default, the dialog follows `activeUI === 'dialog'` from the consent store. Use the `open` prop for manual control:
```tsx
import { useState } from 'react';
function SettingsPage() {
const [open, setOpen] = useState(false);
return (
<>
);
}
```
Or use the hook to open it programmatically:
```tsx
import { useConsentManager } from '@c15t/react';
function PrivacyLink() {
const { setActiveUI } = useConsentManager();
return (
);
}
```