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

# Build with Stable

> Start building on Stable: connect, send a first transaction, or pick the docs path for what you're building.

export const Footer = () => {
  const socials = [{
    name: "Website",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
                </svg>,
    href: "https://www.stable.xyz"
  }, {
    name: "Discord",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
                </svg>,
    href: "https://discord.com/invite/stablexyz"
  }, {
    name: "Twitter",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                </svg>,
    href: "https://x.com/stable"
  }, {
    name: "GitHub",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
                </svg>,
    href: "http://github.com/stablelabs/"
  }];
  return <>
            <style>{`
        .custom-footer {
          width: 90%;
          margin: auto;
          border-top: 1px solid color-mix(in srgb, #E8FBF7 12%, transparent);
        }

        .custom-footer-content {
          max-width: 1326px;
          margin: 0 auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        .footer-socials {
          display: flex;
          gap: 12px;
          align-items: center;
          flex-wrap: wrap;
        }

        .footer-social-link {
          color: color-mix(in srgb, #E8FBF7 64%, transparent);
          transition: color 0.2s ease;
          display: flex;
          align-items: center;
          text-decoration: none;
          padding: 4px;
        }

        .footer-social-link:hover {
          color: #84FF82;
        }

        .footer-social-link svg {
          width: 18px;
          height: 18px;
        }

        @media (min-width: 640px) {
          .custom-footer {
            padding: 32px 16px;
            margin-top: 64px;
          }

          .footer-socials {
            gap: 16px;
          }

          .footer-social-link svg {
            width: 20px;
            height: 20px;
          }
        }

        html[data-theme='dark'] .custom-footer,
        html.dark .custom-footer {
          border-top-color: color-mix(in srgb, #E8FBF7 12%, transparent);
        }

        html[data-theme='dark'] .footer-social-link,
        html.dark .footer-social-link {
          color: color-mix(in srgb, #E8FBF7 64%, transparent);
        }

        html[data-theme='dark'] .footer-social-link:hover,
        html.dark .footer-social-link:hover {
          color: #84FF82;
        }
      `}</style>

            <footer className="custom-footer">
                <div className="custom-footer-content">
                    <div className="footer-socials">
                        {socials.map((social, index) => <a key={index} href={social.href} className="footer-social-link" target="_blank" rel="noopener noreferrer" aria-label={social.name}>
                                {social.icon}
                            </a>)}
                    </div>
                </div>
            </footer>
        </>;
};

