Staaarter

Airdrop Claim Card

A centered airdrop eligibility card: the allocation amount, a checklist of criteria met, a live countdown to the claim deadline, and a two-step connect-then-claim button flow.

By Staaarter Team
Finance
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/airdrop-claim-card.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/finance/finance29.tsx instead.

Usage

The file also exports finance29Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Finance29, finance29Demo } from "@/components/blocks/finance/finance29";

export default function Page() {
  return <Finance29 {...finance29Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"You're eligible for the airdrop"Card heading.
tokenNamestringnoneToken name shown under the allocation amount.
allocationAmountstringnoneFormatted allocation amount, e.g. "1,250 ARB".
criteriaAirdropCriterion[]noneEligibility checklist items.
expiresAtstringnoneISO date string the claim window closes at.
classNamestringnoneExtra classes for the outer section element.

Types

export interface AirdropCriterion {
  label: string;
  met: boolean;
}

Behavior notes

  • The countdown is real: a useEffect ticks every second off expiresAt, starting from a null placeholder to avoid a hydration mismatch.
  • "Connect wallet to claim" and the follow-up "Claim" button are real local useState toggles (connected, then claimed) with a genuine success message, but there is no actual wallet integration or on-chain transaction, this is a decorative two-step demo flow.