Collectible
A component for displaying NFT collectibles with metadata and image support.
Collectible
The Collectible component displays NFT collectibles with automatic metadata resolution and image display.
Usage
import { Collectible } from '@avalabs/builderkit';
// Basic usage
<Collectible
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
token_id={1}
/>
// With custom styling
<Collectible
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
token_id={1}
className="border-2 rounded-xl"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
chain_id | number | - | Chain ID where the NFT exists |
address | string | - | NFT contract address |
token_id | number | - | Token ID of the NFT |
className | string | - | Additional CSS classes |
Features
- Automatic metadata resolution from IPFS
- Displays NFT image and name
- Shows token ID
- Supports ERC721 standard
- Responsive layout with fixed dimensions
- Loading state handling
Examples
Basic NFT Display
<Collectible
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
token_id={1}
/>In a Grid Layout
<div className="grid grid-cols-3 gap-4">
{nfts.map(nft => (
<Collectible
key={nft.token_id}
chain_id={nft.chain_id}
address={nft.address}
token_id={nft.token_id}
/>
))}
</div>With Custom Styling
<Collectible
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
token_id={1}
className="shadow-lg hover:shadow-xl transition-shadow"
/>Component Structure
-
Container
- Fixed width of 120px
- Rounded corners
- Border
- Overflow hidden
-
Image
- Fixed dimensions (120x120)
- Maintains aspect ratio
- Centered display
-
Info Section
- White background
- Token ID display
- NFT name
- Proper padding
Metadata Resolution
The component automatically:
- Fetches token URI from the contract
- Resolves IPFS metadata
- Extracts image URL and name
- Handles IPFS gateway resolution
Last updated on 3/7/2025