export const GetStarted = () => {
  const cards = [{
    title: "New to Stable?",
    description: "Start with the five-minute overview, then send your first transaction on testnet.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10" />
                    <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
                </svg>,
    href: "/en/explanation/learn-overview"
  }, {
    title: "Accept USDT payments",
    description: "Build P2P, subscription, invoice, and pay-per-call flows using ERC-3009 and x402.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="22" y1="2" x2="11" y2="13" />
                    <polygon points="22 2 15 22 11 13 2 9 22 2" />
                </svg>,
    href: "/en/explanation/integrate-overview"
  }, {
    title: "Deploy a smart contract",
    description: "Port your Foundry or Hardhat workflow, handle USDT0 gas, and call Stable's system modules.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="16 18 22 12 16 6" />
                    <polyline points="8 6 2 12 8 18" />
                </svg>,
    href: "/en/tutorial/smart-contract"
  }, {
    title: "Run a node",
    description: "Install a full or archive node, sync from snapshots, and monitor block production.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
                    <line x1="6" y1="6" x2="6.01" y2="6" />
                    <line x1="6" y1="18" x2="6.01" y2="18" />
                </svg>,
    href: "/en/reference/node-operations-overview"
  }];
  return <>
            <style>{`
        .get-started-container {
          padding: 0 12px 60px 12px;
          margin: 0 auto;
          max-width: 1072px;
        }

        .get-started-container .get-started-title {
          display: block;
          font-size: 10px !important;
          font-weight: 400;
          margin-bottom: 8px;
          font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
          color: #5C7F7A;
          text-transform: uppercase;
          letter-spacing: normal !important;
        }

        .get-started-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 4px;
        }

        .get-started-card {
          display: grid;
          grid-template-columns: auto 1fr;
          grid-template-areas: "icon title" "icon desc";
          column-gap: 16px;
          align-items: center;
          padding: 12px 20px 12px 0;
          border: 1px solid #C1DAD5;
          background: white;
          text-decoration: none;
          transition: color 0.15s ease;
          overflow: hidden;
        }

        .get-started-card-icon {
          grid-area: icon;
          color: #054131;
          width: 32px;
          height: 100%;
          padding: 12px 20px;
          margin: -12px 0;
          box-sizing: content-box;
          border-right: 1px solid #C1DAD5;
          display: flex;
          align-items: center;
          justify-content: center;
          align-self: stretch;
        }

        .get-started-card-icon svg {
          width: 32px;
          height: 32px;
          stroke-width: 1;
        }

        .get-started-card-title { grid-area: title; }
        .get-started-card-description { grid-area: desc; }

        .get-started-card-title {
          display: block;
          font-size: 20px;
          font-weight: 700;
          color: #001E1E;
          font-family: 'Aeonik', sans-serif;
          line-height: 1.4;
          margin: 0;
        }

        .get-started-card-description {
          display: block;
          font-size: 14px;
          font-weight: 400;
          color: #5C7F7A;
          font-family: 'Atkinson Hyperlegible Next', sans-serif;
          line-height: 1.5;
          margin: 2px 0 0 0;
        }

        .get-started-card:hover {
          border-color: #B4FF82 !important;
        }

        .get-started-card:hover .get-started-card-icon {
          border-right-color: #B4FF82 !important;
        }

        .get-started-card:hover .get-started-card-title,
        .get-started-card:hover .get-started-card-description,
        .get-started-card:hover .get-started-card-icon {
          color: #B4FF82;
        }

        .get-started-card:active {
          background: #B4FF82 !important;
          border-color: #B4FF82 !important;
        }

        .get-started-card:active .get-started-card-icon {
          border-right-color: #001E1E !important;
        }

        .get-started-card:active .get-started-card-title,
        .get-started-card:active .get-started-card-description,
        .get-started-card:active .get-started-card-icon {
          color: #001E1E !important;
        }

        /* Dark mode */
        html[data-theme='dark'] .get-started-card,
        html.dark .get-started-card {
          background: #001E1E;
          border-color: #0F2E2E;
        }

        html[data-theme='dark'] .get-started-card:hover,
        html.dark .get-started-card:hover {
          border-color: #B4FF82;
          box-shadow: 0 0 0 1px #B4FF82;
        }

        html[data-theme='dark'] .get-started-card-icon,
        html.dark .get-started-card-icon {
          color: #B4FF82;
          border-right-color: #0F2E2E;
        }

        html[data-theme='dark'] .get-started-card-title,
        html.dark .get-started-card-title {
          color: #E8FBF7;
        }

        html[data-theme='dark'] .get-started-card-description,
        html.dark .get-started-card-description {
          color: #9ABBB4;
        }

        @media (min-width: 640px) {
          .get-started-container {
            padding: 0 24px 80px 24px;
          }
        }

        @media (min-width: 768px) {
          .get-started-container {
            padding: 0 100px 100px 100px;
          }

          .get-started-title {
            font-size: 1.75rem;
          }
        }
      `}</style>

            <div className="get-started-container">
                <span className="get-started-title">Start here</span>
                <div className="get-started-grid">
                    {cards.map(card => {
    const Tag = card.href ? 'a' : 'div';
    return <Tag key={card.title} href={card.href} className="get-started-card">
                                <div className="get-started-card-icon">{card.icon}</div>
                                <p className="get-started-card-title">{card.title}</p>
                                <p className="get-started-card-description">{card.description}</p>
                            </Tag>;
  })}
                </div>
            </div>
        </>;
};

