> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polygon.technology/llms.txt
> Use this file to discover all available pages before exploring further.

# Polygon Developer Guides

> Browse guides across the Open Money Stack, filterable by product and use case.

export const useCaseOptions = ['Cross-border Payments', 'Stablecoin Integration', 'KYC & Compliance', 'Agentic Payments', 'Identity', 'Chain Deployment', 'Node Operations', 'Cross-chain', 'DeFi'];

export const productOptions = ['Payments API', 'Embedded Wallets', 'x402 Protocol', 'Polygon Chain', 'Polygon Chain Development Kit (CDK)', 'Agglayer', 'Trails'];

export const guides = [{
  id: 'morpho-vault-deposit',
  title: 'Allow Your Users to Earn',
  description: 'Deposit USDC into a Morpho vault on Polygon using Trails and Sequence Embedded Wallets.',
  href: '/wallets/morpho-vault-deposit',
  products: ['Embedded Wallets', 'Trails'],
  useCases: ['DeFi', 'Cross-chain'],
  tags: ['Wallets', 'Interoperability']
}, {
  id: 'treasury-wallet',
  title: 'Automate USDC collection with a Treasury Wallet',
  description: 'Automate pull-and-push USDC flows from client wallets to a central treasury using Sequence Embedded Wallets and Smart Sessions.',
  href: '/wallets/treasury-wallet',
  products: ['Embedded Wallets'],
  useCases: ['Cross-border Payments', 'Stablecoin Integration'],
  tags: ['Wallets', 'Payments']
}, {
  id: 'become-a-validator',
  title: 'Become a Validator',
  description: 'Learn how to stake, run a validator node, and participate in Polygon Chain consensus.',
  href: '/pos/get-started/becoming-a-validator',
  products: ['Polygon Chain'],
  useCases: ['Node Operations'],
  tags: ['Polygon Chain']
}, {
  id: 'run-a-node',
  title: 'Run a Node',
  description: 'Set up and operate a full node or archive node on Polygon Chain.',
  href: '/pos/how-to/prerequisites',
  products: ['Polygon Chain'],
  useCases: ['Node Operations'],
  tags: ['Polygon Chain']
}];

