Getting Started

Privacy-focused UI components built with shadcn/ui and Tailwind CSS that integrate seamlessly with Koroflow' core functionality.

Quick Start (5 minutes)

Koroflow provides a complete consent management system out of the box. Here's how to get up and running:

1. Install the packages

npm install @koroflow/core-react @koroflow/dev-tools

First Install the Consent Manager:

npx shadcn@latest add "https://koroflow.com/r/consent-solution

Then Wrap your application with the ConsentManagerProvider:

import { ConsentManagerProvider } from "@koroflow/core-react";
 
export default function App() {
  return (
    <ConsentManagerProvider
      initialGdprTypes={[
        "necessary",
        "marketing",
        "functionality",
        "measurement",
      ]}
    >
      {/* Your app content */}
    </ConsentManagerProvider>
  );
}

Add it to your layout:

import { CookieBanner } from "@koroflow/ui";
 
export default function Layout() {
  return (
    <>
      <CookieBanner />
      {/* Your layout content */}
    </>
  );
}

That's it! You now have a fully functional consent management system.

Koroflow makes it easy to integrate with your analytics tools. Here's how to track consent changes:

import { useConsentManager } from "@koroflow/core-react";
import { PostHog } from "posthog-js";
 
function ConsentTracker() {
  const { setCallback } = useConsentManager();
 
  useEffect(() => {
    // Track when user updates their consent preferences
    setCallback("onConsentUpdated", (newConsents) => {
      PostHog.capture("consent_updated", {
        marketing: newConsents.marketing,
        analytics: newConsents.measurement,
        functional: newConsents.functionality,
      });
    });
 
    // Track when user saves their preferences
    setCallback("onConsentSaved", (consents) => {
      PostHog.capture("consent_saved", {
        consents,
      });
    });
  }, [setCallback]);
 
  return null;
}

Respecting User Preferences

Once you have consent preferences, use them to control your analytics:

function AnalyticsWrapper() {
  const { consents } = useConsentManager();
 
  useEffect(() => {
    // Only initialize analytics if user has consented
    if (consents.measurement) {
      PostHog.init("your-project-key");
    }
  }, [consents.measurement]);
 
  return null;
}

Advanced Features

Styling the UI

All components are built with shadcn/ui and Tailwind, making customization simple:

<CookieBanner
  className="bg-brand dark:bg-brand-dark"
  buttonClassName="bg-accent"
/>

Koroflow includes development tools for testing:

import KoroflowDevTools from "@koroflow/dev-tools";
 
function App() {
  return (
    <>
      <KoroflowDevTools />
      {/* Your app */}
    </>
  );
}

What's Next?

Explore the UI Components for advanced customization
Learn about Privacy Regulations and how Koroflow helps you comply

Getting Started

On this page