Code

Code block

Shiki with the kit's own light and dark themes, switched by CSS, so a theme change never re-highlights. Plain text renders first in the exact same layout, so nothing shifts when colors arrive; streamed code highlights as it comes in.

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 { Code, CodeBlock } from "@nibapp/ui/components/code-block";import { CopyButton } from "@nibapp/ui/components/copy-button";import { CopyCommand } from "@nibapp/ui/components/copy-command";

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 .

Code

Inline code span for prose: hairline chip, mono, slightly smaller than surrounding text.

Also takes the props of a <code> element.

CodeBlock

Prop	Type	Default	Description
code (required)	string	—	Source text. A single trailing newline is ignored.
lang	string \| undefined	—	Language id or fence info (`ts`, `tsx`, `python`, `sh`, …). Unknown → plain text.
filename	string \| undefined	—	Shown in the header instead of the language.
showLineNumbers	boolean	false
startLine	number	1	Number of the first line (e.g. a Read from offset 120). Default 1.
highlightLines	readonly number[]	—	1-based line numbers to emphasize (in the same numbering as `startLine`).
wrap	boolean	false	Soft-wrap long lines instead of scrolling horizontally.
maxHeight	number \| string	—	Scroll vertically beyond this height (e.g. `320` or `"40vh"`).
streaming	boolean	false	The code is still arriving: incremental highlighting, line fade-in, stick-to-bottom.
header	boolean	true	Render the header bar (label + copy). Without it, copy floats in on hover.
actions	ReactNode	—	Extra controls rendered in the header, before the copy button; text among them wraps, and the header grows.

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

CopyButton

Icon button that copies `value` and confirms with a check.

Prop	Type	Default	Description
value (required)	string \| (() => string)	—	Text to copy, or a getter evaluated on click (for large/derived values).
label	string	—	Accessible + tooltip label (default `codeBlock.copy`).

Also takes IconButtonProps, except aria-label, children, value and onClick.

CopyCommand

A command to paste into a terminal as one button: the prompt, the command and the copy mark. The check that confirms the copy draws in the accent, one of its few uses, and a polite live region says it was copied.

Prop	Type	Default	Description
command (required)	string	—	The command copied and shown.
prompt	string \| undefined	"$"	Written before it and left out of the copy (`$`); `""` for none.
label	string \| undefined	—	What copying does ("Copy install command"); the name is it and the command, so it holds the text the button shows. Default: "Copy <command>".
className	string \| undefined	—