Krizaka
Documentation

Code block

A code sample: its language and file name, the code highlighted on the tokens (it scrolls sideways, never shrinks) and a copy button that says it copied — CodeTabs puts several build tools side by side.

WebBetaBlocks

Web only — React, from @krizaka/ui/code-block. Beta: its API may still change in a minor version.

When to use

  • Installation lines, a configuration file, the few lines a reader copies to start.
  • The same thing in Maven, Gradle and npm (CodeTabs).

When not to use

  • For a word of code inside a sentence: use Ticks from the page entry.Use instead: Page
  • For a keyboard shortcut.Use instead: Kbd

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { CodeBlock, CodeTabs, highlight } from "@krizaka/ui/code-block";

Examples

A file

A YAML sample in its file, with a comment and the copy button.

yamlapplication.yml
spring:
  application:
    name: billing # one name, used by logs and traces
krizaka:
  messaging:
    dead-letter: true

Build tools

CodeTabs: Maven and Gradle side by side.

xmlpom.xml
<parent>
  <groupId>com.krizaka</groupId>
  <artifactId>krizaka-parent</artifactId>
  <version>0.1.0</version>
</parent>

Props

CodeBlock

A code sample: language and file name, highlighted code that scrolls sideways, a copy button.

PropTypeDefaultDescription
coderequiredstring—The code, as it is copied.
copiedLabelrequiredstring—What the button says once the code is copied (announced politely).
copyLabelrequiredstring—The copy button's words.
fileReactNode—The file it belongs in (pom.xml, application.yml), or what it is (Terminal).
highlightbooleantrueColours comments, strings, annotations, tags and keywords (the tokens' roles).
languagestringtextIts language, shown as a tag and used by the highlighter: xml, kotlin, ts, bash, yaml…

CodeTabs

Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples.

PropTypeDefaultDescription
labelrequiredstring—What the tabs choose between (Build tool): the tab list's accessible name.
tabsrequiredreadonly { id: string; label: ReactNode; content: ReactNode; }[]—The ways to write it: an id, the tab's words, its sample (a CodeBlock).
defaultValuestring—The tab open at first. Defaults to the first one.

Accessibility

  • A figure whose caption is the file name; the button's label changes to the copied words in a polite live region.
  • The colours of the highlighter are the tokens' text roles (≥ 4.5:1 on the code surface, both themes).

Keyboard

KeysAction
TabFocuses the code, which then scrolls with the arrow keys; then the copy button.
Arrow keysIn CodeTabs, move between the tabs (Radix Tabs).

Best practices

  • Show the file the lines belong in (pom.xml, application.yml); Terminal for a command.
  • Keep samples short enough to copy whole; link to the full file instead of pasting it.
  • The copy words arrive as props (copyLabel, copiedLabel).

Generated from the code of @krizaka/ui 2.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Card grid

A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.

Decision list

The decisions behind a product, numbered: what was chosen, large, then side by side what was refused, why, and what it costs the reader — each with its mark and its colour.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components