Ballpoint
shadcn-style components drawn in blue ballpoint. Same names and props as shadcn/ui, built on Base UI, installed with the shadcn CLI.
Every line is a seeded pen stroke: the same on the server and in the browser, redrawn to fit, and drawn in as it comes into view.
NewDraftv1.0
Ink left
Install
One command sets up the paper, the ink and the font; then add components one by one.
pnpm dlx shadcn@latest init https:/Components
- AccordionHand-ruled sections with a drawn chevron that turns over as they open.
- AlertA note boxed off from the page; the destructive one in red pen.
- Alert DialogA note that needs an answer before you go on, laid over the page with its choices.
- AvatarA portrait circled with the pen; initials on a wash of ink when there's no picture.
- BadgeA word circled or coloured in: a pill pulled once around it, shaded, hatched or in red pen.
- ButtonA pen-drawn box that lifts off a hatched shadow. Solid, outline, secondary, ghost, destructive and link.
- CardA box pencilled around a block of content, with a ruled-off footer.
- CheckboxA drawn box that ticks with a pull up and out past the corner, and dashes when indeterminate.
- DialogA sheet of paper laid over the page: pencilled round, lifted off a hatched shadow, drawn in as it lands.
- Dropdown MenuA slip of choices: the highlighted one shaded in with the pen, ticks and dots drawn as you check them.
- FieldLabels, descriptions, red-pen errors, fieldsets and choice cards: shadcn's field layout, drawn.
- InputA 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.
- KbdA keycap sketched as a small box with a heavier bottom edge.
- LabelA label in the hand, that dims with the control it names.
- PopoverA slip of paper held up next to its trigger, pencilled round and lifted off its shadow.
- ProgressA pill shaded in as the work gets done; indeterminate slides a patch of shading along.
- Radio GroupDrawn rings; choosing one inks a dot in the middle with a tight spiral.
- SelectA drawn box with a chevron that opens a slip of choices, the chosen one ticked.
- SeparatorA gently wandering pen rule, horizontal or vertical.
- SheetA sheet of paper slid in from an edge; its inner edge ruled by hand and hatching a shadow onto the page.
- SkeletonA placeholder pencilled in with hatching the pen keeps going back over.
- SliderA pencilled line with the chosen range inked over it, and a drawn ring to drag.
- SwitchA pill pulled in one motion, shaded in with the pen as the thumb slides across.
- TableRows ruled off by hand, three different lines so neighbours never match.
- TabsThe chosen tab boxed or underlined by hand; the mark slides across and redraws to fit.
- TextareaA multi-line field in a drawn box that grows with its text, optionally on ruled lines.
- ToastNotes pinned to the corner of the page that stack, fan out and swipe away; toast() from anywhere.
- TooltipA word or two on a tab shaded solid with the pen, with a little tail pointing at what it's about.