Code Block

A token-styled code container with a language label and a built-in CopyButton. Supports line numbers and horizontal scroll for long lines. Zero syntax-highlighting dependencies — drop in a highlighter library on top if needed.

Shell command

CopyButton is composed directly into the header. Language label is optional.

bash

npm install @karigiri-kit/core

JSX / TSX

tsx

import { Button, Card, PromptInput } from '@karigiri-kit/core'
import '@karigiri-kit/core/dist/style.css'

export default function App() {
  const [value, setValue] = useState('')
  return (
    <Card>
      <PromptInput
        value={value}
        onChange={setValue}
        onSubmit={v => console.log(v)}
      />
    </Card>
  )
}

With line numbers

Pass showLineNumbers for longer snippets.

tsx

1import { Button, Card, PromptInput } from '@karigiri-kit/core'
2import '@karigiri-kit/core/dist/style.css'
3
4export default function App() {
5  const [value, setValue] = useState('')
6  return (
7    <Card>
8      <PromptInput
9        value={value}
10        onChange={setValue}
11        onSubmit={v => console.log(v)}
12      />
13    </Card>
14  )
15}

CSS (rebrand example)

css

1:root {
2  --kg-color-primary:        #6366f1;
3  --kg-color-primary-hover:  #4f46e5;
4  --kg-color-primary-subtle: #eef2ff;
5  --kg-font-sans:            'Inter', sans-serif;
6  --kg-radius-md:            0.75rem;
7}