npmpackage.info

Gathering detailed insights and metrics for @consentry/ui

@consentry/ui - 0.2.5 | npmpackage.info

@consentry/ui

0.2.5

TypeScript

168.77 kB

Installations

npm install @consentry/ui

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

18.20.8

NPM Version

10.8.2 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

TypeScript (100%)

Developer

consentryio

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

61 Commits

1 Branches

1 Contributors

Updated on Jun 19, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.2.5

Package Id

@consentry/ui@0.2.5

Unpacked Size

168.77 kB

Size

31.96 kB

File Count

NPM Version

10.8.2

Node Version

18.20.8

Published on

Jun 19, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@consentry/ui

Headless and fully customizable React components for consent management. Drop-in cookie banners, settings modals, and toggles — built for Next.js with zero configuration required.

✨ What You Get

🍪 Complete cookie consent solution — banner, modal, settings
🎨 Fully customizable — colors, text, positioning, behavior
⚡ Zero config required — works out of the box with sensible defaults
🧩 Headless architecture — style it your way or use built-in themes
🔄 Smooth animations — powered by Framer Motion
♿ Accessibility first — keyboard navigation, screen readers, focus management
📱 Mobile optimized — responsive design that works everywhere

📦 Installation

1npm install @consentry/ui @consentry/next @consentry/core

🚀 Quick Start (5 minutes)

Step 1: Create the Consent Provider

Create providers/consent-provider.tsx:

1"use client";
2import { ConsentConfig, ConsentManagerProvider } from "@consentry/next";
3import ConsentManager from "@consentry/ui";
4
5const ConsentProvider = ({ children }: { children: React.ReactNode }) => {
6  const consentConfig: ConsentConfig = {
7    defaults: {
8      functional: true,
9      performance: false,
10      advertising: false,
11      social: false,
12    },
13    scripts: [
14      {
15        id: "gtag-js",
16        category: "functional",
17        consentRequired: false,
18        strategy: "afterInteractive",
19        src: "https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID",
20      },
21      {
22        id: "gtag-init",
23        category: "functional",
24        consentRequired: false,
25        strategy: "afterInteractive",
26        content: `
27          window.dataLayer = window.dataLayer || [];
28          function gtag(){dataLayer.push(arguments);}
29          gtag('js', new Date());
30          gtag('config', 'YOUR_GA_ID');
31          gtag('consent', 'default', {
32            analytics_storage: 'denied',
33            ad_storage: 'denied',
34            ad_user_data: 'denied',
35            ad_personalization: 'denied'
36          });
37        `,
38      },
39    ],
40  };
41
42  return (
43    <ConsentManagerProvider config={consentConfig}>
44      <ConsentManager mode="modal" dark={false} />
45      {children}
46    </ConsentManagerProvider>
47  );
48};
49
50export default ConsentProvider;

Step 2: Add to Your App

Create app/providers.tsx:

1"use client";
2import ConsentProvider from "@/providers/consent-provider";
3import { ReactNode } from "react";
4
5export const Providers = ({ children }: { children: ReactNode }) => {
6  return <ConsentProvider>{children}</ConsentProvider>;
7};

Step 3: Wrap Your App

Update app/layout.tsx:

1import { Providers } from "./providers";
2import "./globals.css";
3
4export default function RootLayout({ children }: { children: React.ReactNode }) {
5  return (
6    <html lang="en">
7      <body>
8        <Providers>{children}</Providers>
9      </body>
10    </html>
11  );
12}

That's it! Your consent manager is now active. Users will see a banner on first visit and can manage preferences anytime.

🎛️ ConsentManager Component

The main UI component that handles everything automatically.

Basic Usage

1<ConsentManager mode="modal" dark={false} />

All Props

1interface ConsentManagerProps {
2  // Layout & Positioning
3  mode?: "modal" | "top" | "bottom"; // Banner position
4  dark?: boolean; // Dark/light theme
5  hideSettingsButton?: boolean; // Hide floating settings button
6
7  // Customization
8  colors?: ColorTheme; // Custom color scheme
9  labels?: CustomLabels; // Custom text/translations
10  classNames?: CustomClassNames; // CSS class overrides
11
12  // Behavior
13  categories?: ConsentCategory[]; // Override default categories
14  autoShow?: boolean; // Auto-show banner (default: true)
15  showDeclineAll?: boolean; // Show "Decline All" button
16  showAcceptAll?: boolean; // Show "Accept All" button
17}

