Privacy choices

Privacy choices card whose shield fills as categories are allowed; saving stamps it and folds the card into a small Change pill.

View as Markdown

<hf-consent>· loading

Tryswitch on Analytics, then Save.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-consent>

Props

labelremounts

descriptionremounts

<HfConsent
  label="Your privacy choices"
  description="We only use what you allow. You can change this any time in Settings."
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-consent

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-consent.json

Usage

import { HfConsent } from "@/components/lumesec/hf-consent";

export function Example() {
  return (
    <HfConsent />
  );
}

Behaviour

The shield fills as you allow more categories. Saving stamps it with a ring and the card folds into a small “Change” pill.

API reference

Attributes

labelReact proplabelTypestringDefaultYour privacy choices

Card title. Read once on connect.

descriptionReact propdescriptionTypestringDefaultWe only use what you allow. You can change this any time in Settings.

Text under the title. Read once on connect.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

consentReact proponConsentDetail{ analytics: boolean, personalisation: boolean }

Fires on Reject all, Save choices or Accept all with the chosen categories. Necessary is always on and not reported.

Accessibility

The card is a role="region" labelled Privacy choices.
Categories are native checkboxes styled as switches, each inside a <label> with its description; Necessary is checked and disabled.
After saving, the card is replaced by a pill reading Saved · <n> of 3 categories on with a Change button; focus is not moved to it. Change moves focus to Save choices.
The shield is drawn on an aria-hidden canvas.
Reduced motion: the shield level changes at once, there is no stamp ring and the card folds immediately.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --card, --foreground, --lumesec, --lumesec-foreground, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-muted, --ui-on-accent, --ui-raised, --ui-surface and --ui-track.

Notes

The component does not store choices or set cookies; persist the consent detail yourself. It always starts with Analytics and Personalisation off.
The categories are fixed: Necessary, Analytics and Personalisation.
Without reduced motion, the shield redraws every frame while the element is visible.

<hf-card>

Media cardhf-card

<hf-hero>

Herohf-hero

<hf-reveal>

Secret fieldhf-reveal

<hf-marquee>

Logo marqueehf-marquee

Was this page helpful?

Related