Skip to main content
The Data Reveal component provides a secure and elegant way to display sensitive information like API keys, personal data, or confidential details with beautiful animations and user control.

​
Installation

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

​
Usage

The Data Reveal component follows a compound component pattern for maximum flexibility:
Basic example showing how to reveal sensitive data on demand.

​
Component Structure

The component uses a compound component pattern with four main parts: 
<DataReveal>
  <RevealButton />
  <RevealContainer>
    <RevealItem />
  </RevealContainer>
</DataReveal>

​
API Reference

​
DataReveal

The root component that manages the reveal state and provides context to child components.
​
children
ReactNode
required
The child components (Button, Container, Items)
​
defaultRevealed
boolean
default:"false"
Whether content is revealed by default
​
onToggle
(isRevealed: boolean) => void
Callback function called when reveal state changes
​
disabled
boolean
default:"false"
Whether the reveal functionality is disabled
​
autoHide
boolean
default:"false"
Whether to automatically hide content after reveal
​
autoHideDelay
number
default:"3000"
Delay in milliseconds before auto-hiding (when autoHide is true)

​
RevealButton

The button that triggers the reveal/hide animation.
​
children
ReactNode
Custom button content (overrides text prop)
​
text
string
default:"'Reveal'"
Button text when no children provided
​
className
string
default:"''"
Additional CSS classes for the button

​
RevealContainer

The container that wraps and animates the reveal items.
​
children
ReactNode
required
The RevealItem components to animate
​
className
string
default:"''"
Additional CSS classes for the container

​
RevealItem

Individual items that animate in with staggered timing.
​
children
ReactNode
Custom item content (overrides content prop)
​
content
string
Text content when no children provided
​
index
number
default:"0"
Animation index for staggered timing (starts from 0)
​
className
string
default:"''"
Additional CSS classes for the item

​
Examples

​
With Auto-Hide

Automatically hide revealed content after a delay for enhanced security: 
<DataReveal autoHide autoHideDelay={5000}>
  <RevealButton text="Show API Key" />
  <RevealContainer>
    <RevealItem content="sk-1234567890abcdef" />
  </RevealContainer>
</DataReveal>

​
With Callback

Track when content is revealed or hidden: 
<DataReveal onToggle={(isRevealed) => console.log('Revealed:', isRevealed)}>
  <RevealButton text="Show Details" />
  <RevealContainer>
    <RevealItem content="Sensitive information" />
  </RevealContainer>
</DataReveal>

​
Custom Content

Use custom React components instead of text: 
<DataReveal>
  <RevealButton>
    <Eye className="mr-2" />
    View Details
  </RevealButton>
  <RevealContainer>
    <RevealItem>
      <div className="flex items-center gap-2">
        <Mail className="w-4 h-4" />
        [email protected]
      </div>
    </RevealItem>
  </RevealContainer>
</DataReveal>

​
Features

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.

Build docs developers (and LLMs) love

Get started for freeTalk to us