UX.SOL

Component

NFT Card Collection

Displays collection artwork, stats, description, and item previews in a reusable card.

Preview

Madlads banner
Madlads

Madlads

10,000 items

A collection of digital assets with shared artwork, metadata, and marketplace activity.

Floor

0.5SOL
12.5%

Volume 24h

1.2kSOL

5.0k owners

Installation

terminal
$npx shadcn@latest add https://uxdotsol.xyz/r/nft-card-collection.json

Usage

nft-card-collection.tsx
import { NFTCollectionCard } from "@/components/nft-card-collection";
 
export default function App() {
return (
<div className="flex justify-center p-8">
<NFTCollectionCard
bannerImage="https://example.com/banner.png"
logoImage="https://example.com/logo.png"
name="Mad Lads"
verified={true}
description="A collection of digital assets with shared artwork and metadata."
itemCount={10000}
tilt={true}
items={[]}
/>
</div>
);
}

Props / Arguments

NameTypeDefaultDescription
bannerImagestringrequiredBanner image URL displayed at the top of the card.
logoImagestringrequiredCollection logo image URL.
namestringrequiredCollection display name.
verifiedbooleanfalseShows a blue verified checkmark next to the collection name.
descriptionstringundefinedShort description shown on the card and inside the modal.
itemCountnumberundefinedTotal number of items in the collection.
ownerCountnumberundefinedNumber of unique owners.
floorPricestringundefinedCurrent floor price as a formatted string (e.g. "24.5").
priceSymbolstring'SOL'Token symbol used for price display.
volume24hstringundefined24-hour trading volume as a formatted string.
floorChangenumberundefined24-hour floor price change percentage. Positive = green badge, negative = red.
hrefstringundefinedExternal marketplace URL. Renders a link button on the banner.
tiltbooleanfalseEnables the 3D mouse-tilt effect on the card.
tiltIntensitynumber28Tilt divisor — a higher value produces a subtler rotation.
onExplore() => voidundefinedCallback for the Explore collection button. Renders the button only when provided.
itemsany[]undefinedArray of NFT items shown in the grid inside the flip modal.
classNamestring''Optional Tailwind / CSS class applied to the card root element.