21st.dev의 미리 빌드된 UI 컴포넌트를 복사해 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 프로젝트를 열고 복사한 프롬프트를 붙여넣습니다.
컴포넌트 배치 지정
프로젝트에서 컴포넌트가 나타날 위치를 지정하는 줄을 추가합니다 (예: "Add this to the homepage hero section" 또는 "Use this as the background").
Lovable이 컴포넌트 통합
메시지를 전송합니다. Lovable은 자동으로 컴포넌트 코드를 코드베이스에 복사하고 지정한 위치에 배치합니다.
컴포넌트는 프로젝트의 기존 스타일을 상속받으며 미리보기 툴바나 후속 프롬프트로 추가로 커스터마이즈할 수 있습니다.