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
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
}
Prop | Type | Description |
---|---|---|
className | string (optional) | Custom CSS class for styling the NFT card. |
style | React.CSSProperties (optional) | Inline styles for custom styling. |
children | React.ReactNode (optional) | Additional elements inside the card. |
NFTMeta
interface NFTMetaProps {
className?: string; // CSS class name for styling
}
Prop | Type | Description |
---|---|---|
className | string (optional) | CSS class name for styling. |
NFTImage
interface NFTImageProps {
className?: string; // CSS class name for styling
}
Prop | Type | Description |
---|---|---|
className | string (optional) | CSS class name for styling. |
NFTTokenId
interface NFTTokenIdProps {
className?: string; // CSS class name for styling
}
Prop | Type | Description |
---|---|---|
className | string (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! 🚀