Components

Where the components go

Every component reads Astro.locals.c15t, which the integration's middleware sets on each request. Put them in the layout that wraps every page:

---
import { ClientRouter } from 'astro:transitions';
import {
	ConsentBanner,
	ConsentDialog,
	ConsentDialogLink,
	ConsentScript,
} from 'c15t/astro/components';

interface Props {
	title: string;
}

const { title } = Astro.props;
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1" name="viewport" />
		<title>{title}</title>
		<ConsentScript />
		<ClientRouter />
	</head>
	<body>
		<slot />
		<footer>
			<ConsentDialogLink>Privacy settings</ConsentDialogLink>
		</footer>
		<ConsentBanner />
		<ConsentDialog />
	</body>
</html>

The c15t() integration in astro.config.mjs plays the part a provider plays in React or Vue. It holds the configuration every component reads. See Integration options.

Component reference

Import the components by name from c15t/astro/components. Astro compiles the .astro files it re-exports, so a page ships only what it renders. ConsentBannerDeferred is the exception: it renders a server island, which Astro refuses to build on a site without an adapter, so import it from its own path.

How much JavaScript each component ships

The banners and the link are plain .astro markup and ship no framework JavaScript. One small shared script turns their buttons into consent actions. The dialogs are islands in the framework the integration's ui option names, and they download only when a visitor first reaches for one. See Dialog islands and your own islands.

Astro has no floating preferences widget, consent gate component or dev tools component. Gate embeds with the pattern in Embeds, and inspect consent with the client API and DevTools.

What every component needs

• The c15t() integration in astro.config.mjs, with its middleware on. ConsentBanner and IABConsentBanner throw when Astro.locals.c15t is missing, and the others render nothing useful without it.
• A route that the middleware does not skip. A route in middleware.skip has no Astro.locals.c15t.
• For the dialogs, the Astro integration of the ui framework, listed before c15t().