---
title: Components
description: Props and behavior of every @c15t/svelte component in a Svelte app,
  from ConsentProvider and ConsentBanner to ConsentGate and DevTools.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
[`ConsentProvider`](./components/consent-provider) creates and starts the
consent runtime from a `mode`, such as `manifest()`. It renders no markup of
its own; every other component renders inside it.

## Every component

Import every component from `@c15t/svelte`, except the dev tools panel,
which comes from `@c15t/svelte/devtools`. Render them inside the provider:
`ConsentProvider` in a Svelte app, or `ConsentRoot`, which renders
`ConsentProvider`, in a SvelteKit root layout. A component outside it throws
`c15t: no v3 consent context`.

|Component|Renders|Page|
|--|--|--|
|`ConsentBanner`|The first-layer banner when the policy asks for one.|[ConsentBanner](./components/consent-banner)|
|`ConsentDialog`|The preference dialog, loaded on first use.|[ConsentDialog](./components/consent-dialog)|
|`ConsentWidget`|The preference controls inline, for a settings page.|[ConsentWidget](./components/consent-widget)|
|`ConsentDialogLink`|An unstyled button that opens preferences, for your footer.|[ConsentDialogLink](./components/consent-dialog-link)|
|`ConsentDialogTrigger`|A floating, draggable button that opens preferences.|[ConsentDialogTrigger](./components/consent-dialog-trigger)|
|`ConsentGate`|Its children only while a category is allowed.|[ConsentGate](./components/consent-gate)|
|`ConsentButton`|A button that accepts, rejects, saves or opens preferences.|[ConsentButton](./components/consent-button)|
|`IABConsentBanner`|The IAB TCF banner, for visitors under an IAB policy.|[IABConsentBanner](./components/iab-consent-banner)|
|`IABConsentDialog`|The IAB TCF preference center.|[IABConsentDialog](./components/iab-consent-dialog)|
|`ConsentDevTools`|A development panel for the consent state.|[Dev tools](./components/dev-tools)|
|`Dialog`, `Switch`, `Tabs` and others|Unstyled building blocks for your own UI.|[Primitives](./components/primitives)|

`DevTools` and `C15TDevTools` are aliases for `ConsentDevTools`.

## Styles

There is no stylesheet to import. Each stock component adds the rules it
uses to `<head>` as a `<style>` element, once per page, before its own
elements render. On a server-rendered SvelteKit page, `c15tHandle` writes the
banner's rules into the HTML, so the banner is styled before hydration. The
dialog's rules, including the primitives', load with the dialog's code.

The IAB TCF banner and dialog also add their own rules. The IAB dialog adds
its rules when it opens, and includes the base rules it needs when rendered
without a banner. Pages without IAB components do not load the IAB sheets.

To run the stylesheet through Tailwind CSS 3 or put it in a named cascade
layer, set `styles={false}` on the provider and import
`@c15t/svelte/styles.css`. With IAB TCF, also import
`@c15t/svelte/iab/styles.css` after the base stylesheet;
[stylesheets and CSS layers](/docs/customization/stylesheets#import-the-stylesheet-yourself)
explains when.

## When components render nothing

Every consent surface stays hidden until a policy resolves for the visitor,
and again when the resolved policy asks for no prompt and grants no way to
change preferences. A missing banner or link is usually a policy result, not
a rendering bug. See
[why the banner may be absent](/docs/concepts/policies#why-the-banner-may-be-absent).

## Shared props

Several props mean the same thing on every component:

|Prop|Behavior|
|--|--|
|`noStyle`|Renders the same markup and behavior without c15t's classes. Set it on the provider for every component, or on one component.|
|`class`|Adds your class to the component's root element.|
|`hideBranding`|Hides the "Secured by" tag on the banner, dialog and widget.|
|`models`|The policy models a surface renders for: `opt-in`, `opt-out`, `iab` and `none`.|
|`legalLinks`|Which of the provider's legal links a banner or dialog shows, or `null` for none.|

Theme slots style one part of one component; [customize](./customize) lists
them.