Foundations

Typography

Inter 4 (opsz) for UI and prose, Geist Mono for code, Source Serif 4 for the occasional greeting or headline. All OFL, all with Cyrillic.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Button } from "@nibapp/ui/components/button";import { LinkedText } from "@nibapp/ui/components/linked-text";import { PathText } from "@nibapp/ui/components/path-text";import { RollingText } from "@nibapp/ui/components/rolling-number";import { SectionLabel } from "@nibapp/ui/components/section-label";import { TextLink } from "@nibapp/ui/components/text-link";import { TruncatedText } from "@nibapp/ui/components/truncated-text";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Button

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "quiet" \| "danger" \| "danger-ghost" \| "link"	"secondary"	primary Neutral ink: the main call to action. Actions are ink, never the accent. secondary Quiet surface with a hairline — the default for most actions. ghost No chrome until hovered — toolbars, inline actions. quiet Words that are also an action, in the text's own weight and laid out from the start, so they line up with the text around them: `xs` in a line (a header's crumbs, a title that renames), `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link). danger Destructive confirmation. danger-ghost Destructive but low emphasis. link Inline text action.
size	"xs" \| "sm" \| "md" \| "lg"	"md"
block	boolean	—
truncate	boolean	—	The button may shrink below its label's width; the label then truncates with an ellipsis.
wrap	boolean	—	The label wraps onto more lines and the button grows, its `leading` icon on the first line: for words that are an action and may run long in another language (a tip). One line keeps the size.
loading	boolean	false	Shows a spinner, keeps the button's width, and blocks interaction.
leading	ReactNode	—	Icon rendered before the label.
trailing	ReactNode	—	Icon or hint (e.g. <Kbd>) rendered after the label.
disabledReason	string \| undefined	—	Disables the button and says why: the reason is its tooltip and its accessible description, and the button stays focusable (`aria-disabled`) so a keyboard reaches it.

Also takes .

LinkedText

Prop	Type	Default	Description
text (required)	string	—

PathText

`src/lib/` dim + `app.ts` bright; the directory gives way first when space runs out. A path reads left to right in every language, so it is laid out left to right (the directory before the name).

Prop	Type	Default	Description
path (required)	string	—
className	string	—

RollingText

A count or an amount whose changed digits roll in place: down when they're new, never moving the text around them (tabular figures). The words around a number stay one run of text, so letters keep their shapes and the sentence keeps its order. A number reads left to right in every language and is isolated as such: in a right-to-left sentence "12" stays "12". Screen readers get the plain value; under Reduce Motion the digits cross-fade.

Prop	Type	Default	Description
value (required)	string	—	The formatted value ("3", "$2.07", "4 need you"); only the digits that change roll.

Also takes the props of a <span> element, except children.

SectionLabel

The small uppercase eyebrow over a group ("INCLUDED", "PERMISSIONS"): one size, weight, tracking and colour for the whole app. A `<span>` by default; `render={(props) => <h3 {...props} />}` when it heads a section (the function form: biome's useHeadingContent reads `<h3 />` as an empty heading), `render={<figcaption />}` and the like for other elements.

Also takes .

TextLink

A link inside text: inline, wraps with the sentence, one underline and focus ring for the whole app. An `<a>` by default; `render={<Link to="…" />}` for a route, `render={<button type="button" />}` for an action.

Prop	Type	Default	Description
tone	"default" \| "quiet" \| "plain" \| "nav"	"default"	default In running text: ink, always underlined. quiet In captions and footers: muted, underlined on hover. plain A name or title that is also a link: its own colour, underlined on hover. nav A header's navigation: muted, padded to a target, never underlined; ink on hover and for the current page (`aria-current="page"`).

Also takes .

TruncatedText

One line of text that truncates with an ellipsis when its box is too narrow, and then shows the whole of it in a tooltip on hover. Text that fits has no tooltip. Screen readers always get the full text (the cut is visual). Use it for names and titles that must stay on one line.

Prop	Type	Default	Description
children (required)	ReactNode	—	The text; cut to one line with an ellipsis when it doesn't fit.
full	ReactNode	—	What the tooltip shows (default: the text itself).
side	TooltipContentProps["side"]	—

Also takes the props of a <span> element, except children.