Notebook Page

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add notebook-page

Usage#

import { NotebookPage } from "@/components/ui/notebook-page"

export function Example() {
  return (
    <NotebookPage rows={8}>
      <p>Everything inside takes the page's line height,</p>
      <p>so plain lines of text sit on the rules.</p>
    </NotebookPage>
  )
}

Anatomy#

import {
  NotebookBinding,
  NotebookPage,
  NotebookPageField,
  NotebookPageTitle,
} from "@/components/ui/notebook-page"

<NotebookBinding start={…} end={…} />
<NotebookPage>
  <NotebookPageTitle />
  <NotebookPageField />
</NotebookPage>

Lines#

ruled (the default) prints a hairline at the foot of every line, where the writing rests. dotted sets a dot at every line and every line-width step, a bullet journal's grid; grid crosses the rules with columns of the same pitch; plain keeps the rhythm and prints nothing. The rules are the soft border role and the dots a speck of the muted ink, so every pattern re-themes with the page and never competes with what is written on it.

Sizes#

The size picks the line and the type that reads well on it together: sm is 14px type on a 24px line, md (the default) 16px on 28px, lg 18px on 32px. The line is the --notebook-line custom property, the one length everything inside inherits as its line height.

Margin#

margin="left" prints the red rule of a school notebook down the left of the sheet, one and a half lines in from the edge, and starts the writing a quarter line past it. Both are measured in --notebook-line, so the margin keeps its proportion at every size. The inset belongs to the margin: it outranks a plain px-* on the page, so the rule never ends up under the text (pad the right with pr-*, or move the inset on purpose with data-[margin=left]:pl-*). The red is the --notebook-margin token, the error role at under half strength.

Fields#

NotebookPageField writes straight on the rules: a textarea with no frame, no fill and no ring, whose line height is the page's line, so every line typed sits on one and its rows are page lines. Focus shows as the brand caret alone, so a field that always has focus (a pocket notebook's body) never looks tinted; the placeholder is the muted ink. asChild puts the same style on another field (an <input>, a third-party textarea). NotebookPageTitle is the title line: one line, larger and bolder, still exactly one rule tall; an input by default, a heading with asChild. Neither carries a visible label, so give each an aria-label.

Focus tint#

focusTint adds the accent's faintest wash over the lines while a field or the title has focus. Leave it off where one field is the page (a pocket notebook whose body is focused as soon as it opens: the tint would never go away); turn it on where several fields share a sheet and the eye has to find the one being written in.

Binding#

NotebookBinding is the spiral along the top edge of a pocket notebook: metal rings over the shade the binding throws on the sheet, all in the --notebook-ring* and --notebook-binding-shade tokens. rings sets how many; unset, the strip fills with as many whole rings as fit its width, spread evenly, at any width. start and end hold a control or a hint at either end (a close button, a shortcut, a live status). Put it above the page, inside the notebook's frame.

Pocket notebook#

The parts together: a binding with a close button and the shortcut at its ends, a ruled page with the margin, a title line and the note written on the rules, and the actions under the sheet. Type a note and save it: the shortcut hint gives way to a live “Saved”.

With the Rich Text Editor#

Write straight onto the page: drop the editor's frame and fill (the paper is the ground) and tell its blocks to use the line with no gap between them, so each new paragraph lands on the next rule. Content that sets its own line height or margins drifts a little further off the rules with every block; this is the one adjustment it needs.

Rows#

rows gives the page its height in lines, like a textarea's, so a blank note still reads as a page to write on. The page grows past it with its content; unset, it hugs what it holds. Padding never knocks the lines off the text: the pattern starts at the first line of the content box and still runs through the padding.

API reference#

FAQ#