c15t/docs/shared/react/components/frame.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Frame
description: Reference page for frame.
group: reference
---
`Frame` conditionally renders its children based on consent state. When consent for the specified category is not granted, a placeholder is shown instead. Children are not mounted at all until consent is given, preventing any network requests or script execution.

## Custom Placeholder

Replace the default placeholder:

```tsx
<Frame
  category="experience"
  placeholder={
    <div className="rounded-lg border p-8 text-center">
      <p>This content requires experience cookies.</p>
      <p>Please enable them in your privacy settings.</p>
    </div>
  }
>
  <InteractiveWidget />
</Frame>
```

## Compound Components

Build fully custom placeholder layouts:

```tsx
<Frame.Root category="marketing">
  <Frame.Title category="marketing" />
  <Frame.Button category="marketing" />
</Frame.Root>
```

* `Frame.Root` - Container with default placeholder styling
* `Frame.Title` - Displays a consent-request message with the category name
* `Frame.Button` - Button that opens the consent dialog for the specified category

## Automatic Category Registration

When `Frame` mounts, it automatically adds its `category` to the active `consentCategories` list. This means you don't need to explicitly list the category in your provider's `consentCategories` option - if a `Frame` component uses it, it will be registered.

## Props

|Property|Value|
|:--|:--|
|Type Name|\`FrameProps\`|
|Source Path|\`./packages/react/src/components/frame/types.ts\`|

\*ExtractedTypeTable: Could not extract "FrameProps" from "./packages/react/src/components/frame/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*