Looseleaf — Hand-drawn React components and shadcn registry where every surface is paper.

Hand-drawn React components and shadcn registry where every surface is paper.

Included Components

123
AccordionAlert DialogAlertAnnotateArrowAspect RatioAsteriskAttachmentAvatarBadgeBoilBookmarkBracketBreadcrumbBubbleButton GroupButtonCalendarCalloutCardCarouselChartCheckboxCircledClipboardCode BlockCollapsibleComboboxCommandConfettiContext MenuCorkboardDate PickerDeskDialogDirectionDoodleDrawerDropdown MenuDropzoneEmptyEnvelopeFieldFlip CardFolderFormHandwrittenHighlightHover CardIconIndex CardInput GroupInput OtpInputItemKbdLabel TagLabelLetteringMarkerMarqueeMascotMenubarMessage ScrollerMessageNapkinNative SelectNavigation MenuNotebookPagePaginationPaperPeel CornerPolaroidPopoverProgressPrompt InputQuoteRadio GroupRatingReceiptResizableRevealRibbonScribbleScroll AreaSealSelectSeparatorSheetSidebarSignature PadSignatureSkeletonSketchpadSliderSonnerSpinnerSquiggleStamp ButtonStampStepperSticker BoardSticker PickerSticker SheetStickerSticky NoteStrikeSwitchTableTabsTallyTapeTear OffTextareaTicketToggle GroupToggleTooltipTypewriterTyping IndicatorTypographyUnderline

Looseleaf is a hand-drawn React and Tailwind CSS v4 component library and shadcn registry where every surface is rendered as paper and every outline is drawn with an ink pen. Built on top of Radix primitives and Kevin Sans typography, it preserves shadcn/ui props and data slots while using deterministic SVG ink recipes to draw organic borders, paper cards, stickers, stamps, and doodles with fully accessible keyboard and screen-reader support.