kevintngo/looseleaf는 모든 바탕이 종이이고 모든 선을 펜으로 그린 것처럼 보이는 React 컴포넌트 라이브러리입니다. React, Tailwind v4, Radix 위에서 돌고 shadcn 레지스트리로 배포합니다. 2026년 11월 1일 공개됐고, 공식 사이트 자체가 이 컴포넌트로 만든 책상입니다.
| 항목 | 내용 |
|---|---|
| 컴포넌트 | 123개. 버튼부터 사이드바, 차트까지 shadcn/ui 부품 전부와 종이 물건, 표시, 스티커, 스케치패드, 채팅 키트 |
| 블록 | 61개. 사이드바, 로그인, 가입, 대시보드, 설정, 가격표, 채팅, 노트, 랜딩 |
| 그림 | 아이콘 160개, 낙서 48개, 스티커 88개, 배지와 도장, 마스코트 Stubby 15가지 자세. 전부 코드로 그림 |
| 글꼴 | 손글씨 글꼴 Kevin Sans 하나를 본문, 제목, 도장용으로 맞춤 |
설치
components.json에 레지스트리를 한 번 넣습니다.
{
"registries": { "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json" }
}그다음 필요한 것만 받습니다.
npx shadcn@latest add @looseleaf/button
npx shadcn@latest add @looseleaf/login-01
npx shadcn@latest add @looseleaf/looseleaf # 테마컴포넌트는 의존성으로 깔리지 않고 소스로 들어옵니다(components/ui/*.tsx, lib/ink/*). 내 코드가 되니 마음대로 고치면 됩니다. 테마를 받으면 Kevin Sans 글꼴이 함께 옵니다.
import { InkProvider } from "@/lib/ink/react"
import { Button } from "@/components/ui/button"
export function App() {
return (
<InkProvider>
<Button>Save changes</Button>
</InkProvider>
)
}그림을 그리는 방식
그려진 부분은 모두 진짜 DOM 라벨 뒤에 깔린 <svg data-ink> 하나입니다. 그림은 시드를 받는 순수 TypeScript 함수가 CSS 변수로 색을 칠한 SVG를 씁니다. 그래서 같은 시드면 서버와 브라우저에서 같은 선이 나오고, 테마를 바꾸면 색이 따라 바뀝니다.
접근성
손그림처럼 보여도 shadcn/ui와 같은 Radix 부품이라 동작은 진짜 컴포넌트입니다. README는 키보드 조작, 보이는 포커스, AA 글자 대비, 24px 터치 영역, 움직임 줄이기, 강제 색상 모드, 오른쪽에서 왼쪽 쓰기(RTL), 세 가지 밀도를 지원한다고 적었습니다.
라이선스
코드, 그림, Kevin Sans 글꼴 모두 MIT입니다. 함께 쓰는 IBM Plex Mono는 SIL OFL 1.1입니다.
오늘 할 일
사이드 프로젝트의 로그인 화면 하나를 @looseleaf/login-01로 바꿔 보세요. 블록 하나만 넣어도 분위기가 크게 달라집니다.
쇼츠로 보기
이 글은 비치콤버스 쇼츠 No.51의 짝 글입니다. 짧은 주소 beachcombers.co.kr/s/51.