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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "You're eligible for the airdrop" | Card heading. |
| tokenName | string | none | Token name shown under the allocation amount. |
| allocationAmount | string | none | Formatted allocation amount, e.g. "1,250 ARB". |
| criteria | AirdropCriterion[] | none | Eligibility checklist items. |
| expiresAt | string | none | ISO date string the claim window closes at. |
| className | string | none | Extra 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.
More Finance Blocks
View all →token-price-hero
Token Price Hero
Hero section with a live token price card, market cap, volume, and supply grid.
dao-governance-proposals
DAO Governance Proposals
Governance proposal cards with for/against vote bars, quorum progress, and status badges.
contract-address-list
Contract Address List
Smart contract addresses with copy-to-clipboard and explorer link buttons.