libraries.dev

# Libraries.dev **AI 에이전트를 위한 고품질 UI 라이브러리.** 인터페이스를 살아있게 만드는 효과를 위한 7가지 React 라이브러리: 카드 테두리를 따라 흐르는 빛의 빔, 모델이 작업하는 동안 생각하는 오브, 살아있는 얼굴을 가진 봇 아바타, 액체처럼 합쳐지는 모양, 목소리에 따라 올라오는 글로우, 빛을 받는 브러시드 메탈, 픽셀 모자이크를 실제 사진으로 녹이는 이미지 로더. 각각 npm에서 설치되며, 이미 가지고 있는 요소를 감싸는 단일 컴포넌트로 앱에 통합됩니다. 마크업은 의미를 유지하고, 효과는 주변이나 뒤에 렌더링되며, 손으로 작성한 WebGL 대신 props로 조정됩니다. | 라이브러리 | 기능 | npm | 페이지 | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | 카드, 버튼 또는 입력 필드의 테두리를 따라 흐르는 부드러운 광택 | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | 기다리는 동안 생각하는 오브 — AI 인터페이스를 위한 9가지 로딩 상태 | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | 살아있는 얼굴을 가진 애니메이션 봇 아바타 — 18가지 광택 모양, 4가지 상태, AI 에이전트용 | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | 텍스트는 선명하게 유지하면서 조각이 구이처럼 합쳐지고 젤리처럼 변형 | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | 채팅 입력 또는 휴대폰 화면 하단에서 목소리에 따라 올라오는 글로우 | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | 버튼, 아이콘, 텍스트 및 배지용 리퀴드 메탈, 반사 및 커서 라이트 포함 | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | 이미지가 되는 로더 — 사진으로 안정되는 WebGL 픽셀 모자이크 | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | [libraries.dev](https://libraries.dev)에서 각각을 시도해 보세요: 놀 수 있는 라이브 프리뷰, 설치 명령, 사용 코드, 정확한 구성을 복사하는 플레이그라운드. ## 사용 방법 모든 라이브러리는 프롬프트로 제공됩니다. 복사하여 코딩 에이전트에 붙여넣고 자신의 것으로 만드세요 — 설정 없이 세 단계로. 1. **프롬프트 복사.** 모든 라이브러리 페이지에는 *프롬프트 복사* 버튼이 있습니다. 한 번 붙여넣으면 에이전트에 전체 라이브러리(매개변수 어휘 및 현재 설정)가 제공됩니다. 2. **에이전트에 붙여넣기.** Claude Code, Cursor 또는 Codex에 넣으세요. 에이전트가 패키지를 설치하고 테마에 맞게 연결합니다. 3. **자신의 것으로 만들기.** Pro로 [Studio](https://libraries.dev/studio.html)를 열어 모든 설정을 실시간으로 조정하고 결과를 props로 복사하세요. 또는 일반적인 방법: ```bash npm install border-beam # 또는 thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>시작하기</button> </BorderBeam> ``` 각 패키지의 README에는 props가 문서화되어 있습니다. ## FAQ **무엇이 필요한가요?** React 18 이상. 각 라이브러리는 런타임 종속성이 없는 독립 패키지이며, Image는 `three`를 peer dependency로 필요로 합니다. **코딩 에이전트와 작동하나요?** 네 — 그것이 핵심입니다. 모든 라이브러리는 Cursor, Claude Code 및 Codex에서 깨끗하게 설치 및 구성되며, 각 플레이그라운드의 복사-프롬프트 버튼은 에이전트에 라이브러리의 전체 매개변수 어휘와 현재 설정을 제공합니다. **라이트/다크 모드?** 둘 다 자동 감지됩니다. 기본 `theme="auto"`는 조상의 `data-theme` 속성 또는 `dark` 클래스를 확인하고, `prefers-color-scheme`으로 폴백하며, 변경 시 실시간으로 업데이트됩니다. `theme="dark"` 또는 `theme="light"`를 전달하여 고정할 수 있습니다. **Pro와 Studio란 무엇인가요?** 모든 라이브러리에 걸친 단일 플랜입니다. Pro는 [Studio](https://libraries.dev/studio.html)를 잠금 해제합니다 — 공개 플레이그라운드 이상의 심층 라이브러리별 사용자 지정, 정확한 구성 내보내기 — Pro 프리셋 및 모든 향후 라이브러리와 업데이트 포함. [가격](https://libraries.dev/pro.html) 참조. **상업 프로젝트?** 라이브러리는 MIT — 상업 작업을 포함한 어디서나 사용 가능. Pro 콘텐츠(Studio 내보내기, Pro 프리셋 및 레시피)는 구매한 플랜에 따라 귀하 또는 팀에게 무제한 프로젝트에 대해 라이선스됩니다. ## 이 저장소에서 작업 npm workspaces: `packages/`는 게시된 라이브러리(npm 패키지당 하나의 폴더, 각각 자체 README 및 LICENSE 포함), `sites/`는 데모 사이트 — `sites/home`은 libraries.dev입니다. ```bash npm install npm run build:site-home # 모든 라이브러리 + libraries.dev, CI처럼 npm run dev -w @sites/home # 모든 페이지와 Studio가 있는 libraries.dev npm run typecheck # 모든 워크스페이스 ``` 홈 사이트는 빌드된 패키지를 가져오므로, 페이지 또는 벤치 전에 라이브러리를 빌드하세요 (`npm run build:beam`, `build:orbs`, `build:gooey`, `build:voice`, `build:metal`, `build:image`). 독립 데모(`@sites/beam`, `@sites/gooey`, `@sites/orbs`)는 라이브러리를 소스에 별칭으로 지정하고 재빌드 없이 핫 리로드합니다. ## 릴리스 게시는 패키지별로 (`publish.yml`, `npm publish -w <package>`): 패키지 이름으로 워크플로를 수동으로 실행하거나, 태그가 `<package>@<version>`(`voice-glow@0.2.0`)인 GitHub 릴리스를 게시하세요. 레지스트리에 이미 있는 버전은 건너뜁니다. ## 배포 두 사이트는 별도로 호스팅됩니다. GitHub Pages는 저장소당 하나의 사용자 지정 도메인을 제공하기 때문입니다: - **beam.jakubantalik.com** — `.github/workflows/deploy.yml`을 통한 GitHub Pages; 도메인 바인딩은 `sites/beam/public/CNAME`에 있습니다. - **gooey.jakubantalik.com** — Cloudflare Pages, `npm run build:site-gooey`로 빌드, 출력 `sites/gooey/dist`. - **orbs.jakubantalik.com** — Cloudflare Pages, `npm run build:site-orbs`로 빌드, 출력 `sites/orbs/dist`. - **libraries.dev** — Cloudflare Pages, `main`에 대한 모든 푸시 시 `.github/workflows/deploy-home.yml`로 배포 (`npm run build:site-home`, 출력 `sites/home/dist`). 메인 사이트: 랜딩, 각 라이브러리별 페이지 및 Studio 벤치, Pro 가격, 계정 및 법적 페이지. 백엔드는 `api.libraries.dev`, 개인 `libraries-pro` 저장소의 Worker — `sites/home/README.md` 참조. `.node-version`은 Cloudflare 빌드용 Node 20을 고정하며, GitHub 워크플로가 사용하는 버전과 일치합니다; Cloudflare의 기본값은 더 오래되었습니다. Cloudflare의 **재시도 배포**는 브랜치 팁을 가져오는 대신 동일한 커밋을 재생하므로, 오래된 커밋에서 실패한 빌드는 계속 실패합니다. 새 커밋을 푸시하여 새 것을 얻으세요. beam 사이트만 `public/CNAME`을 가지며; 해당 파일은 GitHub Pages 메커니즘입니다. Cloudflare 호스팅 사이트는 대신 Pages 프로젝트에서 도메인을 바인딩하고, DNS 레코드는 Cloudflare가 아닌 등록기관(inetadmin)에 있습니다 — `jakubantalik.com`은 Cloudflare 네임서버에 없습니다. `thinking-orbs`는 `git subtree`로 도착했으므로 전체 기록이 이 저장소에 있지만 — 해당 커밋은 `src/…`를 건드렸고, `packages/thinking-orbs/src/…`가 아닙니다. 따라서 `git log -- packages/thinking-orbs`는 병합에서 멈춥니다. 실제 기록을 읽으려면 병합이 명명한 커밋에서 로그하세요: ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` `thinking-orbs`는 [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports) 아래에 네이티브 포트도 포함합니다 — React Native 패키지와 SwiftUI 패키지, `spec/`의 골든 벡터로 웹 렌더러와 보조를 맞춥니다. 둘 다 아직 게시되지 않았습니다.