🎨 Customization Examples

Custom Colors

1<ConsentManager
2  mode="modal"
3  colors={{
4    light: {
5      primary: "#6B50A2",
6      primaryHover: "#4A2F7F",
7      primaryText: "#FFFFFF",
8      settingsButton: "#645876",
9      settingsButtonHover: "#403D57",
10      settingsButtonText: "#FFFFFF",
11      background: "#FFFFFF",
12      text: "#403D57",
13      border: "#D6D9E1",
14    },
15    dark: {
16      primary: "#8B5FD6",
17      primaryHover: "#A67EE5",
18      primaryText: "#FFFFFF",
19      settingsButton: "#6B7280",
20      settingsButtonHover: "#9CA3AF",
21      settingsButtonText: "#FFFFFF",
22      background: "#1F2937",
23      text: "#F9FAFB",
24      border: "#374151",
25    },
26  }}
27/>

Custom Text/Labels

1<ConsentManager
2  mode="modal"
3  labels={{
4    banner: {
5      title: "We value your privacy",
6      description: "We use cookies to enhance your experience and analyze our traffic.",
7      acceptAll: "Accept All",
8      declineAll: "Decline All",
9      settings: "Customize",
10    },
11    modal: {
12      title: "Cookie Preferences",
13      description: "Choose which cookies you'd like to accept.",
14      save: "Save Preferences",
15      acceptAll: "Accept All",
16      declineAll: "Decline All",
17    },
18    categories: {
19      functional: {
20        title: "Essential Cookies",
21        description: "Required for basic site functionality.",
22      },
23      performance: {
24        title: "Performance Cookies",
25        description: "Help us analyze site usage and improve performance.",
26      },
27      advertising: {
28        title: "Advertising Cookies",
29        description: "Used to deliver relevant ads and measure campaign effectiveness.",
30      },
31      social: {
32        title: "Social Media Cookies",
33        description: "Enable social media features and content sharing.",
34      },
35    },
36  }}
37/>

Banner Positions

1// Modal overlay (recommended)
2<ConsentManager mode="modal" />
3
4// Top banner
5<ConsentManager mode="top" />
6
7// Bottom banner
8<ConsentManager mode="bottom" />

⚙️ Configuration Types

ConsentConfig

1interface ConsentConfig {
2  debug?: boolean; // Enable debug logging
3  defaults: CookiePreferences; // Default consent state
4  scripts: ConsentScript[]; // Scripts to manage
5}

CookiePreferences

1interface CookiePreferences {
2  functional: boolean; // Always true (required for site to work)
3  performance: boolean; // Analytics, monitoring
4  advertising: boolean; // Ads, marketing pixels
5  social: boolean; // Social media embeds, sharing
6}

ConsentScript

1interface ConsentScript {
2  id: string; // Unique identifier
3  category: ConsentCategory; // Cookie category
4  consentRequired?: boolean; // Require explicit consent
5  strategy?: "afterInteractive" | "lazyOnload" | "beforeInteractive";
6  src?: string; // External script URL
7  content?: string; // Inline script content
8  noscript?: string; // Fallback for no-JS
9  vendor?: string; // Third-party service name
10  default?: boolean; // Load by default
11}

📜 Script Examples

Google Analytics 4

1scripts: [
2  {
3    id: "gtag-js",
4    category: "performance",
5    consentRequired: true,
6    strategy: "afterInteractive",
7    src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
8    vendor: "Google Analytics",
9  },
10  {
11    id: "gtag-init",
12    category: "performance",
13    consentRequired: true,
14    strategy: "afterInteractive",
15    content: `
16      window.dataLayer = window.dataLayer || [];
17      function gtag(){dataLayer.push(arguments);}
18      gtag('js', new Date());
19      gtag('config', 'G-XXXXXXXXXX', {
20        send_page_view: true,
21        cookie_flags: 'SameSite=None;Secure'
22      });
23      // Required for Google Analytics v2 consent mode - must start with 'denied'
24      // These will be updated to 'granted' when user provides consent
25      gtag('consent', 'default', {
26        analytics_storage: 'denied',
27        ad_storage: 'denied',
28        ad_user_data: 'denied',
29        ad_personalization: 'denied'
30      });
31    `,
32    vendor: "Google Analytics",
33  },
34];

