Consenti

UI Widget — Installation

npm (recommended)

bash
npm install @consenti/ui

Then import and initialise — no CSS import needed, styles are injected automatically:

ts
import { ConsentiSetup } from '@consenti/ui'

CDN / UMD (no build step)

Load the UMD bundle from a CDN for sites without a build pipeline. The bundle exposes a global ConsentiUI object.

index.html
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@consenti/ui/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/@consenti/ui/dist/index.umd.js"></script>
<script>
  const { ConsentiSetup } = ConsentiUI
  new ConsentiSetup({ core: { regulation: 'gdpr' } })
</script>

ESM in the browser (no bundler)

html
<script type="module">
  import { ConsentiSetup } from 'https://esm.sh/@consenti/ui'
  new ConsentiSetup({ core: { regulation: 'gdpr' } })
</script>

CSS options

ApproachHow
Auto-inject (default)Nothing to do — ConsentiSetup injects a <style> tag on first render
Preload CSS (optional, avoids FOUC)import '@consenti/ui/dist/index.css' in your bundler entry, or a <link> tag
Disable auto-inject (bring your own styles)Set core.disableCssTemplate: true — no <style> tag is injected at all
Token overrides onlyLeave auto-inject on, override --consenti-* CSS custom properties in your stylesheet
💡If you use disableCssTemplate: true, you own 100% of the styling. All elements use BEM class names like .consenti-banner,.consenti-banner__heading, .consenti-btn--primary. See the Themes guide for the full class reference.

TypeScript

The package ships full TypeScript definitions. No @types package needed. Use in strict mode:

ts
import type { ConsentiConfig, ConsentValue, ConsentiProfile } from '@consenti/ui'

const config: ConsentiConfig = {
  core: { regulation: 'gdpr' },
}

Package structure

text
@consenti/ui/
├── dist/
│   ├── index.mjs           ← ESM entry
│   ├── index.umd.js        ← UMD entry (CDN)
│   ├── index.d.ts          ← TypeScript types
│   ├── index.css           ← Default styles
│   ├── react.mjs           ← React hook
│   ├── vue.mjs             ← Vue composable
│   └── angular.mjs         ← Angular service