Content gatePro

Sensitive content gate with the reason and a choice to view, blurred until chosen.

Markdown

On this page

ProA photo covered by the person's own filter, with the reason and the choice.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/content-gate

Usage

tsx

import { ContentGate } from "@/components/ui/chatcn/pro/content-gate"

<ContentGate reason="Close up of a large predator" source="Matches your filter for wild animals.">
  <img src={photo} alt="A brown bear looking at the camera" />
</ContentGate>

The blur is the content itself, scaled 8% so soft edges never show, and the content is inert until the person chooses View: no tab stops or link clicks behind the cover, and nothing read aloud. The source line says who covered it, so people can judge the call. Keep hidden is a real choice: the cover dims to one line with Show anyway. Viewed content gets Hide again in the corner.

Examples

States

ProText, viewed, kept hidden and small.

Props

Prop	Type	Notes
`reason`	`string`	What is covered, plainly
`source`	`string`	Who or what covered it
`children`	`ReactNode`	The covered content
`state`, `defaultState`, `onStateChange`	`"pending" \| "shown" \| "hidden"`	Controlled or uncontrolled
`size`	`"sm" \| "md"`	Default `md`
`labels`	`Partial<Record<...>>`	Button text, for translation

Keyboard

Key	Action
Tab	Reach View and Keep hidden; covered content is skipped
Enter or Space	Choose

Accessibility

The cover is a labelled region named by the reason.
Covered content is inert and hidden from screen readers until viewed.

Motion

View clears the blur and scale in 280 ms, a reveal rather than a pop. Reduced motion keeps only the fade.