Scratch Card

<bh-scratch-card> | BharatScratchCard

The Scratch Card component creates an interactive element that reveals hidden content when scratched, similar to a lottery scratch card. It’s perfect for promotions, rewards, games, and interactive experiences.

Open in

Exclusive Component

🎉 Special Thanks To

bharatui.com

Free Gift!

Redeem your special gift

Basic Scratch Card

A simple scratch card with default settings that reveals text when scratched.

Preview

Open in

bharatui.com

HTML

<bh-scratch-card
      width="300px"
      height="200px"
      scratch-color="#e11d48"
      reveal-percentage="30"
      reveal-text="Welcome to Bharat UI">
      <div>
        <img src="<img url>" alt="Bharat UI" style="border-radius: 4px;" height="80" width="80" />
        <span style="color: black;">bharatui.com</span>
      </div>
    </bh-scratch-card>

React

import { BharatScratchCard } from 'bharat-ui/react/components/scratchcard';

const App = () => {
  return (
    <BharatScratchCard
      width="300px"
      height="200px"
      scratch-color="#e11d48"
      reveal-percentage="30"
      reveal-text="Welcome to Bharat UI">
      <div>
        <img src="<img url>" alt="Bharat UI"/>
        <span>bharatui.com</span>
      </div>
    </BharatScratchCard>
  );
};

export default App;

Custom Overlay Color

Change the color of the scratch surface to match your design.

Preview

Open in

Golden Ticket!

HTML

<bh-scratch-card
  width="200px"
  height="200px"
  overlay-color="#FFD700">
  Golden Ticket!
</bh-scratch-card>

React

import { BharatScratchCard } from 'bharat-ui/react/components/scratchcard';

const App = () => {
  return (
    <BharatScratchCard
         width="200px"
        height="200px"
        overlay-color="#FFD700">
        Golden Ticket!
    </BharatScratchCard>
  );
};

export default App;

Promotional Card

A more complex example showing how to use the scratch card for promotions.

Preview

Open in

Scratch to reveal your discount!

25% OFFUse code: BHARAT25

Valid until December 31, 2025

HTML

<div style="display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; background-color: #f8f9fa; border-radius: 8px;">
  <h3 style="margin: 0; color: #333;">Scratch to reveal your discount!</h3>
  <bh-scratch-card
    width="200px"
    height="200px"
    overlay-color="#3B82F6"
    auto-reveal
    scratch-width="40">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
      <span style="font-size: 32px; font-weight: bold; color: #fff;">25% OFF</span>
      <span style="color: #fff;">Use code: BHARAT25</span>
    </div>
  </bh-scratch-card>
  <p style="margin: 0; font-size: 14px; color: #666;">Valid until December 31, 2025</p>
</div>

React

import { BharatScratchCard } from 'bharat-ui/react/components/scratchcard'

const App = () => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: '20px',
      padding: '20px',
      backgroundColor: '#f8f9fa',
      borderRadius: '8px'
    }}>
      <h3 style={{ margin: 0, color: '#333' }}>Scratch to reveal your discount!</h3>
      <BharatScratchCard
        width="200px"
        height="200px"
        overlay-color="#3B82F6"
        auto-reveal
        scratch-width="40">
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '10px'
        }}>
          <span style={{ fontSize: '32px', fontWeight: 'bold', color: '#fff' }}>25% OFF</span>
          <span style={{ color: '#fff' }}>Use code: BHARAT25</span>
        </div>
      </BharatScratchCard>
      <p style={{ margin: 0, fontSize: '14px', color: '#666' }}>Valid until December 31, 2025</p>
    </div>
  );
};

export default PromotionalCardExample;

Image Reveal

Reveal an image when the card is scratched.

Preview

Open in

Surprise!

HTML

<bh-scratch-card
  width="200px"
  height="200px"
  overlay-color="#222222"
  auto-reveal>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
    <img src="<add img url>" alt="Surprise Image" style="border-radius: 4px;" />
    <span>Surprise!</span>
  </div>
</bh-scratch-card>

React

import { BharatScratchCard } from 'bharat-ui/react/components/scratchcard'

const App = () => {
  return (
    <BharatScratchCard
      width="200px"
      height="200px"
      overlay-color="#222222"
      auto-reveal>
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '10px'
      }}>
        <img
          src="<add image url>"
          alt="Surprise Image"
          style={{ borderRadius: '4px' }}
        />
        <span>Surprise!</span>
      </div>
    </BharatScratchCard>
  );
};

export default App;

Discount Offer Variant

Reveal an image when the card is scratched.

Preview

Open in

Limited Time Offer

Special Thanks To

HTML

<bh-scratch-card
  width="200px"
  height="200px"
  overlay-color="#222222"
  auto-reveal>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
    <img src="<add img url>" alt="Surprise Image" style="border-radius: 4px;" />
    <span>Surprise!</span>
  </div>
</bh-scratch-card>

React

import { BharatScratchCard } from 'bharat-ui/react/components/scratchcard'

const App = () => {
  return (
    <BharatScratchCard
      width="200px"
      height="200px"
      overlay-color="#222222"
      auto-reveal>
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '10px'
      }}>
        <img
          src="https://placekitten.com/250/150"
          alt="Surprise Image"
          style={{ borderRadius: '4px' }}
        />
        <span>Surprise!</span>
      </div>
    </BharatScratchCard>
  );
};

export default App;

Properties

Property	Type	Description
width	string	Width of the scratch card (e.g. 300px)
height	string	Height of the scratch card (e.g. 200px)
scratch-color	string	Scratch layer color (e.g. #e11d48)
background-color	string	Background behind the scratch layer
border-radius	string	Rounded corners of the card (default: 12px)
reveal-text	string	Text shown after reveal, if no custom content is slotted
reveal-percentage	number	Percentage (0-100) of area to scratch before revealing
confetti	boolean	Enables confetti animation on reveal
card-id	string	Unique ID to persist scratch state using localStorage
expiry-days	number	Number of days before the scratch card expires
already-revealed	boolean	If true, the card starts already revealed
is-expired	boolean	If true, the card will render as expired (overrides expiry-days)
reward-type	string	Type of reward (e.g. “discount”, “gift”, “cashback”)
coupon-code	string	Optional coupon code displayed on reveal with a copy button
overlay-color	string	Alias for scratch-color (if preferred)
scratch-width	number	Width of the brush when scratching (default: 40)
auto-reveal	boolean	Automatically reveal once reveal-percentage is reached