21st.dev의 미리 빌드된 UI 컴포넌트를 복사해 Lovable 프로젝트에 즉시 적용합니다.
Lovable에서 21st.dev 컴포넌트 사용하기
21st.dev에서 미리 빌드된 hero 섹션, 탐색 바, 추천 후기 및 기타 UI 컴포넌트를 프로젝트에 직접 복사하세요.
21st.dev는 복사-붙여넣기 워크플로로 Lovable 프로젝트에 추가할 수 있는, 미리 빌드된 React UI 컴포넌트의 커뮤니티 레지스트리입니다. 모든 디자인 세부 사항을 직접 설명하지 않고도 완성도 높은 hero 섹션, 탐색 바, 애니메이션을 원할 때 사용하세요.
21st.dev는 자체 무료 등급과 유료 멤버십을 갖춘 서드파티 서비스입니다. 무료 등급은 하루에 복사할 수 있는 컴포넌트 프롬프트 수를 제한합니다. 현재 약관은 21st.dev를 참고하세요.
단계별 가이드
21st.dev로 이동
21st.dev로 이동하여 컴포넌트 라이브러리를 둘러봅니다.
마음에 드는 컴포넌트 찾기
필요에 맞는 컴포넌트를 찾기 위해 사용 가능한 컴포넌트를 둘러봅니다:
- Hero 섹션
- 탐색 바
- 추천 후기 레이아웃
- CTA 및 기능 그리드
- 폼 컴포넌트
Lovable용 프롬프트 복사
선택한 컴포넌트의 상세 페이지를 열고 대상 도구로 Lovable을 선택해 프롬프트를 복사합니다.
Lovable에 붙여넣기
Lovable 프로젝트를 열고 복사한 프롬프트를 채팅에 붙여넣습니다.
컴포넌트가 들어갈 위치 지정
붙여넣은 프롬프트에 컴포넌트가 프로젝트의 어디에 들어갈지 지정하는 줄을 추가합니다. 예를 들면 다음과 같습니다.
Add this as the hero section on the homepage.Lovable이 컴포넌트 통합
메시지를 전송합니다. Lovable이 컴포넌트 코드를 프로젝트에 추가하고 지정한 위치에 배치합니다.
컴포넌트는 프로젝트의 기존 스타일을 상속받으며 미리보기 툴바나 후속 프롬프트로 추가로 커스터마이즈할 수 있습니다.