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! 🚀