Component

NFT Card

Displays NFT artwork, metadata, pricing, and actions in a reusable card.

Preview

Madlads

Price

0.5SOL

Last: 1.2

Installation

terminal

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

Usage

nft-card.tsx

import { NFTCard } from "@/components/nft-card";
 
export default function App() {
  return (
    <div className="flex justify-center p-8">
      <NFTCard
        image="https://www.madlads.com/_next/image?url=https%3A%2F%2Fmadlads.s3.us-west-2.amazonaws.com%2Fimages%2F1.png&w=1200&q=75"
        name="Madlads"
        collection="Madlads"
        verified={true}
        price="0.5"
        priceSymbol="SOL"
        lastSale="1.2"
        ownerName="Owner"
        likes={100}
        tilt={true}
      />
    </div>
  );
}

Props / Arguments

Name	Type	Default	Description
image	string	required	URL of the NFT artwork image.
name	string	required	Display name / title of the NFT.
collection	string	undefined	Name of the collection this NFT belongs to.
verified	boolean	false	When true, renders a blue verified checkmark next to the collection name.
price	string	undefined	Listing price as a formatted string (e.g. "1.5"). Omit if not listed.
priceSymbol	string	'SOL'	Token symbol for the price (e.g. "SOL", "ETH").
lastSale	string	undefined	Label for the last sale price (e.g. "1.2 SOL").
ownerAvatar	string	undefined	URL of the owner / creator avatar image.
ownerName	string	undefined	Display name of the owner or creator.
likes	number	undefined	Initial like / favourite count displayed on the artwork overlay.
href	string	undefined	URL to the NFT on an external marketplace. Renders an icon button on the artwork.
tilt	boolean	false	Enables the interactive 3D mouse-tilt effect.
tiltIntensity	number	28	Tilt divisor — a higher value produces a subtler rotation.
onBuy	() => void	undefined	Callback fired when the Buy now action button is clicked.
className	string	''	Optional Tailwind / CSS class applied to the card root element.