Code Block

npx shadcn@latest add https://ui.saasflare.io/r/code-block.json

pnpm add @saasflare/ui

"use client"import { CodeBlock } from "@saasflare/ui"const SOURCE = `import { Button } from "@saasflare/ui"export function Cta() {  return <Button intent="primary">Start free trial</Button>}`/** A framed code block with filename header, language badge, and copy button. */export function Demo() {    return (        <CodeBlock            className="w-full max-w-md"            code={SOURCE}            language="tsx"            filename="cta.tsx"        />    )}

"use client"import { CodeBlock } from "@saasflare/ui"const SOURCE = `pnpm add @saasflare/uiimport "@saasflare/ui/styles"// Wrap your app once<SaasflareShell>  <App /></SaasflareShell>`/** A code block with a line-number gutter. */export function Demo() {    return (        <CodeBlock            className="w-full max-w-md"            code={SOURCE}            language="bash"            filename="setup.sh"            showLineNumbers        />    )}