Cookie Banner · Sapphire UI

Collect and revisit privacy choices for optional cookies. Use it with consent-aware integrations so the visitor’s decision controls what runs.

Examples

Preferences

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";
import { useState } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { CookieBanner } from "@kongmy-dev/sapphire-ui/cookie-banner";

function CookiePreferences() {
  const [open, setOpen] = useState(true);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Cookie preferences</Button>
      <CookieBanner forceShow={open} onClose={() => setOpen(false)} />
    </>
  );
}

export default CookiePreferences;

Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-cookie-preview {
  position: relative;
  min-height: calc(var(--space-32) * 2);
}

.docs-cookie-preview .sp-cookie-banner {
  position: absolute;
  z-index: auto;
}

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Props

Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.

CookieBanner

CookieBanner component props
Prop	Type	Required	Local default
`forceShow`	`boolean \| undefined`	No	`false`
`onClose`	`(() => void) \| undefined`	No	—

Setup

bun add @kongmy-dev/sapphire-ui react react-dom

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import { CookieBanner } from "@kongmy-dev/sapphire-ui/cookie-banner";

Mixing package and vendored components? Follow application setup.