SvelteKit

Components

ConsentRoot renders ConsentProvider from the state loadConsent returned, so the banner is in the server HTML. Mount it once, in the root +layout.svelte; 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
`ConsentDialog`	The preference dialog, loaded on first use.	ConsentDialog
`ConsentWidget`	The preference controls inline, for a settings page.	ConsentWidget
`ConsentDialogLink`	An unstyled button that opens preferences, for your footer.	ConsentDialogLink
`ConsentDialogTrigger`	A floating, draggable button that opens preferences.	ConsentDialogTrigger
`ConsentGate`	Its children only while a category is allowed.	ConsentGate
`ConsentButton`	A button that accepts, rejects, saves or opens preferences.	ConsentButton
`IABConsentBanner`	The IAB TCF banner, for visitors under an IAB policy.	IABConsentBanner
`IABConsentDialog`	The IAB TCF preference center.	IABConsentDialog
`ConsentDevTools`	A development panel for the consent state.	Dev tools
`Dialog`, `Switch`, `Tabs` and others	Unstyled building blocks for your own UI.	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 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.

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 lists them.