KQ-1233 · SLATE/TABLET

Slate Tablet

A tablet frame with its pencil docked magnetically on the long edge: drag the pencil off and it follows the finger 1:1, turning to the writing angle and foreshortening toward the eye as it leaves the magnet, and with it out the screen takes ink whose width follows the hand's speed while the pencil rides the pointer and its shadow closes in. Thrown or brought back to the edge it snaps into the dock on the snap spring with the release velocity and a snap at contact, and the ink fades away on the exit ease; picked up by key it glides to the middle of the screen. The pencil is a real toggle button: Enter or Space picks it up and puts it back, arrow keys write while it is out (Shift moves without ink), and Escape docks it.

KQ-1233 · SLATE/TABLET

Site visit — Basin 314 Oct

Weir gauge read
Silt trap cleared
Fence post by the sluice

Sketch the sluice below.

pencil docked · drag it onto the page

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/slate-tablet

Props

children: ReactNode; default —; The screen's content, laid out in a size container the shape of the screen, under the ink.
label: string; default "Tablet"; The device's accessible name.
docked / defaultDocked: boolean; default true; Controlled or initial pencil state.
onDockedChange: (docked: boolean) => void; default —; Fires from the drag, tap or key that picked the pencil up or put it back.
onStroke: (points: { x: number; y: number }[]) => void; default —; Each stroke as it is finished, in fractions of the screen's width from its top left.
ink: "black" | "blue" | "red"; default "black"; The ink and the pencil's nib; black follows the theme's ink, blue and red are fixed pigments.
bezel: number; default 14; The black glass around the screen, in px, 8 to 24.
orientation: "landscape" | "portrait"; default "landscape"; Lying down with the pencil on top, or standing with it on the right.
sound: boolean; default false; Play the nib's scratch while writing and the magnet's snap. The scratch loop runs only while a stroke moves and stops on lift.
disabled: boolean; default false; Disables the pencil and the ink, and dims the tablet.
className: string; default —; Merged onto the root; the default box is aspect-[4/3] at full width.

Prop	Type	Default	Description
children	ReactNode	—	The screen's content, laid out in a size container the shape of the screen, under the ink.
label	string	"Tablet"	The device's accessible name.
docked / defaultDocked	boolean	true	Controlled or initial pencil state.
onDockedChange	(docked: boolean) => void	—	Fires from the drag, tap or key that picked the pencil up or put it back.
onStroke	(points: { x: number; y: number }[]) => void	—	Each stroke as it is finished, in fractions of the screen's width from its top left.
ink	"black" \| "blue" \| "red"	"black"	The ink and the pencil's nib; black follows the theme's ink, blue and red are fixed pigments.
bezel	number	14	The black glass around the screen, in px, 8 to 24.
orientation	"landscape" \| "portrait"	"landscape"	Lying down with the pencil on top, or standing with it on the right.
sound	boolean	false	Play the nib's scratch while writing and the magnet's snap. The scratch loop runs only while a stroke moves and stops on lift.
disabled	boolean	false	Disables the pencil and the ink, and dims the tablet.
className	string	—	Merged onto the root; the default box is aspect-[4/3] at full width.