export const GuidesExplorer = ({guides, productOptions, useCaseOptions}) => {
  const [search, setSearch] = useState('');
  const [selectedProducts, setSelectedProducts] = useState([]);
  const [selectedUseCases, setSelectedUseCases] = useState([]);
  const [productsOpen, setProductsOpen] = useState(false);
  const [useCasesOpen, setUseCasesOpen] = useState(false);
  const toggleProduct = p => setSelectedProducts(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p]);
  const toggleUseCase = u => setSelectedUseCases(prev => prev.includes(u) ? prev.filter(x => x !== u) : [...prev, u]);
  const reset = () => {
    setSearch('');
    setSelectedProducts([]);
    setSelectedUseCases([]);
  };
  const hasFilters = search.length > 0 || selectedProducts.length > 0 || selectedUseCases.length > 0;
  const filtered = guides.filter(g => {
    const q = search.toLowerCase();
    const matchSearch = !q || g.title.toLowerCase().includes(q) || g.description.toLowerCase().includes(q);
    const matchProducts = selectedProducts.length === 0 || g.products.some(p => selectedProducts.includes(p));
    const matchUseCases = selectedUseCases.length === 0 || g.useCases.some(u => selectedUseCases.includes(u));
    return matchSearch && matchProducts && matchUseCases;
  });
  const dropdown = (label, options, selected, onToggle, onReset, isOpen, setOpen) => <div className="relative">
      <button onClick={() => setOpen(o => !o)} className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold transition-colors whitespace-nowrap ${selected.length > 0 ? 'bg-[#090624] text-white dark:bg-white dark:text-[#090624]' : 'bg-gray-100 dark:bg-white/10 text-gray-800 dark:text-white'}`}>
        {label}{selected.length > 0 ? ` (${selected.length})` : ''}
        <svg className={`w-3.5 h-3.5 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {isOpen && <div className="absolute top-full mt-2 w-56 bg-white dark:bg-[#1C1C1C] border border-gray-200 dark:border-white/10 rounded-2xl shadow-xl z-20 overflow-hidden">
          <div className="p-2 max-h-64 overflow-y-auto">
            {options.map(opt => <label key={opt} className="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-white/5 cursor-pointer">
                <input type="checkbox" checked={selected.includes(opt)} onChange={() => onToggle(opt)} className="w-4 h-4 rounded accent-[#670DE5]" />
                <span className="text-sm text-gray-800 dark:text-gray-200">{opt}</span>
              </label>)}
          </div>
          {selected.length > 0 && <div className="flex gap-2 p-3 border-t border-gray-100 dark:border-white/10">
              <button onClick={() => {
    onReset();
    setOpen(false);
  }} className="flex-1 text-sm font-semibold px-3 py-1.5 rounded-full bg-gray-100 dark:bg-white/10 text-gray-700 dark:text-gray-200">
                Reset
              </button>
              <button onClick={() => setOpen(false)} className="flex-1 text-sm font-semibold px-3 py-1.5 rounded-full bg-[#670DE5] text-white">
                Apply
              </button>
            </div>}
        </div>}
    </div>;
  return <div className="not-prose space-y-6">
      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
        <div className="relative flex-1 w-full">
          <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
          </svg>
          <input type="text" placeholder="Search guides..." value={search} onChange={e => setSearch(e.target.value)} className="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 dark:bg-white/10 text-sm text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none border border-transparent focus:border-[#670DE5] transition-colors" />
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          {dropdown('Products', productOptions, selectedProducts, toggleProduct, () => setSelectedProducts([]), productsOpen, fn => {
    setProductsOpen(fn);
    setUseCasesOpen(false);
  })}
          {dropdown('Use Cases', useCaseOptions, selectedUseCases, toggleUseCase, () => setSelectedUseCases([]), useCasesOpen, fn => {
    setUseCasesOpen(fn);
    setProductsOpen(false);
  })}
          {hasFilters && <button onClick={reset} className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors px-2">
              Clear all
            </button>}
        </div>
      </div>

      {hasFilters && <p className="text-sm text-gray-500 dark:text-gray-400">
          {filtered.length} {filtered.length === 1 ? 'guide' : 'guides'} found
        </p>}

      {filtered.length > 0 ? <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {filtered.map(guide => <a key={guide.id} href={guide.href} className="group flex flex-col gap-3 p-5 rounded-2xl border border-gray-200 dark:border-white/10 hover:border-[#670DE5] dark:hover:border-[#9551F5] bg-white dark:bg-[#141414] transition-all">
              <div className="flex-1">
                <h3 className="font-semibold text-base text-gray-900 dark:text-white group-hover:text-[#670DE5] dark:group-hover:text-[#9551F5] transition-colors">
                  {guide.title}
                </h3>
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
                  {guide.description}
                </p>
              </div>
              <div className="flex flex-wrap gap-1.5">
                {guide.starter ? <span className="text-xs font-semibold px-2 py-0.5 rounded-md bg-emerald-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-500/30">
                    Starter
                  </span> : <span className="text-xs font-semibold px-2 py-0.5 rounded-md bg-yellow-50 dark:bg-yellow-400/15 text-yellow-700 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-400/30">
                    Guide
                  </span>}
                {guide.tags.map(tag => <span key={tag} className="text-xs font-semibold px-2 py-0.5 rounded-md bg-[#F5F0FF] dark:bg-[#670DE5]/20 text-[#670DE5] dark:text-[#9551F5]">
                    {tag}
                  </span>)}
              </div>
            </a>)}
        </div> : <div className="flex flex-col items-center justify-center py-20 text-center gap-3">
          <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">No guides found</p>
          <p className="text-sm text-gray-500 dark:text-gray-400">Try adjusting your search or filters.</p>
          <button onClick={reset} className="mt-2 text-sm font-semibold px-4 py-2 rounded-full bg-[#670DE5] text-white hover:bg-[#500AB2] transition-colors">
            Clear filters
          </button>
        </div>}
    </div>;
};

<GuidesExplorer guides={guides} productOptions={productOptions} useCaseOptions={useCaseOptions} />