kevintngo/looseleaf

어떤 프로젝트인가요?

핵심 기능

• 01shadcn/ui와 동일한 파트, props, data-slot 이름을 사용하는 드롭인 대체 컴포넌트입니다.
• 02시드가 지정된 함수로 손그림 SVG를 생성하며 서버와 브라우저에서 일관된 결과를 제공합니다.
• 03대시보드, 로그인 화면, 가격 페이지 등 바로 사용할 수 있는 블록 61개를 포함합니다.
• 04아이콘 160개, 낙서 48개, 스티커 88개와 Kevin Sans 서체를 제공합니다.
• 05shadcn CLI로 컴포넌트를 추가하고 소스를 저장소에 복사합니다.
• 06키보드 사용, 명확한 포커스 표시, 동작 줄이기, 강제 색상, RTL을 지원합니다.

활용 사례

• shadcn/ui를 기반으로 손그림과 노트 같은 시각 스타일의 제품 UI를 만들 때.
• 종이 테마의 사전 제작 블록으로 랜딩 페이지나 대시보드를 시작할 때.
• SVG를 직접 작성하지 않고 앱에 스티커, 도장, 낙서를 추가할 때.

빠른 시작

1. 1

   components.json에 @looseleaf 레지스트리 추가

2. 2

   shadcn CLI로 컴포넌트 추가

   npx shadcn@latest add @looseleaf/button
3. 3

   프로젝트 리포지토리에 종속성 설치

   npm install
4. 4

   문서 사이트를 로컬에서 실행

   npm run dev

사용 전 알아둘 점

• !컴포넌트는 소스 코드로 리포지토리에 복사되므로 해당 코드는 직접 관리해야 합니다.

토픽

자주 묻는 질문

looseleaf은(는) 무엇인가요?

shadcn/ui에 손그림 감성을 더한 라이브러리: 종이에 펜으로 그린 듯한 접근성 높은 React 및 Tailwind 컴포넌트 123개와 shadcn 레지스트리를 제공합니다. Looseleaf는 React, Tailwind v4, Radix를 기반으로 하며 shadcn/ui의 파트, props, data-slot 이름을 그대로 유지하는 컴포넌트 라이브러리입니다. 표면은 종이처럼, 윤곽선은 펜으로 그린 듯 표현되며 스티커와 도장을 선택적으로 사용할 수 있습니다. API가 shadcn/ui와 같아 기존 JSX를 보통 변경 없이 전환할 수 있습니다.

looseleaf은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

looseleaf은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

looseleaf은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. looseleaf의 마지막 커밋은 2026년 11월 1일입니다.

looseleaf은(는) 어디에 사용할 수 있나요?

shadcn/ui를 기반으로 손그림과 노트 같은 시각 스타일의 제품 UI를 만들 때. 종이 테마의 사전 제작 블록으로 랜딩 페이지나 대시보드를 시작할 때. SVG를 직접 작성하지 않고 앱에 스티커, 도장, 낙서를 추가할 때.

looseleaf는 어떻게 설치하나요?

components.json에 @looseleaf 레지스트리 추가 shadcn CLI로 컴포넌트 추가: npx shadcn@latest add @looseleaf/button 프로젝트 리포지토리에 종속성 설치: npm install 문서 사이트를 로컬에서 실행: npm run dev

looseleaf은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/kevintngo/looseleaf