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

# Brale

> Issue and manage compliant stablecoins on Spark with Brale.

export const Button = ({href, children, className = "", target = "_self", outline}) => {
  return <a href={href} target={target} rel="noopener noreferrer" className={`not-prose inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium rounded-xl transition-colors duration-200 ${outline ? "spark-button-outline" : "spark-button"} ${className}`}>
      {children}
    </a>;
};

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const VCard = ({img, light, dark, icon, href, title, description, target = "_self"}) => {
  return <div className="spark-card overflow-hidden rounded-2xl flex justify-center items-center hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="vcard-col">
          <div className="vcard-image w-full aspect-video relative">
            {light && dark ? <>
                <img src={light} alt={title} className="icon-light w-full h-full object-cover pointer-events-none" />
                <img src={dark} alt={title} className="icon-dark w-full h-full object-cover pointer-events-none" />
              </> : <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{
    backgroundImage: `url(${img})`
  }} />}
          </div>
          <div className="vcard-content flex flex-col gap-2 p-6">
            <h2 className="card-title text font-semibold leading-none">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

<Frame className="chill">
  <img src="https://mintcdn.com/lightspark/1qhg2-dutO4_dxVH/images/integrations/brale.png?fit=max&auto=format&n=1qhg2-dutO4_dxVH&q=85&s=dd97a707b56bbb6f937377133252b0ed" alt="Brale" width="1920" height="1081" data-path="images/integrations/brale.png" />
</Frame>

Brale lets you issue and manage fiat-backed stablecoins on Spark with built‑in compliance and treasury controls. Use Brale to create a token, set rules (freeze, allow/block lists), mint/burn supply, and distribute to Spark wallet addresses via API or dashboard. Designed for regulated issuers and fintechs. See the official docs for details.

<Info>
  **USDB** is Brale's flagship stablecoin on Spark, a dollar-pegged token backed 1:1 by U.S. Treasuries that earns 3.5-6% APY paid daily in Bitcoin. [Learn more about USDB →](https://www.spark.money/research/usdb-stablecoin-pays-bitcoin)
</Info>

<Button href="https://brale.xyz/" outline target="_blank">
  Learn more ->
</Button>

<br />

***

## Features

<Columns cols="2" className="gap-4 chill">
  <Card title="Issue Stablecoins" iconLight="/icons/icon-coins-black.svg" iconDark="/icons/icon-coins-white.svg" description="Issue Bitcoin native stablecoins" />

  <Card title="Compliance Controls" iconLight="/icons/icon-shield-black.svg" iconDark="/icons/icon-shield-white.svg" description="Simple KYC, KYB, Custody, and more" />

  <Card title="Stablecoin Operations" iconLight="/icons/icon-bank-black.svg" iconDark="/icons/icon-bank-white.svg" description="Secure stablecoin orechestration workflows" />

  <Card title="Market Data" iconLight="/icons/icon-bank-black.svg" iconDark="/icons/icon-bank-white.svg" description="Public API for metadata and price feeds" />
</Columns>

<br />

***

## Quick Integration

Below is a minimal pattern that mirrors Brale’s Quick Start: create or select a token in the dashboard, use an API key, then mint to a Spark address. Adjust endpoints and fields per your Brale workspace and token configuration.

Reference: [Quick Start](https://docs.brale.xyz/overview/quick-start)

```typescript theme={null}
// 1) Create/select a token in the Brale dashboard and get an API key
// 2) Server-side mint to a Spark address

const BRALE_API = 'https://api.brale.xyz'; // example base URL
const BRALE_API_KEY = process.env.BRALE_API_KEY!;
const TOKEN_ID = process.env.BRALE_TOKEN_ID!; // your Brale-issued token id

type MintRequest = {
  tokenId: string;
  amount: string;            // integer string amount in smallest units
  recipientSparkAddress: string; // Spark address (bech32m) to receive tokens
};

async function mintToSpark(req: MintRequest) {
  const res = await fetch(`${BRALE_API}/v1/tokens/${req.tokenId}/mint`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${BRALE_API_KEY}`,
    },
    body: JSON.stringify({
      amount: req.amount,
      recipient: req.recipientSparkAddress,
    }),
  });

  if (!res.ok) {
    const err = await res.text();
    throw new Error(`Brale mint failed: ${res.status} ${err}`);
  }
  return await res.json();
}

// Example usage
await mintToSpark({
  tokenId: TOKEN_ID,
  amount: '1000000', // e.g., 1.000000 unit if 6 decimals
  recipientSparkAddress: 'spark1xxxxx',
});
```

<br />

***

## Documentation

<Columns cols="1">
  <HCard title="Brale Official Docs" icon="/icons/icon-app-brale.svg" href="https://docs.brale.xyz/" description="Official documentation for Brale" />
</Columns>