NFT Card

Installation

Setup

Environment Variables

Add your Alchemy API key to your environment file:

# .env.local (for Next.js) or .env
ALCHEMY_API_KEY=your_alchemy_api_key_here

Next.js Configuration

If you're using Next.js, you need to configure image domains for NFT images. Add the following to your next.config.js or next.config.ts:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'arweave.net',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.arweave.net',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

Note: After updating your Next.js configuration, restart your development server for the changes to take effect.

Usage

Basic Usage

import { NFTCard } from "@/components/soldevkit-ui/nft/nft-card";

export default function Example() {
  return <NFTCard mintAddress="7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU" />;
}

Features

• Metadata Fetching: Automatically fetches NFT metadata using Alchemy API
• Multiple Variants: Default, compact, and detailed display options
• Attributes Display: Optional display of NFT traits and attributes
• Collection Info: Shows collection name and family information
• Loading States: Skeleton loading while fetching metadata
• Error Handling: Graceful error states for invalid or missing NFTs
• Responsive Design: Works across different screen sizes
• Customizable Styling: Supports custom CSS classes

Props

Dependencies

{
  "@solana/web3.js": "^1.95.0",
  "lucide-react": "^0.400.0",
  "motion/react": "^11.0.0"
}

Built for the Solana ecosystem. Contributions welcome.