Code Block

@sushindustries/ui

A highlighted code slab in the CLI's colours, with a copy button that confirms in place.

Last updated Aug 17, 20266 min read
View as MarkdownEdit on GitHub

Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked.

Use it

import { CodeBlock } from "@sushindustries/ui";

export function Example() {
	return (
		<CodeBlock
			code={`export function greet(name: string): string {\n\treturn \`hello, \${name}\`;\n}`}
			language="ts"
		/>
	);
}
tsx

What you should see

A warm charcoal slab with a lit top edge, the code coloured in the CLI's own syntax palette, and a language chip and copy button in the bottom right. The trailing newline in code is dropped before rendering, so what the block shows and what the copy button puts on the clipboard are exactly the same text.

If nothing happens

An unrecognised language does not error - it falls back to plaintext and renders unstyled but otherwise correct. If the copy button or the language chip is missing entirely, check that iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content and copy-buttonCopy ButtonA glass chip that writes to the clipboard and confirms in the button itself, then hands back.@sushindustries/ui · content are installed alongside this component; registry.ts lists both as dependencies rather than bundling them in.

UsesIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · contentCopy ButtonCopy ButtonA glass chip that writes to the clipboard and confirms in the button itself, then hands back.@sushindustries/ui · content
Used byMarkdown ViewMarkdown ViewRenders Markdown with callouts, CSS-only tabs, custom blocks and highlighted code.@sushindustries/ui · content