복사해서 바로 쓰는
React 애니메이션 컴포넌트
텍스트 효과와 배경, UI 인터랙션을 카테고리별로 정리했습니다. 회원가입 없이 코드를 복사해 쓰세요.
인기 컴포넌트
복사해서 바로 쓰기
373종을 카테고리별로 정리했습니다. 카드를 누르면 미리보기와 코드, props 조절을 볼 수 있습니다.
카테고리
무엇을 만들까요?
빠른 시작
세 단계면 화면에 올라갑니다
React 19 이상, TypeScript, Tailwind CSS v4 환경을 기준으로 합니다. Next.js App Router와 Vite 모두에서 씁니다.
고르기
목록에서 움직이는 미리보기를 보고 필요한 것을 고릅니다. 카테고리 필터와 이름 검색을 쓸 수 있습니다.
설치하기
shadcn CLI로 프로젝트에 추가합니다. CLI를 쓰지 않는다면 상세 페이지의 코드 탭에서 소스를 그대로 복사해도 됩니다.
값 맞추기
커스터마이즈 탭에서 props를 조절해 결과를 확인하고, 정한 값을 코드에 옮깁니다. AI로 변형하려면 상세 페이지의 프롬프트 복사 버튼을 쓰세요.
설치 명령
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GradientFlowText-TS-TW명령 끝의 컴포넌트 이름만 바꾸면 다른 컴포넌트도 같은 방식으로 설치됩니다. 컴포넌트별 명령은 각 상세 페이지에 적혀 있습니다.