DavidHDev/react-bits

어떤 프로젝트인가요?

핵심 기능

• 01텍스트, 인터랙션, 카드, 배경 카테고리에 걸쳐 애니메이션 컴포넌트와 배경을 215개 이상 제공합니다.
• 02각 컴포넌트는 JavaScript 또는 TypeScript로 제공되며, CSS나 Tailwind 스타일링을 선택할 수 있습니다.
• 03shadcn 또는 jsrepo CLI로 설치하거나 소스를 직접 복사할 수 있습니다.
• 04shadcn MCP 레지스트리를 통해 AI 코딩 에이전트와 연동됩니다.
• 05배경, 제품 목업, 로고, 텍스처, 사운드를 위한 무료 브라우저 도구가 포함됩니다.

활용 사례

• 마케팅 사이트나 랜딩 페이지에 시선을 사로잡는 텍스트 애니메이션이나 스크롤 리빌 효과를 추가할 수 있습니다.
• Next.js 또는 React 앱에서 애니메이션 히어로 섹션과 전체 페이지 배경을 만들 수 있습니다.
• AI 코딩 에이전트가 바로 사용할 수 있는 컴포넌트를 Tailwind 프로젝트에 추가하도록 할 수 있습니다.
• 출시와 데모에 사용할 제품 스크린샷, 반복 재생되는 배경 영상, 사운드 효과를 만들 수 있습니다.

빠른 시작

1. 1

   shadcn CLI로 컴포넌트 추가하기

   npx shadcn@latest add @react-bits/SplitText-TS-TW
2. 2

   또는 jsrepo로 추가하기

   npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

사용 전 알아둘 점

• !라이선스 이름에 Commons Clause가 포함되어 있어 소프트웨어 자체의 판매가 제한됩니다. 상업적으로 사용하기 전에 LICENSE.md를 읽어 보세요.
• !저장소 메타데이터에서 라이선스가 감지되지 않았습니다. LICENSE.md에서 라이선스 조건을 직접 확인하세요.

토픽

자주 묻는 질문

react-bits은(는) 무엇인가요?

shadcn 또는 jsrepo로 설치할 수 있는 무료 애니메이션·커스터마이징 가능한 React 및 Next.js 컴포넌트와 배경 215개 이상을 제공하는 라이브러리입니다. React Bits는 시각적으로 돋보이는 웹 인터페이스를 만드는 데 사용할 수 있는 애니메이션 및 인터랙티브 React와 Next.js 컴포넌트 모음입니다. 분할 텍스트, 타이핑 효과, 스크롤 리빌 같은 텍스트 애니메이션부터 커서 효과, 호버 인터랙션, 카드, 캐러셀, 작은 UI 마이크로인터랙션, 전체 섹션을 채우는 애니메이션 배경까지 제공합니다.

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

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

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

활발히 유지보수 중. react-bits의 마지막 커밋은 2026년 10월 19일입니다.

react-bits은(는) 어디에 사용할 수 있나요?

마케팅 사이트나 랜딩 페이지에 시선을 사로잡는 텍스트 애니메이션이나 스크롤 리빌 효과를 추가할 수 있습니다. Next.js 또는 React 앱에서 애니메이션 히어로 섹션과 전체 페이지 배경을 만들 수 있습니다. AI 코딩 에이전트가 바로 사용할 수 있는 컴포넌트를 Tailwind 프로젝트에 추가하도록 할 수 있습니다. 출시와 데모에 사용할 제품 스크린샷, 반복 재생되는 배경 영상, 사운드 효과를 만들 수 있습니다.

react-bits는 어떻게 설치하나요?

shadcn CLI로 컴포넌트 추가하기: npx shadcn@latest add @react-bits/SplitText-TS-TW 또는 jsrepo로 추가하기: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

react-bits은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/DavidHDev/react-bits