NFTCard – Composer Kit
Skip to content

NFTCard

Overview

The NFTCard component is designed to display NFT details, including its metadata, image, and token ID. It provides a structured layout for showcasing NFT assets.

Usage

To use NFTCard, wrap it inside the NFT component and include NFTMeta, NFTImage, and NFTTokenId to display additional NFT details.

Unknown NFT

No description available

NFT Image
Token ID2334

Props

NFTCard

interface NFTCardProps {
  className?: string; // Custom CSS class for styling
  style?: React.CSSProperties; // Inline styles
  children?: React.ReactNode; // Additional elements inside the card
}
PropTypeDescription
classNamestring (optional)Custom CSS class for styling the NFT card.
styleReact.CSSProperties (optional)Inline styles for custom styling.
childrenReact.ReactNode (optional)Additional elements inside the card.

NFTMeta

interface NFTMetaProps {
  className?: string; // CSS class name for styling
}
PropTypeDescription
classNamestring (optional)CSS class name for styling.

NFTImage

interface NFTImageProps {
  className?: string; // CSS class name for styling
}
PropTypeDescription
classNamestring (optional)CSS class name for styling.

NFTTokenId

interface NFTTokenIdProps {
  className?: string; // CSS class name for styling
}
PropTypeDescription
classNamestring (optional)CSS class name for styling.

Example Use Case

You can customize the NFTCard by adding extra UI elements, like buttons or additional text.

<NFT
  contractAddress="0xd447209176470be0db276549c7143265a559Fb6b"
  tokenId={BigInt("2334")}
>
  <NFTCard>
    <NFTMeta />
    <NFTImage />
    <NFTTokenId />
  </NFTCard>
</NFT>

This documentation follows Vocs Docs format and is optimized for Telegram readability. 🚀 Let me know if you need any tweaks! 🚀