Facebook Pixel

1{
2  id: "facebook-pixel",
3  category: "advertising",
4  consentRequired: true,
5  strategy: "afterInteractive",
6  content: `
7    !function(f,b,e,v,n,t,s)
8    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
9    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
10    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
11    n.queue=[];t=b.createElement(e);t.async=!0;
12    t.src=v;s=b.getElementsByTagName(e)[0];
13    s.parentNode.insertBefore(t,s)}(window, document,'script',
14    'https://connect.facebook.net/en_US/fbevents.js');
15    fbq('init', 'YOUR_PIXEL_ID');
16    fbq('track', 'PageView');
17  `,
18  noscript: `<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1" />`,
19  vendor: "Meta",
20}

Hotjar

1{
2  id: "hotjar",
3  category: "performance",
4  consentRequired: true,
5  strategy: "afterInteractive",
6  content: `
7    (function(h,o,t,j,a,r){
8        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
9        h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
10        a=o.getElementsByTagName('head')[0];
11        r=o.createElement('script');r.async=1;
12        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
13        a.appendChild(r);
14    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
15  `,
16  vendor: "Hotjar",
17}

YouTube Embeds

1{
2  id: "youtube-embeds",
3  category: "social",
4  consentRequired: true,
5  strategy: "lazyOnload",
6  content: `
7    // Enable YouTube embeds when social cookies are accepted
8    document.querySelectorAll('[data-youtube-consent]').forEach(el => {
9      el.style.display = 'block';
10    });
11  `,
12  vendor: "YouTube",
13}

Twitter/X Embeds

1{
2  id: "twitter-widgets",
3  category: "social",
4  consentRequired: true,
5  strategy: "lazyOnload",
6  src: "https://platform.twitter.com/widgets.js",
7  vendor: "Twitter/X",
8}

🎛️ Programmatic Control

Open Settings Modal

1import { openConsentSettings } from "@consentry/ui";
2
3function PrivacyPage() {
4  return (
5    <div>
6      <h1>Privacy Policy</h1>
7      <button onClick={() => openConsentSettings()}>Manage Cookie Preferences</button>
8    </div>
9  );
10}

Get Current Preferences

1import { useConsentManager } from "@consentry/next";
2
3function MyComponent() {
4  const { preferences, updatePreferences } = useConsentManager();
5
6  return (
7    <div>
8      <p>Analytics enabled: {preferences.performance ? "Yes" : "No"}</p>
9      <button onClick={() => updatePreferences({ performance: !preferences.performance })}>
10        Toggle Analytics
11      </button>
12    </div>
13  );
14}

🎨 Advanced Styling

CSS Classes Available

1classNames={{
2  // Main wrapper
3  wrapper: "consent-wrapper",
4
5  // Banner classes
6  banner: {
7    container: "cookie-banner",
8    header: "cookie-banner-header",
9    title: "cookie-banner-title",
10    message: "cookie-banner-message",
11    closeButton: "cookie-banner-close-button",
12    buttonRow: "cookie-banner-button-row",
13    acceptButton: "cookie-banner-accept-button",
14    rejectButton: "cookie-banner-reject-button",
15    customizeButton: "cookie-banner-customize-button",
16    content: "cookie-banner-content",
17  },
18
19  // Modal classes
20  modal: {
21    overlay: "cookie-modal-overlay",
22    container: "cookie-modal-container",
23    title: "cookie-modal-title",
24    section: "cookie-modal-section",
25    row: "cookie-modal-row",
26    rowText: "cookie-modal-row-text",
27    rowTitle: "cookie-modal-row-title",
28    rowDescription: "cookie-modal-row-description",
29    toggleSwitch: "cookie-modal-switch",
30    toggleThumb: "cookie-modal-switch-thumb",
31    buttonRow: "cookie-modal-button-row",
32    saveButton: "cookie-modal-save-button",
33    cancelButton: "cookie-modal-cancel-button",
34  },
35
36  // Settings button
37  settingsButton: "cookie-settings-button",
38}}