export const Hero = () => {
  const openSearch = () => {
    const navbarTrigger = document.querySelector('#navbar [aria-label*="Search" i], #navbar button[aria-haspopup="dialog"], #navbar [data-cmdk-trigger], header [aria-label*="Search" i]');
    if (navbarTrigger) {
      navbarTrigger.click();
      return;
    }
    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
    const event = new KeyboardEvent("keydown", {
      key: "k",
      code: "KeyK",
      keyCode: 75,
      which: 75,
      metaKey: isMac,
      ctrlKey: !isMac,
      bubbles: true,
      cancelable: true
    });
    document.dispatchEvent(event);
    window.dispatchEvent(event);
  };
  const handleKeyDown = e => {
    if (e.key === "Enter" || e.key === " " || e.key === "/") {
      e.preventDefault();
      openSearch();
    }
  };
  return <>
            <style>{`
        .hero-container {
          padding: 60px 12px 0 12px;
          margin: 0 auto 32px auto;
          text-align: center;
          max-width: 1072px;
        }

        .hero-container .hero-wordmark,
        .hero-container [data-rmiz] {
          margin-left: auto;
          margin-right: auto;
        }

        .hero-container [data-table-wrapper] {
          margin: 4px 0 0 0 !important;
          width: 100% !important;
          max-width: 100% !important;
          padding: 14px !important;
          background: white;
          border: 1px solid #C1DAD5;
          height: auto !important;
        }

        #content-area .hero-container [data-table-wrapper] table {
          margin: 0 !important;
        }

        .hero-container [data-table-wrapper] > div {
          height: auto;
        }

        .hero-container [data-table-wrapper] table {
          height: auto !important;
        }

        .hero-container [data-table-wrapper] > div {
          padding-left: 0 !important;
          padding-right: 0 !important;
          width: 100%;
        }

        .hero-container [data-table-wrapper] table {
          table-layout: fixed;
          width: 100% !important;
        }

        .hero-container [data-table-wrapper] th,
        .hero-container [data-table-wrapper] td {
          min-width: 0 !important;
          width: auto;
        }

        .hero-container [data-table-wrapper] thead th {
          padding-bottom: 8px !important;
        }

        .hero-container [data-table-wrapper] tbody tr:first-child td {
          padding-bottom: 8px !important;
        }

        .hero-container [data-table-wrapper] table,
        .hero-container [data-table-wrapper] tbody,
        .hero-container [data-table-wrapper] tbody tr:last-child td {
          padding-bottom: 0 !important;
        }

        .hero-container [data-table-wrapper] > div {
          display: block !important;
        }

        .hero-container [data-table-wrapper] td::selection,
        .hero-container [data-table-wrapper] th::selection {
          background: #B4FF82;
          color: #001E1E;
        }

        html[data-theme='dark'] .hero-container [data-table-wrapper],
        html.dark .hero-container [data-table-wrapper] {
          background: #001E1E;
          border-color: #0F2E2E;
        }

        .hero-wordmark {
          height: 32px;
          width: auto;
          margin-bottom: 28px;
          display: block;
        }

        .hero-wordmark-light {
          display: block;
        }

        .hero-wordmark-dark {
          display: none;
        }

        .hero-description {
          font-size: 0.9375rem;
          font-weight: 400;
          color: #E8FBF7;
          max-width: 595px;
          line-height: 1.6;
          font-family: 'Atkinson Hyperlegible Next', sans-serif;
          margin: 0 auto 20px auto;
        }

        .connection-table {
          border-collapse: collapse;
          font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
          font-size: 0.875rem;
          margin: 16px auto 0 auto;
          width: auto;
          max-width: 100%;
          table-layout: auto;
          color: #8AA8A3;
        }

        .connection-table th,
        .connection-table td {
          text-align: left;
        }

        .connection-table th,
        .connection-table td {
          padding: 1px 12px 1px 0;
          text-align: left;
          font-weight: 400;
          white-space: nowrap;
        }

        .connection-table th:last-child,
        .connection-table td:last-child {
          padding-right: 0;
        }

        .connection-table th {
          font-family: 'IBM Plex Mono', monospace !important;
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0 !important;
          color: #B0C7C2;
        }

        .connection-table td {
          user-select: all;
          -webkit-user-select: all;
        }

        .search-container {
          max-width: 100%;
          margin: 32px 0 4px 0;
          padding: 0;
        }

        .search-input-wrapper {
          display: flex;
          align-items: center;
          background: white;
          border: 1px solid #C1DAD5;
          padding: 14px;
          cursor: pointer;
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
          gap: 8px;
        }

        .search-input-wrapper:hover,
        .search-input-wrapper:focus-within {
          border-color: #B4FF82;
          box-shadow: 0 0 0 1px #B4FF82;
        }

        .search-icon {
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          color: #5C7F7A;
        }

        .search-input {
          flex: 1;
          text-align: left;
          border: none !important;
          outline: none !important;
          background: transparent !important;
          background-color: transparent !important;
          box-shadow: none !important;
          font-size: 1rem;
          color: #5C7F7A;
          font-family: 'Atkinson Hyperlegible Next', sans-serif;
          min-width: 0;
          letter-spacing: -0.02em;
          line-height: 24px;
          user-select: none;
        }

        /* Dark mode */
        html[data-theme='dark'] .hero-wordmark-light,
        html.dark .hero-wordmark-light {
          display: none;
        }

        html[data-theme='dark'] .hero-wordmark-dark,
        html.dark .hero-wordmark-dark {
          display: block;
        }

        html[data-theme='dark'] .hero-description,
        html.dark .hero-description {
          color: #E8FBF7;
        }

        html[data-theme='dark'] .connection-table {
          color: #6E8984;
        }

        html[data-theme='dark'] .connection-table th,
        html.dark .connection-table th {
          color: #5C7F7A;
        }

        html[data-theme='dark'] .search-input-wrapper,
        html.dark .search-input-wrapper {
          background: #001E1E;
          border-color: #0F2E2E;
        }

        html[data-theme='dark'] .search-input-wrapper:hover,
        html.dark .search-input-wrapper:hover,
        html[data-theme='dark'] .search-input-wrapper:focus-within,
        html.dark .search-input-wrapper:focus-within {
          border-color: #B4FF82;
          box-shadow: 0 0 0 1px #B4FF82;
        }

        html[data-theme='dark'] .search-icon,
        html.dark .search-icon {
          color: #9ABBB4;
        }

        html[data-theme='dark'] .search-input,
        html.dark .search-input {
          color: #9ABBB4;
        }

        @media (min-width: 640px) {
          .hero-container {
            padding: 80px 24px 0 24px;
            margin: 0 auto 32px auto;
          }

          .hero-wordmark {
            height: 44px;
            margin-bottom: 32px;
          }

          .hero-description {
            font-size: 1.125rem;
          }

          .search-container {
            max-width: 100%;
            padding: 0;
          }
        }

        @media (min-width: 768px) {
          .hero-container {
            padding: 40px 100px 0 100px;
            margin: 0 auto 32px auto;
          }

          .hero-wordmark {
            height: 54px;
          }
        }
      `}</style>

            <div className="hero-container">
                <img src="/images/stable-wordmark-dark.svg" alt="Stable wordmark" className="hero-wordmark hero-wordmark-light" />
                <img src="/images/stable-wordmark-light.svg" alt="Stable wordmark" className="hero-wordmark hero-wordmark-dark" />

                <p className="hero-description">
                    Stable is a Layer 1 with USDT0 as the native gas and settlement asset, so there's no second token to fund. Standard EVM tooling works unchanged.
                </p>

                <div className="search-container">
                    <div className="search-input-wrapper" role="button" tabIndex={0} aria-label="Search documentation" onClick={openSearch} onKeyDown={handleKeyDown}>
                        <svg className="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <span className="search-input">Search Documentation</span>
                    </div>
                </div>

                <table className="connection-table">
                    <thead>
                        <tr>
                            <th>Network</th>
                            <th>Chain ID</th>
                            <th>RPC</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Stable Mainnet</td>
                            <td>988</td>
                            <td>https://rpc.stable.xyz</td>
                        </tr>
                        <tr>
                            <td>Stable Testnet</td>
                            <td>2201</td>
                            <td>https://rpc.testnet.stable.xyz</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </>;
};

<Hero />

<GetStarted />

<Footer />