Data Reveal

An animated component that reveals sensitive content with smooth staggered animations and auto-hide functionality

Usage

Basic Usage

Show Details

data-reveal-demo.tsx

"use client";

import { DataReveal, RevealButton, RevealContainer, RevealItem } from "@/components/data-reveal";

export default function DataRevealDemo() {
    return (
        <div className="space-y-6">
            <DataReveal>
                <RevealButton text="Show Details" />
                <RevealContainer className="gap-2">
                    <RevealItem content="[email protected]" />
                    <RevealItem content="+1 234-567-8900" />
                    <RevealItem content="#12345" />
                </RevealContainer>
            </DataReveal>
        </div>
    );
}

Installation

Install the Data Reveal component using your preferred package manager.

npx shadcn@latest add https://rigidui.com/r/data-reveal.json

Features

The Data Reveal component provides a secure and elegant way to display sensitive information with beautiful animations and user control.

Smooth Animations

Beautiful staggered animations with configurable timing, blur effects, and smooth transitions for revealing content.

Security Focused

Perfect for displaying sensitive information like API keys, personal data, or confidential details with user consent.

Auto-hide Feature

Optional auto-hide functionality that automatically conceals revealed content after a specified delay for enhanced security.

Highly Customizable

Compound component pattern with full control over styling, content, and behavior for each reveal item.

Component Structure

The Data Reveal component follows a compound component pattern for maximum flexibility:

<DataReveal>
  <RevealButton />
  <RevealContainer>
    <RevealItem />
  </RevealContainer>
</DataReveal>

Props

DataReveal

Prop	Type	Default
`children`	`ReactNode`	-
`defaultRevealed?`	`boolean`	`false`
`onToggle?`	`(isRevealed: boolean) => void`	`undefined`
`disabled?`	`boolean`	`false`
`autoHide?`	`boolean`	`false`
`autoHideDelay?`	`number`	`3000`

RevealButton

Prop	Type	Default
`children?`	`ReactNode`	`undefined`
`text?`	`string`	`'Reveal'`
`className?`	`string`	`''`

RevealContainer

Prop	Type	Default
`children`	`ReactNode`	-
`className?`	`string`	`''`

RevealItem

Prop	Type	Default
`children?`	`ReactNode`	`undefined`
`content?`	`string`	`undefined`
`index?`	`number`	`0`
`className?`	`string`	`''`