Vela UI Docs
venizia.ai

Doc Math

Display math as LaTeX source in a monospace box.

npx shadcn@latest add @velaui/doc-math
npx shadcn@latest add @velaui/doc-math

Examples

  • Default

View code

Doc Math · Default

Installation

pnpm dlx velaui add @velaui/doc-math
pnpm dlx velaui add @velaui/doc-math

Code

doc-math-default.tsx
import * as React from "react";

import { DocMath } from "@/components/ui/doc-math";

export default function Example() {
  const [tex, setTex] = React.useState("\\int_0^1 x^2\\,dx = \\tfrac{1}{3}");
  return (
    <div className="w-full max-w-xl p-6">
      <DocMath value={tex} onChange={setTex} />
    </div>
  );
}

Usage

import * as React from "react";

import { DocMath } from "@/components/ui/doc-math";

export default function Example() {
  const [tex, setTex] = React.useState("\\int_0^1 x^2\\,dx = \\tfrac{1}{3}");
  return (
    <div className="w-full max-w-xl p-6">
      <DocMath value={tex} onChange={setTex} />
    </div>
  );
}

Props

PropTypeDefault
classNamestring—
onChange(value: string) => void—
readOnlyboolean—
valuerequiredstring—

Takes these and every prop of DocMathProps.

Dependencies

npm
none besides React
Installs with it
nothing else

Source

components/ui/doc-math.tsx

import { cn } from "@/lib/utils";

export interface DocMathProps {
  /** LaTeX source. */
  value: string;
  readOnly?: boolean;
  onChange?: (value: string) => void;
  className?: string;
}

/** Display math as LaTeX source in a monospace box (no typeset preview). */
function DocMath({ value, readOnly, onChange, className }: DocMathProps) {
  return (
    <div className={cn("my-2 overflow-hidden rounded-md border border-border-default", className)}>
      <div className="px-2 py-1 text-xs text-text-muted">LaTeX · $$</div>
      <textarea
        spellCheck={false}
        aria-label="LaTeX"
        value={value}
        readOnly={readOnly}
        onChange={(e) => onChange?.(e.target.value)}
        className="block min-h-12 w-full resize-none bg-transparent p-2 font-mono text-sm outline-none field-sizing-content"
      />
    </div>
  );
}

export { DocMath };