Component
NFT Card Collection
Displays collection artwork, stats, description, and item previews in a reusable card.
Preview
Installation
terminal
$npx shadcn@latest add https://uxdotsol.xyz/r/nft-card-collection.jsonUsage
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
| Name | Type | Default | Description |
|---|---|---|---|
| bannerImage | string | required | Banner image URL displayed at the top of the card. |
| logoImage | string | required | Collection logo image URL. |
| name | string | required | Collection display name. |
| verified | boolean | false | Shows a blue verified checkmark next to the collection name. |
| description | string | undefined | Short description shown on the card and inside the modal. |
| itemCount | number | undefined | Total number of items in the collection. |
| ownerCount | number | undefined | Number of unique owners. |
| floorPrice | string | undefined | Current floor price as a formatted string (e.g. "24.5"). |
| priceSymbol | string | 'SOL' | Token symbol used for price display. |
| volume24h | string | undefined | 24-hour trading volume as a formatted string. |
| floorChange | number | undefined | 24-hour floor price change percentage. Positive = green badge, negative = red. |
| href | string | undefined | External marketplace URL. Renders a link button on the banner. |
| tilt | boolean | false | Enables the 3D mouse-tilt effect on the card. |
| tiltIntensity | number | 28 | Tilt divisor — a higher value produces a subtler rotation. |
| onExplore | () => void | undefined | Callback for the Explore collection button. Renders the button only when provided. |
| items | any[] | undefined | Array of NFT items shown in the grid inside the flip modal. |
| className | string | '' | Optional Tailwind / CSS class applied to the card root element. |
