Search documentation, components, and switch theme.
A read-only syntax-highlighted code viewer powered by Shiki with CSS variable theming.
npx shadcn@latest add https://design-system-three-mauve.vercel.app/r/code-snippet.jsonnpm install shiki class-variance-authority lucide-react--shiki-* CSS variables to your global CSS.The component uses CSS custom properties for syntax colors. Add these to your :root and .dark selectors:
:root {
--shiki-foreground: var(--foreground);
--shiki-background: transparent;
--shiki-token-constant: var(--emerald-600);
--shiki-token-string: var(--lilac-700);
--shiki-token-comment: var(--emerald-500);
--shiki-token-keyword: var(--mint-800);
--shiki-token-parameter: var(--emerald-600);
--shiki-token-function: var(--mint-800);
--shiki-token-string-expression: var(--lilac-700);
--shiki-token-punctuation: var(--foreground);
--shiki-token-link: var(--emerald-600);
--shiki-token-monetary: var(--gold-600);
}
.dark {
--shiki-foreground: var(--emerald-200);
--shiki-background: var(--emerald-800);
--shiki-token-constant: var(--mint-700);
--shiki-token-string: var(--lilac-500);
--shiki-token-comment: var(--emerald-400);
--shiki-token-keyword: var(--mint-600);
--shiki-token-parameter: var(--mint-700);
--shiki-token-function: var(--mint-600);
--shiki-token-string-expression: var(--lilac-500);
--shiki-token-punctuation: var(--emerald-300);
--shiki-token-link: var(--mint-700);
--shiki-token-monetary: var(--gold-300);
}import { CodeSnippet } from '@/components/code/code-snippet'<CodeSnippet code={`const x = 42;`} language="typescript" />import { CodeSnippet } from '@/components/ui/code-snippet';
export function Example() {
return (
<CodeSnippet
code="console.log('hello')"
language="typescript"
/>
);
}send [USD/2 10000] (
source = @orders:1234
destination = {
15% to {
20% to @platform:commission:sales_tax
remaining to @platform:commission:revenue
}
10% to {
// user gets 10% cashback up to $5 for participating merchants
max [USD/2 500] to @users:1234:cashback
remaining to @merchants:6789
}
remaining to @merchants:6789
}
)import { Client } from '@formance/formance-sdk';
const client = new Client({
serverURL: 'https://sandbox.formance.cloud',
});
const ledger = await client.ledger.v2.createTransaction({
ledger: 'default',
postTransaction: {
postings: [{
source: 'world',
destination: 'orders:1234',
asset: 'USD/2',
amount: BigInt(1500),
}],
},
});import { Client } from '@formance/formance-sdk';
const client = new Client({
serverURL: 'https://sandbox.formance.cloud',
});
const ledger = await client.ledger.v2.createTransaction({
ledger: 'default',
postTransaction: {
postings: [{
source: 'world',
destination: 'orders:1234',
asset: 'USD/2',
amount: BigInt(1500),
}],
},
});fctl stack create <stack-name> --organization <organization-id>fctl ledger accounts list --ledger <ledger> --organization <organization-id>fctl wallets credit 10 USD/2 --id <wallet-id> --organization <organization-id>fctl payments connectors install <connector> config.json --organization <organization-id>import { Client } from '@formance/formance-sdk';
const client = new Client({
serverURL: 'https://sandbox.formance.cloud',
});
const ledger = await client.ledger.v2.listLedgers();import { Client } from '@formance/formance-sdk';
const client = new Client({
serverURL: 'https://sandbox.formance.cloud',
});
const ledger = await client.ledger.v2.listLedgers();curl -X POST https://sandbox.formance.cloud/api/ledger/v2/default/transactions