Skip to content

Foundry

Volt · Design System

Components

Components

Docs chrome

Code block

Encased, documentation-grade code frames with mac-style chrome, line numbers, wrap toggle, copy, and a bottom navigation scrollbar for long lines.

When to use

Use for installation snippets, API samples, and token recipes. Prefer wrap for prose-adjacent short samples; keep scroll mode for wide config files.

Touch drag + momentum physics

Swipe to pan, then release for exponential-decay fling (heavy preset on code). Includes velocity EMA sampling, max-speed clamp, rubber-band overscroll, and edge spring-back. Bottom track uses the snappy preset. Mouse text selection still works on the code body.

Wide snippet + bottom scroll

Drag the bottom bar, use ‹ ›, or jump to start/end. Progress % shows how far you are.

vite.config.ts
import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { nitro } from "nitro/vite";
 
export default defineConfig(({ command }) => ({
  server: { host: "0.0.0.0", port: 8080, strictPort: true },
  plugins: [
    tsconfigPaths(),
    tailwindcss(),
    tanstackStart(),
    ...(command === "build" ? [nitro({ preset: "vercel" })] : []),
    viteReact(),
  ],
}));

Wrapped lines

vite.config.ts (wrapped)
import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { nitro } from "nitro/vite";
 
export default defineConfig(({ command }) => ({
  server: { host: "0.0.0.0", port: 8080, strictPort: true },
  plugins: [
    tsconfigPaths(),
    tailwindcss(),
    tanstackStart(),
    ...(command === "build" ? [nitro({ preset: "vercel" })] : []),
    viteReact(),
  ],
}));

Line wrap on · horizontal scroll disabled

Compact / no line numbers

example.tsx
import { CodeBlock } from "@/components/docs/code-block";

export function Example() {
  return (
    <CodeBlock
      code={`const token = "foundry-volt";`}
      language="ts"
      filename="tokens.ts"
    />
  );
}

Inside DemoBlock

Code tab uses the same encased block

inside-demoblock.tsx
import { CodeBlock } from "@/components/docs/code-block";
 
export function Example() {
  return (
    <CodeBlock
      code={`const token = "foundry-volt";`}
      language="ts"
      filename="tokens.ts"
    />
  );
}

Usage

usage.tsx
import { CodeBlock } from "@/components/docs/code-block";
 
<CodeBlock
  code={source}
  language="tsx"
  filename="App.tsx"
  showLineNumbers
  defaultWrap={false}
  maxHeight={320}
/>

Do

  • Keep one primary action (Copy) in the top chrome
  • Show bottom scroll nav when horizontal overflow exists
  • Offer wrap for mobile and dense docs layouts
  • Label language / filename for context

Don’t

  • Nest raw pre/code without the encased frame in docs
  • Animate the scrollbar thumb continuously
  • Force horizontal scroll on short, wrap-friendly snippets
  • Drop keyboard access — pre is focusable for scroll keys
PreviousCommandNextAvatar