Typography

The library's type scale on its own. Until now it only existed inside the components that happened to need it — a Card's title, a TextField's label.

import { Typography } from 'neba';

<Typography level="h2">A sheet of cut acrylic</Typography>
<Typography>Every surface is the same material at a different opacity.</Typography>;

Props

Prop	Type	Default	Description
level	'h1'…'h6' | 'lead' | 'body' | 'caption' | 'overline'	'body'	The type scale, and the element that carries it. Not called `variant` — that word already means the weight of a surface here
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	Semantic colour role. Unlike every other component this has no default: unset means the page’s own colour
weight	'regular' | 'medium' | 'semibold' | 'bold'	—	Overrides the weight the level would pick
align	'start' | 'center' | 'end' | 'justify'	—	Text alignment
lines	number	—	Clamps to this many lines with an ellipsis. 1 is a single-line truncation
gutter	boolean	false	Adds the space below. Off by default: a component that injects margins is one a layout has to fight
render	useRender.RenderProp	—	Changes the element without changing the type scale. Base UI's own escape hatch
children	ReactNode	—	The text

Two deliberate deviations

It is level, not variant. In this library variant means the weight of a surface — solid / outline / text — and a second meaning for the same word is exactly what the prop conventions forbid.

color has no default. Every other component defaults to primary. Here that would make all body text blue: the common case for a paragraph is to look like the paragraphs around it, so an unset color means "inherit the page".

Examples

The scale

body sits on Card's body ladder at md, so a paragraph inside a card and a standalone one are the same text. The headings step up from there, and the leading tightens as they grow — a 30px line does not want the same ratio a 13px one does.

import { Typography } from 'neba';

const LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'lead', 'body', 'caption', 'overline'] as const;

export default function TypographyScale() {
  return (
    <div className="flex flex-col gap-3">
      {LEVELS.map((level) => (
        <div key={level} className="flex items-baseline gap-4">
          <code className="w-20 shrink-0 text-[0.6875rem] text-[var(--neba-muted-fg)]">
            {level}
          </code>
          <Typography level={level}>The quick brown fox</Typography>
        </div>
      ))}
    </div>
  );
}

Colour

import { Typography } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function TypographyColors() {
  return (
    <div className="flex flex-col gap-1.5">
      <Typography>No colour asked for — inherits the page.</Typography>
      {COLORS.map((color) => (
        <Typography key={color} color={color}>
          {color}
        </Typography>
      ))}
    </div>
  );
}

Clamping

One line is a truncation with an ellipsis; more than one is a line clamp. Both are lines.

import { Typography } from 'neba';

const COPY =
  'A Neba surface is a sheet of cut acrylic, not a moulded plastic key. Press is instant and release is slow, elevation is opt-in, and no control ever moves under the cursor.';

export default function TypographyClamp() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <div className="flex flex-col gap-1">
        <Typography level="overline">lines=1</Typography>
        <Typography lines={1}>{COPY}</Typography>
      </div>
      <div className="flex flex-col gap-1">
        <Typography level="overline">lines=2</Typography>
        <Typography lines={2}>{COPY}</Typography>
      </div>
      <div className="flex flex-col gap-1">
        <Typography level="overline">no clamp</Typography>
        <Typography>{COPY}</Typography>
      </div>
    </div>
  );
}

Scale without the element

level sets the type scale and the element, which is the common case. When they have to differ — a subheading that should not enter the document outline, or a <p> that has to look like an h3 — render breaks the tie.

<Typography level="h3" render={<p />}>
  Looks like a heading, is not one
</Typography>

No margins by default

gutter is off. A library component that injects margins is one a layout has to fight; turn it on for a run of prose and leave it off inside a flex column that already owns its spacing.