Consenti
Tutorial — Frontend + Backend — Step 9 of 9

Ship It

Theme it, wrap it for your framework, and go live.

Override any CSS custom property to match your brand — no Shadow DOM, your stylesheet applies directly:

css
:root {
  --consenti-primary-bg: #ffffff;
  --consenti-btn-primary-bg: #1565c0;
  --consenti-btn-radius: 6px;
  --consenti-banner-radius: 12px;
}

Using React or Next.js on the frontend? Wrap the widget in a small effect-based component:

ConsentSetup.tsx
tsx
'use client'
import { useEffect } from 'react'
import { ConsentiSetup } from '@consenti/ui'

export function ConsentSetup() {
  useEffect(() => {
    const widget = new ConsentiSetup({
      api: { enabled: true, baseUrl: 'https://your-site.com' },
    })
    return () => widget.destroy()
  }, [])
  return null
}

What to read next