Foundations

Motion

Springs defined as perceived duration + bounce, identical in Motion and in pure CSS (baked into linear() easings). Only the bouncy spring overshoots; keep it for rare, playful moments.

Live example

Import

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

tsx

import { Appear, AppearProvider } from "@nibapp/ui/components/appear";import { Button } from "@nibapp/ui/components/button";import { spring } from "@nibapp/ui/motion";

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.

Appear

A 6 px rise and fade on the snappy spring for an item that just arrived.

Prop	Type	Default	Description
id (required)	string	—	Stable identity of the item (a tool's call id, a part's index in its message).

Also takes ComponentProps<typeof m.div>, except initial, animate and transition.

AppearProvider

Prop	Type	Default	Description
live (required)	boolean	—
children (required)	ReactNode	—

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 .