> ## Documentation Index
> Fetch the complete documentation index at: https://crossmint-wallets-docs-2-5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet UI Components

> Build powerful NFT experiences with Crossmint's React components

<Frame type="simple">
  <img src="https://mintcdn.com/crossmint-wallets-docs-2-5/7ig1y7mqlvZy0ezV/images/wallets/wallet-collection-component.jpg?fit=max&auto=format&n=7ig1y7mqlvZy0ezV&q=85&s=a492c9f5b38eb5aa27ca2047786098d8" alt="Wallet collection ui component" width="1470" height="406" data-path="images/wallets/wallet-collection-component.jpg" />
</Frame>

Crossmint's UI components help you build sophisticated NFT experiences efficiently. These components are designed to work with any NFT collection across EVM chains and Solana. You can use them to:

* Display NFT collections in a clean, responsive grid layout
* Show detailed NFT information with metadata and attributes
* Create custom layouts that match your brand

<Steps>
  <Step title="Add the Crossmint Client SDK">
    Use the following command:

    <Snippet file="client-sdk-react-ui-installation-cmd.mdx" />
  </Step>

  <Step title="Display NFT Collections">
    The `CrossmintNFTCollectionView` component lets you display NFTs from any wallet or collection:

    <Snippet file="wallet-ui-example.mdx" />

    | Prop                   | Description                                   | Example                                                       |
    | :--------------------- | :-------------------------------------------- | :------------------------------------------------------------ |
    | wallets                | List of wallets whose NFTs you want to render | `[{ chain: "solana", publicKey: "<SOLANA_WALLET_ADDRESS>" }]` |
    | uiConfig (optional)    | Customize colors, fonts, and layout           | `{ colors: { background: "#cccccc" } }`                       |
    | environment (optional) | Switch between production and staging         | `production` (default) or `staging`                           |
  </Step>

  <Step title="Show NFT Details">
    The `CrossmintNFTDetail` component creates rich NFT detail views that work with any NFT:

    <CodeGroup>
      ```typescript EVM theme={null}
      "use client";

      import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";

      export default function NFTDetailPage() {
          return (
              <div className="h-screen">
                  <CrossmintNFTDetail nft="ethereum:0x123...abc:1" />
              </div>
          );
      }
      ```

      ```typescript Solana theme={null}
      "use client";

      import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";

      export default function NFTDetailPage() {
          return (
              <div className="h-screen">
                  <CrossmintNFTDetail nft="solana:ABC123..." />
              </div>
          );
      }
      ```
    </CodeGroup>

    | Prop                   | Description                           | Example                                 |
    | :--------------------- | :------------------------------------ | :-------------------------------------- |
    | nft                    | NFT identifier as locator string      | `"ethereum:0x123...abc:1"`              |
    | uiConfig (optional)    | Customize colors, fonts, and layout   | `{ colors: { background: "#cccccc" } }` |
    | environment (optional) | Switch between production and staging | `"production"` (default) or `"staging"` |

    The `nft` prop also supports an object format:

    <CodeGroup>
      ```typescript EVM theme={null}
      // For EVM chains
      { chain: "ethereum", contractAddress: "<CONTRACT_ADDRESS>", tokenId: "<TOKEN_ID>" }
      ```

      ```typescript Solana theme={null}
      // For Solana
      { chain: "solana", mintHash: "<MINT_HASH>" }
      ```
    </CodeGroup>

    #### Example of NFT detail component

    <Frame type="simple">
      <img src="https://mintcdn.com/crossmint-wallets-docs-2-5/7ig1y7mqlvZy0ezV/images/wallets/nft-detail-component.jpg?fit=max&auto=format&n=7ig1y7mqlvZy0ezV&q=85&s=c60a8631a0d90d0cf67ba5b269e43806" alt="NFT detail ui component" width="2000" height="661" data-path="images/wallets/nft-detail-component.jpg" />
    </Frame>
  </Step>

  <Step title="Customize the Look">
    Make the components match your brand using the `uiConfig` prop:

    ```typescript theme={null}
    "use client";

    import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";

    export function NFTDetailPage() {
        return (
            <div className="h-screen">
                <CrossmintNFTDetail
                    nft="solana:ABC123..."
                    uiConfig={{
                        colors: {
                            background: "#000814",
                            backgroundSecondary: "#001D3D",
                            textPrimary: "#FFFFFF",
                            textSecondary: "#EEEEEE",
                            accent: "#FFC300",
                            border: "#FFFFFF",
                        },
                    }}
                />
            </div>
        );
    }
    ```

    #### Example with custom styling

    <Frame type="simple">
      <img src="https://mintcdn.com/crossmint-wallets-docs-2-5/7ig1y7mqlvZy0ezV/images/wallets/nft-detail-customized.jpg?fit=max&auto=format&n=7ig1y7mqlvZy0ezV&q=85&s=2991c53f7199df4a3a91d8b80d0274d8" alt="NFT detail ui component" width="2000" height="674" data-path="images/wallets/nft-detail-customized.jpg" />
    </Frame>

    <Note>All UI configuration fields are optional and will fall back to Crossmint's default theme.</Note>
  </Step>
</Steps>

## Next Steps

<CardGroup>
  <Card title="SDK Reference" icon="code" iconType="duotone" href="/sdk-reference/wallets/overview">
    Explore the complete SDK documentation, including UI components, hooks, and wallet functionality
  </Card>

  <Card title="Client Quickstart" icon="rocket" href="/wallets/quickstarts/client-side-wallets">
    Get started with client-side wallet integration
  </Card>

  <Card title="Server Integration" icon="server" href="/wallets/quickstarts/server-side-wallets">
    Learn about server-side wallet management
  </Card>

  <Card title="Talk to an expert" icon="message" iconType="duotone" color="#ADD8E6" href="https://www.crossmint.com/contact/sales">
    Contact our sales team for support.
  </Card>
</CardGroup>