# Ballpoint

> shadcn-style React components drawn in blue ballpoint, on Base UI. Same names and props as shadcn/ui; every border, fill, rule and icon is a seeded pen stroke. Installed with the shadcn CLI as source you own. React 19, Tailwind CSS 4, MIT.

Strokes are generated from a seed, so a component draws the same wobble on the server and in the browser. By default everything draws itself in the first time it scrolls into view; with reduced motion it appears already drawn.

Everything is one ink at different pressures on one paper. Change `--ink` and `--paper` and the rest follows; shadcn's own token names (`--background`, `--primary`, `--border`, …) are mapped onto these, so shadcn blocks sit on the same page.

## Install

- `npx shadcn@latest init https://ballpoint.st9wd.com/r/ballpoint.json`: writes the tokens into your global CSS, adds the Gaegu font, copies the stroke engine and registers the `@ballpoint` namespace in components.json.
- `npx shadcn@latest add @ballpoint/button`: then any component by name.

## Docs

- [Installation](https://ballpoint.st9wd.com/docs): init, add, theme tokens and pen settings
- [Pens and papers](https://ballpoint.st9wd.com/docs/themes): the other inks and paper stocks, each one registry item
- [Customizer](https://ballpoint.st9wd.com/customize): try a pen, a paper and the pen settings together, and copy the result
- [Everything in one file](https://ballpoint.st9wd.com/llms-full.txt): every component's usage, props and pen settings

## Components

- [Button](https://ballpoint.st9wd.com/docs/button): A pen-drawn box that lifts off a hatched shadow. Solid, outline, secondary, ghost, destructive and link. `@ballpoint/button`
- [Input](https://ballpoint.st9wd.com/docs/input): A text field in a drawn box, or on the line you write on. Focus draws one more pass in full ink; invalid redraws it in red pen. `@ballpoint/input`
- [Textarea](https://ballpoint.st9wd.com/docs/textarea): A multi-line field in a drawn box that grows with its text, optionally on ruled lines. `@ballpoint/textarea`
- [Label](https://ballpoint.st9wd.com/docs/label): A label in the hand, that dims with the control it names. `@ballpoint/label`
- [Separator](https://ballpoint.st9wd.com/docs/separator): A gently wandering pen rule, horizontal or vertical. `@ballpoint/separator`
- [Field](https://ballpoint.st9wd.com/docs/field): Labels, descriptions, red-pen errors, fieldsets and choice cards: shadcn's field layout, drawn. `@ballpoint/field`
- [Checkbox](https://ballpoint.st9wd.com/docs/checkbox): A drawn box that ticks with a pull up and out past the corner, and dashes when indeterminate. `@ballpoint/checkbox`
- [Radio Group](https://ballpoint.st9wd.com/docs/radio-group): Drawn rings; choosing one inks a dot in the middle with a tight spiral. `@ballpoint/radio-group`
- [Switch](https://ballpoint.st9wd.com/docs/switch): A pill pulled in one motion, shaded in with the pen as the thumb slides across. `@ballpoint/switch`
- [Slider](https://ballpoint.st9wd.com/docs/slider): A pencilled line with the chosen range inked over it, and a drawn ring to drag. `@ballpoint/slider`
- [Card](https://ballpoint.st9wd.com/docs/card): A box pencilled around a block of content, with a ruled-off footer. `@ballpoint/card`
- [Badge](https://ballpoint.st9wd.com/docs/badge): A word circled or coloured in: a pill pulled once around it, shaded, hatched or in red pen. `@ballpoint/badge`
- [Avatar](https://ballpoint.st9wd.com/docs/avatar): A portrait circled with the pen; initials on a wash of ink when there's no picture. `@ballpoint/avatar`
- [Kbd](https://ballpoint.st9wd.com/docs/kbd): A keycap sketched as a small box with a heavier bottom edge. `@ballpoint/kbd`
- [Alert](https://ballpoint.st9wd.com/docs/alert): A note boxed off from the page; the destructive one in red pen. `@ballpoint/alert`
- [Skeleton](https://ballpoint.st9wd.com/docs/skeleton): A placeholder pencilled in with hatching the pen keeps going back over. `@ballpoint/skeleton`
- [Progress](https://ballpoint.st9wd.com/docs/progress): A pill shaded in as the work gets done; indeterminate slides a patch of shading along. `@ballpoint/progress`
- [Table](https://ballpoint.st9wd.com/docs/table): Rows ruled off by hand, three different lines so neighbours never match. `@ballpoint/table`
- [Tabs](https://ballpoint.st9wd.com/docs/tabs): The chosen tab boxed or underlined by hand; the mark slides across and redraws to fit. `@ballpoint/tabs`
- [Accordion](https://ballpoint.st9wd.com/docs/accordion): Hand-ruled sections with a drawn chevron that turns over as they open. `@ballpoint/accordion`
- [Dialog](https://ballpoint.st9wd.com/docs/dialog): A sheet of paper laid over the page: pencilled round, lifted off a hatched shadow, drawn in as it lands. `@ballpoint/dialog`
- [Alert Dialog](https://ballpoint.st9wd.com/docs/alert-dialog): A note that needs an answer before you go on, laid over the page with its choices. `@ballpoint/alert-dialog`
- [Sheet](https://ballpoint.st9wd.com/docs/sheet): A sheet of paper slid in from an edge; its inner edge ruled by hand and hatching a shadow onto the page. `@ballpoint/sheet`
- [Popover](https://ballpoint.st9wd.com/docs/popover): A slip of paper held up next to its trigger, pencilled round and lifted off its shadow. `@ballpoint/popover`
- [Tooltip](https://ballpoint.st9wd.com/docs/tooltip): A word or two on a tab shaded solid with the pen, with a little tail pointing at what it's about. `@ballpoint/tooltip`
- [Dropdown Menu](https://ballpoint.st9wd.com/docs/dropdown-menu): A slip of choices: the highlighted one shaded in with the pen, ticks and dots drawn as you check them. `@ballpoint/dropdown-menu`
- [Select](https://ballpoint.st9wd.com/docs/select): A drawn box with a chevron that opens a slip of choices, the chosen one ticked. `@ballpoint/select`
- [Toast](https://ballpoint.st9wd.com/docs/toast): Notes pinned to the corner of the page that stack, fan out and swipe away; toast() from anywhere. `@ballpoint/toast`
- [Ink Icons](https://ballpoint.st9wd.com/docs/ink-icons): Everyday UI icons drawn with the pen on a 16px grid: copy, search, mail, sun and moon, and fifty more. They take the text colour and can draw themselves in. `@ballpoint/ink-icons`
- [Annotate](https://ballpoint.st9wd.com/docs/annotate): Marks a word or phrase the way you would with a pen: underlined, circled, boxed, struck through, scribbled out, bracketed or shaded in, drawn as it scrolls into view. `@ballpoint/annotate`
- [Section Heading](https://ballpoint.st9wd.com/docs/section-heading): A section title in block capitals, written in by hand and underlined with a swoosh, with a few specks where the pen lifted. `@ballpoint/section-heading`
- [Paper](https://ballpoint.st9wd.com/docs/paper): A sheet with a real paper texture on any paper colour: plain, ruled, squared or dotted, with coffee rings, age spots and a desk lamp at night. `@ballpoint/paper`
- [Frame](https://ballpoint.st9wd.com/docs/frame): A photo frame ruled round a picture, each side pulled past the corners and gone over again, with a caption written underneath. `@ballpoint/frame`
- [Copy Button](https://ballpoint.st9wd.com/docs/copy-button): Copies a value; its label swaps for a pen-drawn tick and "Copied" without changing width. `@ballpoint/copy-button`

## Pens and papers

- `@ballpoint/pen-blue`: Blue ballpoint. The default: a cheap blue ballpoint, pale blue at night.
- `@ballpoint/pen-black`: Black fineliner. A felt-tip fineliner: nearly black by day, nearly white by night.
- `@ballpoint/pen-pencil`: Pencil. Soft graphite, a little grey and a little shine.
- `@ballpoint/pen-green`: Green ink. A fountain-pen green.
- `@ballpoint/paper-cream`: Cream. The default: warm notebook stock, navy at night.
- `@ballpoint/paper-white`: White. Bright copier paper, near-black at night.
- `@ballpoint/paper-legal`: Legal pad. Yellow legal pad, dark olive at night.

## Optional

- [Source on GitHub](https://github.com/useit015/ballpoint)
- [Registry index](https://ballpoint.st9wd.com/r/registry.json): the shadcn registry, one JSON file per item under /r/