Typography

Data Display

Semantic text elements with consistent visual roles.

HeadingLeadBodyMuted and smallCode and quotation

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

typography.tsx

"use client";

import { Typography } from "@/components/ui/typography";

export default function TypographyExample() {
  return (
    <div className="w-full max-w-lg space-y-4">
      <Typography as="h2" variant="heading">
        Thoughtful type, clear hierarchy.
      </Typography>
      <Typography variant="lead">Give every page a readable rhythm.</Typography>
      <Typography>
        Use semantic HTML for the document outline and variants for visual
        treatment. Build with{" "}
        <Typography as="code" variant="code">
          semantic tokens
        </Typography>{" "}
        to keep both themes consistent.
      </Typography>
      <Typography as="blockquote">
        Good design makes complicated work feel simple.
      </Typography>
      <Typography variant="muted">
        Supporting content remains readable in every theme.
      </Typography>
      <Typography variant="small">
        Small print for timestamps, notes, and metadata.
      </Typography>
    </div>
  );
}

Usage

Choose as for document semantics and variant for appearance. Keep heading levels logical; a visual heading variant does not choose a heading level for you. Use code for inline code and blockquote for quotations.

Import

import { Typography } from "@/components/ui/typography";

Shipped as editable source in src/components/ui/typography.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/typography.tsx

import type { HTMLAttributes } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
const styles = {
  default: "text-sm leading-relaxed",
  lead: "text-lg leading-relaxed text-muted-foreground",
  muted: "text-sm text-muted-foreground",
  small: "text-xs leading-relaxed",
  code: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs",
  heading: "text-2xl font-semibold tracking-tight",
};
export function Typography({
  as: Tag = "p",
  variant = "default",
  className,
  ...props
}: HTMLAttributes<HTMLElement> & {
  as?: "p" | "h2" | "h3" | "h4" | "span" | "code" | "blockquote";
  variant?: keyof typeof styles;
}) {
  return (
    <Tag
      className={cn(
        styles[variant],
        Tag === "blockquote" && "border-s-2 ps-4 italic",
        className,
      )}
      {...props}
    />
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Typography props
Prop	Type / Default	Description
as	`p \| h2 \| h3 \| h4 \| span \| code \| blockquote` Default: p	Semantic element.
variant	`default \| lead \| muted \| small \| code \| heading` Default: default	Visual treatment.
children	`ReactNode` Default: —	Text or appropriate inline content.
className	`string` Default: —	Extend text styles.

Build with these too

Kbd Card