Code Block

File tabs, line numbers, highlighted lines and copy, with a tiny built-in highlighter.

@kineticui/ui

1import { Button, toast } from "@kineticui/ui";
2 
3export default function Page() {
4  // Toasts work anywhere once <Toaster /> is mounted
5  return (
6    <Button onClick={() => toast("Saved")}>
7      Save changes
8    </Button>
9  );
10}

Installation

Copies the source into your project so you can edit every line.

$ npx @kineticui/cli add code-block

Also installs: copy-button

Exports

CodeBlock

Source: packages/ui/src/components/code-block.tsx