Example: Custom styling

1/* Style the banner */
2.cookie-banner {
3  border-radius: 12px;
4  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
5  border: 1px solid #e5e7eb;
6}
7
8.cookie-banner-title {
9  font-weight: 700;
10  font-size: 1.2rem;
11  color: #1f2937;
12}
13
14.cookie-banner-accept-button {
15  background: #6b50a2;
16  color: white;
17  border-radius: 6px;
18  padding: 8px 16px;
19}
20
21/* Style the modal */
22.cookie-modal-overlay {
23  backdrop-filter: blur(4px);
24}
25
26.cookie-modal-container {
27  border-radius: 16px;
28  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
29}
30
31.cookie-modal-switch {
32  background: #e5e7eb;
33  transition: all 0.2s;
34}
35
36.cookie-modal-switch[data-checked="true"] {
37  background: #6b50a2;
38}
39
40/* Style the settings button */
41.cookie-settings-button {
42  border-radius: 50%;
43  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
44  background: #6b50a2;
45  color: white;
46}

🌍 Internationalization

Multi-language Support

1const getLabels = (locale: string) => {
2  const translations = {
3    en: {
4      banner: {
5        title: "We value your privacy",
6        description: "We use cookies to enhance your experience.",
7        acceptAll: "Accept All",
8        declineAll: "Decline All",
9        settings: "Settings",
10      },
11    },
12    es: {
13      banner: {
14        title: "Valoramos tu privacidad",
15        description: "Utilizamos cookies para mejorar tu experiencia.",
16        acceptAll: "Aceptar Todo",
17        declineAll: "Rechazar Todo",
18        settings: "Configuración",
19      },
20    },
21  };
22
23  return translations[locale] || translations.en;
24};
25
26// Usage
27<ConsentManager labels={getLabels("es")} />;

🔧 Environment-Specific Configs

Development vs Production

1const consentConfig: ConsentConfig = {
2  debug: process.env.NODE_ENV === "development",
3  defaults: {
4    functional: true,
5    performance: process.env.NODE_ENV === "production",
6    advertising: false,
7    social: false,
8  },
9  scripts: process.env.NODE_ENV === "production" ? productionScripts : [],
10};

🚨 Common Issues & Solutions

Scripts Not Loading

1// ❌ Wrong - script won't be managed
2<Script src="https://analytics.example.com/script.js" />;
3
4// ✅ Correct - add to consent config
5scripts: [
6  {
7    id: "analytics",
8    category: "performance",
9    consentRequired: true,
10    strategy: "afterInteractive",
11    src: "https://analytics.example.com/script.js",
12  },
13];

Styling Not Applied

1// ❌ Wrong - CSS loaded after component
2import ConsentManager from "@consentry/ui";
3import "./consent-styles.css";
4
5// ✅ Correct - CSS loaded first
6import "./consent-styles.css";
7import ConsentManager from "@consentry/ui";

Hydration Issues

1// ❌ Wrong - server/client mismatch
2const [mounted, setMounted] = useState(false);
3useEffect(() => setMounted(true), []);
4if (!mounted) return null;
5
6// ✅ Correct - use dynamic import
7import dynamic from "next/dynamic";
8const ConsentManager = dynamic(() => import("@consentry/ui"), { ssr: false });

📚 Full Example

Complete setup with custom styling, multiple analytics, and internationalization:

1"use client";
2import { ConsentConfig, ConsentManagerProvider } from "@consentry/next";
3import ConsentManager from "@consentry/ui";
4import { useRouter } from "next/navigation";
5
6const ConsentProvider = ({ children }: { children: React.ReactNode }) => {
7  const router = useRouter();
8
9  const consentConfig: ConsentConfig = {
10    debug: process.env.NODE_ENV === "development",
11    defaults: {
12      functional: true,
13      performance: false,
14      advertising: false,
15      social: false,
16    },
17    scripts: [
18      // Google Analytics
19      {
20        id: "gtag-js",
21        category: "performance",
22        consentRequired: true,
23        strategy: "afterInteractive",
24        src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
25        vendor: "Google Analytics",
26      },
27      {
28        id: "gtag-init",
29        category: "performance",
30        consentRequired: true,
31        strategy: "afterInteractive",
32        content: `
33          window.dataLayer = window.dataLayer || [];
34          function gtag(){dataLayer.push(arguments);}
35          gtag('js', new Date());
36          gtag('config', 'G-XXXXXXXXXX');
37          gtag('consent', 'default', {
38            analytics_storage: 'denied',
39            ad_storage: 'denied'
40          });
41        `,
42        vendor: "Google Analytics",
43      },
44
45      // Facebook Pixel
46      {
47        id: "facebook-pixel",
48        category: "advertising",
49        consentRequired: true,
50        strategy: "afterInteractive",
51        content: `
52          // Facebook Pixel code here
53        `,
54        vendor: "Meta",
55      },
56
57      // Hotjar
58      {
59        id: "hotjar",
60        category: "performance",
61        consentRequired: true,
62        strategy: "afterInteractive",
63        content: `
64          // Hotjar code here
65        `,
66        vendor: "Hotjar",
67      },
68    ],
69  };
70
71  return (
72    <ConsentManagerProvider config={consentConfig}>
73      <ConsentManager
74        mode="modal"
75        dark={false}
76        colors={{
77          light: {
78            primary: "#6B50A2",
79            primaryHover: "#4A2F7F",
80            primaryText: "#FFFFFF",
81            settingsButton: "#645876",
82            settingsButtonHover: "#403D57",
83            settingsButtonText: "#FFFFFF",
84            background: "#FFFFFF",
85            text: "#403D57",
86            border: "#D6D9E1",
87          },
88        }}
89        labels={{
90          banner: {
91            title: "We respect your privacy",
92            description:
93              "We use cookies to improve your experience and analyze our website traffic. You can customize your preferences below.",
94            acceptAll: "Accept All Cookies",
95            declineAll: "Decline All",
96            settings: "Customize Settings",
97          },
98          modal: {
99            title: "Cookie Preferences",
100            description:
101              "We use different types of cookies to optimize your experience on our website. You can customize your preferences for each category below.",
102            save: "Save My Preferences",
103            acceptAll: "Accept All",
104            declineAll: "Decline All",
105          },
106        }}
107        classNames={{
108          banner: "rounded-lg shadow-xl",
109          bannerTitle: "text-xl font-bold",
110          settingsButton: "rounded-full shadow-lg",
111        }}
112      />
113      {children}
114    </ConsentManagerProvider>
115  );
116};
117
118export default ConsentProvider;

🔗 Related Packages

@consentry/core — Core consent logic (framework-agnostic)
@consentry/next — Next.js integration hooks and providers

📄 License

No vulnerabilities found.

No security vulnerabilities found.

@consentry/ui

Installations

Developer Guide

Yes

CommonJS, ESM

18.20.8

10.8.2

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

consentryio

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@consentry/ui

✨ What You Get

📦 Installation

🚀 Quick Start (5 minutes)

Step 1: Create the Consent Provider

Step 2: Add to Your App

Step 3: Wrap Your App

🎛️ ConsentManager Component

Basic Usage

All Props

🎨 Customization Examples

Custom Colors

Custom Text/Labels

Banner Positions

⚙️ Configuration Types

ConsentConfig

CookiePreferences

ConsentScript

📜 Script Examples

Google Analytics 4

Facebook Pixel

Hotjar

YouTube Embeds

Twitter/X Embeds

🎛️ Programmatic Control

Open Settings Modal

Get Current Preferences

🎨 Advanced Styling

CSS Classes Available

🌍 Internationalization

Multi-language Support

🔧 Environment-Specific Configs

Development vs Production

🚨 Common Issues & Solutions

Scripts Not Loading

Styling Not Applied

Hydration Issues

📚 Full Example

🔗 Related Packages

📄 License