> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boxpressd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Age Verification

> Require visitors to verify their age before accessing age-restricted content.

Many businesses within the cigar industry choose to restrict access to their websites and marketing content to visitors who are of legal smoking age.

The Boxpressd Sites SDK includes an age verification component that can be added to any website with minimal configuration.

The component displays a modal before visitors access your content and remembers verified users to reduce friction on future visits.

## Available Components

| Component | Description |
| - | - |
| `AgeVerification` | Displays an age verification modal before allowing access to the site. |

## Basic Usage

Add the component near the root of your application.

```tsx id="3j6r4k" theme={null}
import { AgeVerification } from "@boxpressd/sites-sdk/compliance"

export default function Layout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <AgeVerification />
      {children}
    </>
  )
}
```

When a visitor arrives for the first time, the modal will be displayed automatically.

## How It Works

The component:

1. Displays an age verification prompt.
2. Requires the visitor to confirm they are of legal age.
3. Stores the verification result locally.
4. Prevents the prompt from appearing again until the verification expires.

No backend configuration is required.

## Default Experience

The default verification flow includes:

* Age confirmation prompt
* Acceptance action
* Exit action
* Local storage persistence
* Mobile-friendly design

```tsx id="nbb1z7" theme={null}
<AgeVerification />
```

## Custom Message

Customize the messaging shown to visitors.

```tsx id="sq4e6e" theme={null}
<AgeVerification
  title="Age Restricted Content"
  description="You must be of legal smoking age in your jurisdiction to access this website."
/>
```

## Custom Button Labels

```tsx id="g6t85r" theme={null}
<AgeVerification
  confirmLabel="I Am of Legal Age"
  cancelLabel="Exit Site"
/>
```

## Redirecting Underage Visitors

You may choose to redirect visitors who do not meet age requirements.

```tsx id="nnv2r4" theme={null}
<AgeVerification
  redirectUrl="https://www.google.com"
/>
```

Common destinations include:

* Corporate landing pages
* Educational resources
* Regulatory information
* Alternative websites

## Verification Duration

By default, verified visitors are remembered for a period of time.

```tsx id="0rtv2z" theme={null}
<AgeVerification
  rememberDays={30}
/>
```

### Example: 7 Days

```tsx id="knn2l6" theme={null}
<AgeVerification
  rememberDays={7}
/>
```

### Example: 90 Days

```tsx id="d0cl07" theme={null}
<AgeVerification
  rememberDays={90}
/>
```

## Props

| Prop | Type | Description |
| - | - | - |
| `title` | `string` | Modal title. |
| `description` | `string` | Verification message. |
| `confirmLabel` | `string` | Confirmation button text. |
| `cancelLabel` | `string` | Exit button text. |
| `redirectUrl` | `string` | Optional URL used when access is denied. |
| `rememberDays` | `number` | Number of days verification should persist. |
| `className` | `string` | Additional CSS classes. |

## Example: Lounge Website

```tsx id="3md0pj" theme={null}
<AgeVerification
  title="Welcome to Stogies"
  description="This website contains information about premium cigars and tobacco products. You must be of legal smoking age to continue."
  confirmLabel="Enter Site"
  cancelLabel="Leave Site"
  rememberDays={30}
/>
```

## Example: Brand Website

```tsx id="n3ql3h" theme={null}
<AgeVerification
  title="Age Verification Required"
  description="By entering this website, you confirm that you are of legal smoking age in your jurisdiction."
  confirmLabel="Continue"
  cancelLabel="Exit"
/>
```

## Styling

The age verification modal inherits Boxpressd theme variables.

```css id="kv9n1j" theme={null}
:root {
  --bxp-primary: #d3a966;
  --bxp-border-radius: 16px;
}
```

## Custom Styling

```tsx id="l3guzv" theme={null}
<AgeVerification
  className="custom-age-gate"
/>
```

```css id="xzk9z4" theme={null}
.custom-age-gate {
  --bxp-primary: #b8894f;
}
```

## Local Storage

The component stores verification status in local storage.

Example flow:

```txt id="tjlwm8" theme={null}
Visitor verifies age
      ↓
Verification stored locally
      ↓
Visitor returns later
      ↓
Prompt skipped until expiration
```

This provides a smoother experience for returning visitors.

## Accessibility

The component is designed to be accessible and keyboard-friendly.

Features include:

* Keyboard navigation
* Focus management
* Screen reader support
* Mobile responsiveness

## Compliance Considerations

Age verification requirements vary by jurisdiction.

The Boxpressd Sites SDK provides a user-friendly verification mechanism, but businesses remain responsible for ensuring compliance with applicable laws and regulations.

Consider consulting legal counsel if your business operates across multiple jurisdictions.

## Common Use Cases

### Entire Website

```tsx id="dmsj1s" theme={null}
<AgeVerification />
```

### Premium Cigar Brand

```tsx id="9g1d5j" theme={null}
<AgeVerification
  title="Premium Tobacco Products"
  description="This website is intended only for adults of legal smoking age."
/>
```

### Lounge Website

```tsx id="7wmb6o" theme={null}
<AgeVerification
  title="Before You Enter"
  description="Please confirm that you are of legal smoking age."
  rememberDays={30}
/>
```

## Best Practices

* Place the component near the root of your application.
* Keep messaging concise and clear.
* Use a reasonable verification duration.
* Match the modal styling to your brand.
* Provide a clear exit option.
* Review local regulations regularly.

## Troubleshooting

### Verification Appears Every Visit

Verify:

* Local storage is enabled.
* `rememberDays` is configured correctly.
* Browser privacy settings are not clearing storage.

### Styling Is Not Applied

Verify:

* The component is wrapped by the provider.
* Theme variables are loaded correctly.
* Custom CSS is loaded after SDK styles.

### Redirect Is Not Working

Verify:

* The URL is valid.
* The redirect destination is publicly accessible.

## Next Steps

Continue to:

* Theming
* Events
* Reviews
* Maps

These guides explain how to customize and extend your Boxpressd-powered website experience.