NFT Components

Elevate your NFT applications with our React headless UI components, engineered for seamless digital asset transactions. These customizable, zero-styling components simplify NFT interactions while giving developers complete freedom to craft their perfect user interface.

View docs Book a Demo

NFTMedia

Show the media of an NFT in a collection.

import { NFTProvider, NFTMedia } from "thirdweb/react";

function App() {
  return (
    <NFTProvider tokenId={0n} contract={nftContract}>
      <NFTMedia
        className="rounded-md w-40 h-40"
        loadingComponent={<span>Loading...</span>}
      />
    </NFTProvider>
  );
}

Override the NFT media using the mediaResolver prop.

This prop is very useful when you already have the media src and want to skip the network requests on the client.

import { NFTProvider, NFTMedia } from "thirdweb/react";

function App() {
  return (
    <NFTProvider tokenId={0n} contract={nftContract}>
      <NFTMedia
        className="h-40 w-40 rounded-md"
        mediaResolver={{
          src: "ipfs://QmeGCqV1mSHTZrvuFzW1XZdCRRGXB6AmSotTqHoxA2xfDo/1.mp4",
          poster:
            "ipfs://QmeGCqV1mSHTZrvuFzW1XZdCRRGXB6AmSotTqHoxA2xfDo/0.png",
        }}
      />
    </NFTProvider>
  );
}

NFTName

Show the name of an NFT in a collection.

import { NFTProvider, NFTName } from "thirdweb/react";

function App() {
  return (
    <NFTProvider tokenId={0n} contract={nftContract}>
      <NFTName loadingComponent={<span>Loading...</span>} />
    </NFTProvider>
  );
}

NFTDescription

Show the description of an NFT in a collection.

import {
  NFTProvider,
  NFTDescription,
} from "thirdweb/react";

function App() {
  return (
    <NFTProvider tokenId={0n} contract={nftContract}>
      <NFTDescription
        className="text-center"
        loadingComponent={<span>Loading...</span>}
      />
    </NFTProvider>
  );
}

Build an NFT Card

Using these headless components, you can easily build your own NFT Card

import {
  NFTProvider,
  NFTDescription,
  NFTName,
  NFTMedia,
} from "thirdweb/react";

function App() {
  return (
    <NFTProvider tokenId={0n} contract={nftContract}>
      <div className="flex w-[230px] flex-col gap-3 rounded-lg border bg-gray-900 px-1 py-3">
        <NFTMedia className="rounded-md px-2 text-center" />
        <NFTName className="px-2 font-bold" />
        <NFTDescription
          className="px-2 text-sm"
          loadingComponent={<span>Loading...</span>}
        />
      </div>
    </NFTProvider>
  );
}