LaTeX

Overview

The LaTeX component provides seamless mathematical expression rendering using react-katex. It supports both inline and block display modes with customizable sizing options, making it perfect for educational content, scientific documentation, and mathematical applications.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/latex.json

Usage

"use client"

import Latex, { LargeBlockMath, LargeInlineMath } from "@/registry/media/latex"

export function Component() {
  return (
    <div className="space-y-4">
      {/* Inline math */}
      <p>
        The famous equation <Latex math="E = mc^2" /> demonstrates mass-energy
        equivalence.
      </p>

      {/* Block math with custom size */}
      <Latex
        math="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
        block
        size="large"
      />

      {/* Enhanced components */}
      <p>
        Large inline: <LargeInlineMath math="\sum_{i=1}^{n} x_i" />
      </p>

      <LargeBlockMath math="\lim_{x \to \infty} \frac{1}{x} = 0" />
    </div>
  )
}

Size Variations

import Latex from "@/registry/media/latex"

export function SizeExample() {
  return (
    <div className="flex items-center gap-4">
      <Latex math="x^2" size="small" />
      <Latex math="x^2" size="medium" />
      <Latex math="x^2" size="large" />
      <Latex math="x^2" size="x-large" />
    </div>
  )
}

Block vs Inline Display

import Latex from "@/registry/media/latex"

export function DisplayExample() {
  return (
    <div className="space-y-4">
      <p>
        Inline math appears within text: <Latex math="\frac{dy}{dx}" />
      </p>

      <Latex
        math="\frac{dy}{dx} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}"
        block
      />
    </div>
  )
}

API Reference

Latex

LargeInlineMath

LargeBlockMath

Size Mapping

The component uses the following size scaling:

• small: 1em (base font size)
• medium: 1.2em (20% larger)
• large: 1.5em (50% larger)
• x-large: 2em (double size)

Examples

Basic Math Expressions

Simple mathematical expressions with inline and block display modes.

Complex Equations

Advanced mathematical expressions including integrals, matrices, and series.

Enhanced Components

Demonstrates the enhanced LargeInlineMath and LargeBlockMath components with various mathematical notations.

Features

Comprehensive LaTeX Support

• Full LaTeX mathematical notation support via KaTeX
• Greek letters, operators, and special symbols
• Fractions, integrals, summations, and limits
• Matrices, vectors, and set theory notation

Flexible Display Options

• Inline Mode: Seamlessly integrates with text flow
• Block Mode: Centered display for prominent equations
• Size Control: Four preset sizes for different contexts
• Custom Styling: Supports additional CSS classes

Enhanced Components

• LargeInlineMath: Pre-configured large inline math for emphasis
• LargeBlockMath: Pre-configured large block math for important equations
• Consistent Styling: Follows design system patterns

Accessibility

• Proper semantic HTML structure
• Screen reader compatible via KaTeX rendering
• Keyboard navigation support
• High contrast support for visual accessibility

LaTeX Syntax Examples

Basic Operations

x + y - z = 0
x \cdot y \times z
\frac{a}{b}
x^2 + y^{10}
\sqrt{x} + \sqrt[3]{y}

Greek Letters

\alpha, \beta, \gamma, \delta, \epsilon
\pi, \sigma, \tau, \phi, \psi, \omega
\Gamma, \Delta, \Theta, \Lambda, \Pi, \Sigma

Calculus

\lim_{x \to \infty} f(x)
\int_0^1 x^2 dx
\frac{d}{dx} f(x)
\frac{\partial f}{\partial x}
\nabla \cdot \vec{F}

Linear Algebra

\begin{bmatrix} a & b \\ c & d \end{bmatrix}
\begin{pmatrix} x \\ y \end{pmatrix}
\det(A) = |A|
A^{-1}

Set Theory

A \cup B \cap C
A \subseteq B \subset C
x \in S, y \notin T
\emptyset, \mathbb{N}, \mathbb{R}

Common Use Cases

Educational Content

Perfect for math courses, tutorials, and educational materials where clear mathematical notation is essential.

Scientific Documentation

Ideal for research papers, technical documentation, and scientific applications requiring precise mathematical expressions.

Engineering Applications

Suitable for engineering calculations, formulas, and technical specifications that need mathematical clarity.

Interactive Learning

Great for interactive math applications, calculators, and educational tools where dynamic math rendering is needed.