> ## Documentation Index > Fetch the complete documentation index at: https://developers.circle.com/llms.txt > Use this file to discover all available pages before exploring further. # Browse Sample Projects export const SDKCard = ({id, title, description, icon, iconName, iconColor, product, textForProduct, languages, textForLanguages, platforms, links, relevantLinks, anchor}) => { const finalIcon = iconName || icon; const finalIconColor = iconColor || "blue"; const finalProduct = textForProduct || product; const finalLanguages = textForLanguages || languages; const finalLinks = relevantLinks || links || []; const finalPlatforms = platforms || []; const WalletIcon = () => ; const TemplateIcon = () => ; const ContractIcon = () => ; const SwitchIcon = () => ; const LibraryIcon = () => ; const BeakerIcon = () => ; const iconColorStyles = { orange: { light: { backgroundColor: "#fff7ed", color: "#ea580c" }, dark: { backgroundColor: "#431407", color: "#fb923c" } }, blue: { light: { backgroundColor: "#eff6ff", color: "#2563eb" }, dark: { backgroundColor: "#1e3a8a", color: "#60a5fa" } }, green: { light: { backgroundColor: "#f0fdf4", color: "#16a34a" }, dark: { backgroundColor: "#14532d", color: "#4ade80" } }, purple: { light: { backgroundColor: "#faf5ff", color: "#9333ea" }, dark: { backgroundColor: "#581c87", color: "#c084fc" } }, violet: { light: { backgroundColor: "#f5f3ff", color: "#7c3aed" }, dark: { backgroundColor: "#4c1d95", color: "#a78bfa" } }, pink: { light: { backgroundColor: "#fdf2f8", color: "#ec4899" }, dark: { backgroundColor: "#831843", color: "#f9a8d4" } }, red: { light: { backgroundColor: "#fef2f2", color: "#dc2626" }, dark: { backgroundColor: "#7f1d1d", color: "#f87171" } }, "accent-orange": { light: { backgroundColor: "#fff7ed", color: "#ea580c" }, dark: { backgroundColor: "#431407", color: "#fb923c" } }, "accent-blue": { light: { backgroundColor: "#eff6ff", color: "#2563eb" }, dark: { backgroundColor: "#1e3a8a", color: "#60a5fa" } }, "accent-green": { light: { backgroundColor: "#f0fdf4", color: "#16a34a" }, dark: { backgroundColor: "#14532d", color: "#4ade80" } }, "accent-purple": { light: { backgroundColor: "#faf5ff", color: "#9333ea" }, dark: { backgroundColor: "#581c87", color: "#c084fc" } }, "accent-violet": { light: { backgroundColor: "#f5f3ff", color: "#7c3aed" }, dark: { backgroundColor: "#4c1d95", color: "#a78bfa" } }, "accent-pink": { light: { backgroundColor: "#fdf2f8", color: "#ec4899" }, dark: { backgroundColor: "#831843", color: "#f9a8d4" } }, error: { light: { backgroundColor: "#fef2f2", color: "#dc2626" }, dark: { backgroundColor: "#7f1d1d", color: "#f87171" } } }; const iconColorClasses = { orange: "bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400", blue: "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400", green: "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400", purple: "bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400", violet: "bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400" }; const iconComponents = { wallet: , WalletOutline: , template: , TemplateOutline: , contract: , ContractOutline: , switch: , SwitchHorizontalOutline: , library: , LibraryOutline: , beaker: , BeakerOutline: }; const selectedIcon = iconComponents[finalIcon] || finalIcon; return <>
{}
{selectedIcon}
{title}
{description}
{}
{} {finalProduct &&

Product

{finalProduct}
} {} {finalLanguages &&

Languages

{finalLanguages}
} {} {finalPlatforms && finalPlatforms.length > 0 &&

Platforms

{finalPlatforms.map((platform, index) => { const platformName = typeof platform === "string" ? platform : platform.name; let platformIcon = typeof platform === "string" ? null : platform.icon; if (!platformIcon) { const lowerName = platformName.toLowerCase(); if (lowerName.includes("react")) { platformIcon = "react"; } else if (lowerName.includes("web")) { platformIcon = "globe"; } else if (lowerName.includes("android")) { platformIcon = "android"; } else if (lowerName.includes("ios")) { platformIcon = "apple"; } } return
{platformIcon && (platformIcon.endsWith(".svg") ? {platformName} : )} {platformName}
; })}
}
{}
; }; The following projects serve as reference implementations for features of Circle developer tools. These projects include examples that you can use as a foundation to build your own projects. ## Wallets Wallets provides a comprehensive solution for you to build flexible, secure, and scalable embedded wallets within your applications. For more information, see the [Wallets documentation](/wallets). ## Paymaster Circle Paymaster allows your users to pay for network (gas) fees using USDC tokens, instead of chain native tokens. ## Circle Mint Circle Mint is a fast and cost-effective way to access and redeem USDC and EURC. For more information, see the [Circle Mint documentation](/circle-mint/introducing-circle-mint). ## CCTP Cross-Chain Transfer Protocol (CCTP) is an on-chain utility that allows for USDC transfers between blockchains via native burning and minting. For more information, see the [CCTP documentation](/cctp). ## Circle Research Circle Research develops cutting-edge insights and reference materials. For more information see the [Circle Research homepage](https://circle.com/circle-research). Circle Research projects are experimental. Make sure you test your code thoroughly if you are integrating ideas from these repositories. Circle Research projects are experimental. Make sure you test your code thoroughly if you are integrating ideas from these repositories.