AgeGate

Age verification modal for React apps and plain HTML sites. Ships as a React component and as an <age-gate> custom element (IIFE for static pages).

Features

• Three confirmation modes: date inputs, calendar picker, or yes/no
• Persists verification in localStorage (ageVerified)
• Customizable colors, logo, fonts, background image, and content panel
• Optional theme="elfy" layout: compact frosted card with solid Yes and outline No
• Cloudinary fetch URLs get an automatic blurred LQIP while the full background loads
• Style isolation via Shadow DOM on the web-component path

Install

npm install @jmeirinkmarimed/age-gate

Peer dependency: React 17 or 18.

React

import { AgeGate } from '@jmeirinkmarimed/age-gate';

function App() {
  return (
    <AgeGate
      theme="elfy"
      minAge={21}
      confirmationType="yesNo"
      headerText="Are you 21 or older?"
      subHeaderText=""
      logo="path/to/your/logo.png"
      logoWidth="120px"
      backgroundColor="#789b4a"
      backgroundImage="path/to/background.jpg"
      backgroundBrightness={49}
      textColor="#f2e4b1"
      buttonColor="#f2e4b1"
      buttonTextColor="#093a41"
      buttonHoverColor="#e8d89a"
      buttonHoverTextColor="#093a41"
      noButtonColor="#f2e4b1"
      panelBackground="rgba(9, 58, 65, 0.62)"
      panelBorderRadius="20px"
    />
  );
}

HTML

<script src="https://unpkg.com/@jmeirinkmarimed/age-gate/dist/age-gate.min.js"></script>

<age-gate
  theme="elfy"
  min-age="21"
  confirmation-type="yesNo"
  header-text="Are you 21 or older?"
  sub-header-text=""
  logo="path/to/your/logo.png"
  logo-width="120px"
  background-color="#789b4a"
  background-image="path/to/background.jpg"
  background-brightness="49"
  text-color="#f2e4b1"
  button-color="#f2e4b1"
  button-text-color="#093a41"
  button-hover-color="#e8d89a"
  button-hover-text-color="#093a41"
  no-button-color="#f2e4b1"
  panel-background="rgba(9, 58, 65, 0.62)"
  panel-border-radius="20px"
></age-gate>

Attribute names are kebab-case versions of the React props.

Props / attributes

| Prop | Type | Default | Description | |------|------|---------|-------------| | minAge | number | — | Minimum age required (required) | | confirmationType | "dateInputs" | "calendarPicker" | "yesNo" | "dateInputs" | Verification UI | | headerText | string | — | Main headline (required) | | subHeaderText | string | — | Supporting text (required; hide with "") | | logo | string | — | Logo image URL (required) | | logoWidth | string | "150px" ("120px" for elfy) | Logo max-width | | backgroundColor | string | rgba(0, 0, 0, 0.9) | Modal background color | | backgroundImage | string | — | Full-bleed background image URL | | backgroundPlaceholder | string | auto (Cloudinary) | LQIP override; Cloudinary fetch URLs get a blurred placeholder automatically | | backgroundBrightness | number | 100 (50 for elfy) | Dim background image (0–100) | | textColor | string | #ffffff | Text color | | buttonColor | string | #ffffff | Yes / confirm button background | | buttonTextColor | string | #000000 | Yes / confirm button text | | buttonHoverColor | string | #e6e6e6 | Button hover background | | buttonHoverTextColor | string | #000000 | Button hover text | | noButtonColor | string | textColor | Outline No border/text (theme="elfy") | | yesButtonText | string | "Yes" | Yes button label | | noButtonText | string | "No" | No button label | | confirmButtonText | string | "Confirm" | Confirm button label (date modes) | | fontFamily | string | inherit | Font stack | | gradient | string | — | CSS gradient behind content; adds a rounded panel when set | | panelBackground | string | — (rgba(255,255,255,0.5) for elfy) | Solid/rgba content panel fill | | panelBorderRadius | string | — (12px for elfy) | Content panel corner radius | | theme | "elfy" | — | Frosted card + outline No (forces Yes/No) | | underageRedirectUrl | string | https://www.google.com | Redirect when the user fails verification |

Confirmation types

• dateInputs — MM / DD / YYYY fields with auto-focus progression
• calendarPicker — native date input
• yesNo — Yes / No buttons

theme="elfy" always uses Yes/No with a compact frosted panel, solid Yes, and outline No.

Custom fonts

Import fonts in your app (or <link> / @font-face in HTML). The component inherits font-family from the page unless fontFamily is set.

Local development

This repo uses Bun only (bun.lock). Do not commit package-lock.json.

bun install
bun run dev              # playground → http://localhost:5173
bun run build            # dist/ (ES + CJS + UMD + IIFE + .d.ts)
bun run examples:serve   # brands :8080, playground :5173, react-consumer :5174
bun run lint

Brand HTML fixtures live in examples/brands/ and load a locally built age-gate.min.js (gitignored; created by examples:serve).

Publishing

bun run build produces:

| File | Purpose | |------|---------| | dist/age-gate.es.js | ESM (React peer externals) | | dist/age-gate.cjs.js | CommonJS | | dist/age-gate.umd.js | UMD | | dist/age-gate.min.js | Standalone IIFE (React bundled) for <script> / unpkg | | dist/index.d.ts | TypeScript declarations |

Importing the package registers <age-gate> as a side effect. The IIFE build also exposes window.React / window.ReactDOM.

See CONTRIBUTING.md for contribution notes.