---
title: Frame
description: Conditionally render children based on consent, with a placeholder for when consent is not given.
lastModified: 2025-10-12

availableIn:
  - framework: 'next'
    url: '/docs/frameworks/next/components/frame'
    title: 'Next.js'
  - framework: 'react'
    url: '/docs/frameworks/react/components/frame'
    title: 'React'
---
The Frame component provides an elegant way to conditionally render children based on consent, with a placeholder for when consent is not given. This is designed perfectly for Iframe components like youtube embeds that should only be shown when consent is granted.

## Usage

The frame component provides a pre-built placeholder, however, this can be modified with a more custom placeholder to suit your needs.

**Recommended**

```tsx
export default function App() {
  return (
    <>
      <Frame category="marketing" style={{ width: '500px', height: '500px' }}>
        <iframe
          title="Cool Duck Video"
          src="https://www.youtube.com/embed/mQJ6q1ZCzsg"
          width="100%"
          height="100%"
        />
      </Frame>
    </>
  );
};

```

**expanded**

```tsx

const CustomFrame = () => {
	return (
   	<Frame.Root>
      <Frame.Title> hello </Frame.Title>
      <Frame.Button category="marketing"> world </Frame.Button>{' '}
    </Frame.Root>
	);
};


export default function App() {
  return (
   	<Frame
				category="marketing"
      style={{ width: '500px', height: '500px' }}
				placeholder={
					<CustomFrame />
				}
			>
				<iframe
					title="Cool Duck Video"
					src="https://www.youtube.com/embed/mQJ6q1ZCzsg"
					width="100%"
					height="100%"
				/>
			</Frame>
  );
};
```

## API Reference

### Frame

The main component accepts these props:

| Property    | Type                                                                                                                                                                                            | Description                                                                                                                                        | Default   |  Required  |
| :---------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | :--------: |
| children    | ReactNode                                                                                                                                                                                       | Content rendered when consent is granted. Children are not mounted until&#xA;consent is given, preventing unnecessary network requests.            | -         | ✅ Required |
| category    | AllConsentNames                                                                                                                                                                                 | Consent category required to render children.                                                                                                      | -         | ✅ Required |
| placeholder | ReactNode                                                                                                                                                                                       | A custom placeholder component to display when consent is not met.&#xA;If not provided, a default placeholder will be displayed.                   | -         |  Optional  |
| noStyle     | boolean \| undefined                                                                                                                                                                            | When true, removes all default styling from the component                                                                                          | false     |  Optional  |
| theme       | Partial\<\{ 'frame.placeholder.root': ThemeValue\<PlaceholderCSSVariables>; 'frame.placeholder.title': ThemeValue; 'frame.placeholder.button': ThemeValue\<ButtonCSSVariables>; }> \| undefined | Custom theme to override default styles while maintaining structure and&#xA;accessibility. Merges with defaults. Ignored when \`noStyle=\{true}\`. | undefined |  Optional  |

### Compound Components

| Property | Type                                                                                                                                    | Description | Default |  Required  |
| :------- | :-------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :------ | :--------: |
| Root     | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                |             | -       | ✅ Required |
| Title    | ForwardRefExoticComponent\<Omit\<BoxProps, "themeKey"> & RefAttributes\<HTMLDivElement>>                                                |             | -       | ✅ Required |
| Button   | ForwardRefExoticComponent\<Omit\<ConsentButtonProps, "themeKey"> & \{ category: AllConsentNames; } & RefAttributes\<HTMLButtonElement>> |             | -       | ✅ Required |