NFT Card

A token tile: media, collection, price. Broken media resolves to a placeholder rather than collapsing the tile — IPFS gateways fail constantly and a grid that reflows on every 404 is unusable.

src/components/ui/nft-card.tsx

About

From the component's own source, where it was written.

An NFT tile: media, collection, price.

The media sits in a fixed AspectRatio and a broken image resolves to a placeholder rather than collapsing the tile. NFT media is loaded from IPFS gateways that fail constantly, and a grid that reflows every time one 404s is unusable.

Collection verification is a badge on the *collection*, never on the item. Copied collections are the standard scam here, and putting a tick beside an item's name implies something nobody has checked.

Install

npx astralyx-ui add nft-card

Usage

import { NftCard } from '@/components/ui/nft-card'

<NftCard name="Astral #1420" collection="Astralyx" verified price="2.4 ETH" image={url} />

Composer

Change the props and the source below follows.

Astralyx GenesisAstral#1420Rank 42

Price: 2.4 ETH
Last sale: 1.9 ETH

Props

verified collectionbroken media

tsx

<NftCard
  name="Astral"
  tokenId="1420"
  collection="Astralyx Genesis"
  verified={true}
  price="2.4 ETH"
/>

Examples

Grid

tsx

<NftCard name="Astral" tokenId="1420" collection="Astralyx Genesis" verified price="2.4 ETH" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`NftCard`

An NFT tile: media, collection, price.

Extends Omit<ComponentProps<'article'>, 'title'>.

Prop	Type	Default	Description
name	ReactNode	required	Identity of the item and its collection.
collection	ReactNode	—	Identity of the item and its collection.
verified	boolean	false	Applies to the collection, never the item. Copied collections are the standard scam here, and a tick beside an item name implies something nobody checked.
image	string	—	A load failure swaps in a placeholder; the tile keeps its aspect ratio either way.
tokenId	ReactNode	—	Identity of the item and its collection.
price	ReactNode	—	Formatting is the caller’s — pair with TokenAmount.
lastSale	ReactNode	—	Formatting is the caller’s — pair with TokenAmount.
rarity	ReactNode	—	Formatting is the caller’s — pair with TokenAmount.
href	string	—	—
footer	ReactNode	—	—
verifiedLabel	string	'Verified collection'	Accessible name for the verification tick.
priceLabel	ReactNode	'Price'	—
lastSaleLabel	ReactNode	'Last sale'	—