React, Vue, Svelte, Angular, Astro 또는 순수 HTML을 위한 300개 이상의 애니메이션 기반 접근성 높은 컴포넌트와 효과. 네이티브 Web Components, 의존성 제로, 그리고 AI 코딩 에이전트가 딱 맞는 컴포넌트를 찾아 설치하게 해 주는 MCP 서버까지.
155개의 Exclusives: 다른 어떤 라이브러리에서도 찾을 수 없는 오리지널 컴포넌트입니다. 가장 유용한 것들은 해결하는 문제별로 묶인 8개의 키트로 제공됩니다. 상당수는 영화, 게임, TV 시리즈 또는 소설의 메커니즘을 가져와 유용한 인터페이스 동작으로 바꿉니다. 빌려 오는 것은 메커니즘뿐이며, 아트워크, 로고, 타이포그래피, 색상은 절대 가져오지 않습니다.
도로명 주소여기까지 작성함 · 12분 전저장하지 않은 진행 상황을 복구할까요? 필드 7개 복구
AI 에이전트는 UI 작성에는 뛰어나지만 라이브러리 API를 기억하는 데는 서툽니다. Marvelous MCP 서버는 카탈로그, 모든 컴포넌트의 API와 데모 마크업, 그리고 파일을 의존성과 함께 설치하는 도구를 에이전트에게 제공합니다. 결과: 프로젝트가 어떤 프레임워크를 쓰든 첫 시도에 올바른 코드. Claude Code, Cursor, Copilot, Windsurf와 함께 작동합니다.
프로젝트 설정은 이 저장소에서 지원되는 에이전트를 구성합니다. 사용자 설정은 Codex, Claude Code, Cursor, OpenCode를 감지한 다음, 그중 어떤 에이전트든 모든 프로젝트에 걸쳐 연결할 수 있게 합니다. 감지된 에이전트를 모두 선택하거나, 몇 개만 고르거나, 에이전트 없이 CLI를 사용하세요. 에이전트 연결과 라이브러리를 제거하려면 uninstall을 실행하세요.
애니메이션 UI 키트 대부분은 React 전용입니다. 여러분의 키트는 그래선 안 됩니다.
주요 기능
일반적인 React UI 키트
Marvelous UI
Vue, Svelte, Angular, Astro, HTML에서 동작
아니요
예
런타임 의존성
framer-motion, three, gsap…
없음
AI 에이전트용 MCP 서버
드묾
포함
다른 곳에서는 찾을 수 없는 오리지널 컴포넌트
드묾
155개의 Exclusives
모든 곳에 다크 모드 + 동작 줄이기
제각각
모든 컴포넌트
여러분의 CSS가 항상 우선합니다
아니요
예
가격
대개 연간 구독
한 번 결제, 영구 소유
간단한 가격. 한 번 결제로 영구 소유.
모든 플랜에는 모든 컴포넌트, MCP 서버, CLI 및 Playground 내보내기가 포함됩니다. Lifetime은 갱신 없이 앞으로 나올 모든 컴포넌트와 업데이트를 더합니다.
가격은 USD 기준입니다. EU 및 영국: VAT 포함. 미국, 캐나다, 인도: 결제 시 판매세가 추가됩니다. 판매 대행사(merchant of record)인 Polar가 판매합니다. 14일 환불(조건).
무료로 시작하세요. 컴포넌트 21개, 이메일 불필요, 계정 불필요.
일상적으로 쓰는 기본 컴포넌트를 유료 플랜과 같은 CLI 및 MCP 서버와 함께 제공합니다. 계정도 라이선스 키도 필요 없습니다. MIT 라이선스: 소스를 읽고, 그대로 배포하세요.
네. 컴포넌트는 light DOM 마크업과 캐스케이드 레이어 CSS를 사용하는 표준 Custom Elements입니다. React 19+는 기본으로 지원하고, Vue는 한 줄(isCustomElement), Angular는 CUSTOM_ELEMENTS_SCHEMA가 필요하며, Svelte, Astro, 일반 HTML은 그대로 동작합니다. MCP/CLI가 여러분의 프레임워크에 맞는 정확한 스니펫을 반환합니다.
Exclusives와 키트란 무엇인가요?
Exclusives는 다른 어떤 라이브러리에서도 찾을 수 없는 155개의 오리지널 컴포넌트로, 모든 유료 플랜에 포함됩니다. 키트는 사용자를 놓치지 않는 폼이나 안전한 파괴적 작업처럼, 해결하는 문제별로 가장 유용한 컴포넌트를 묶어 둡니다. 8개 키트 보기
Lifetime과 구독: 무엇이 남나요?
Lifetime은 한 번만 결제합니다. Marvelous UI가 발행되는 한, 모든 신규 컴포넌트, 업데이트, Playground 내보내기를 갱신 없이 이용할 수 있습니다. 10월 15일부터는 연간 또는 월간으로 구독하여 구독 기간 동안 같은 혜택을 받을 수도 있습니다. 구독을 중단해도 다운로드한 모든 버전을 모든 프로젝트에서 영구적으로 사용할 수 있습니다. 프로젝트를 업데이트하고 싶을 때 npx marvelous-ui-library@latest update를 실행하세요. 로컬 수정 사항은 덮어쓰지 않습니다.
CLI는 검증된 Pro 아카이브를 로컬에 저장합니다. 구독이 끝난 후에도 npx marvelous-ui-library@latest restore를 실행하면 취득한 버전을 다시 설치할 수 있습니다.
출시 가격은 얼마인가요?
10월 14일까지 Lifetime은 출시 가격으로 판매됩니다: Solo 기준 $399 대신 $120. 출시 이후와 동일한 Lifetime 라이선스로, 앞으로의 모든 업데이트가 포함되고 갱신이 없으며, 가격만 더 저렴합니다. 구독은 10월 15일에 시작됩니다.
클라이언트 프로젝트와 SaaS 제품에 사용할 수 있나요?
네, 상업용을 포함해 최종 제품 수에 제한이 없습니다. 할 수 없는 것은 컴포넌트 자체를 UI 키트, 템플릿 마켓플레이스 상품 또는 경쟁 라이브러리로 재판매하거나 재배포하는 것입니다.
프로젝트를 납품하면 클라이언트는 무엇을 받나요?
해당 사이트나 앱에 사용된 컴포넌트는 소스를 포함해 함께 제공됩니다. 클라이언트는 그 제품을 운영하고 유지보수하는 용도로만 사용할 수 있으며, 다른 제품에는 사용할 수 없습니다. Unlimited에서는 그 소스를 넘겨 클라이언트나 다른 협력 업체가 제품을 유지보수하게 할 수도 있습니다. 여러분의 프로젝트에 참여하는 프리랜서는 여러분의 개발자 한 명으로 간주됩니다. 라이선스 읽기
Rails, Django, Laravel, WordPress?
네. 컴포넌트는 일반 HTML 태그, CSS 파일, JavaScript 모듈이므로 서버 렌더링 템플릿 어디서나 동작합니다. CSS와 스크립트를 한 번 불러온 다음 태그를 작성하면 됩니다. 파일은 CLI(Node.js 필요)로 복사하거나 ZIP에서 가져오세요. Free pack 또는 다운로드 페이지의 Pro pack을 이용할 수 있습니다.
Tailwind와 함께 쓸 수 있나요?
완벽하게 됩니다. 모든 셀렉터는 @layer mv.* 안에서 :where()로 감싸져 있어 유틸리티 클래스가 항상 우선합니다. 레이어 순서를 한 번만 선언하면 끝입니다.
SSR은요? Next.js, Nuxt, SvelteKit, Astro는?
모든 모듈은 SSR에서 안전합니다(최상위에서 window/document에 접근하지 않음). 컴포넌트는 클라이언트에서 업그레이드됩니다.
접근성을 지원하나요?
모든 인터랙티브 컴포넌트에 ARIA 역할, 완전한 키보드 지원, 눈에 보이는 포커스를 제공합니다. 장식 효과는 보조 기술에서 숨겨지며, 사용자가 동작 줄이기를 선호하면 멈춥니다.
마음에 들지 않으면요?
14일 이내에 이메일로 연락하세요. 아직 Pro pack을 다운로드하지 않았다면(CLI 또는 다운로드 페이지), 이유를 묻지 않고 전액 환불해 드립니다. 이미 다운로드했다면 무엇이 맞지 않았는지 알려 주세요. 한 번 환불해 드립니다. 먼저 Free pack과 Playground를 무료로 사용해 볼 수 있습니다. 이용약관
회사 명의 인보이스를 받을 수 있나요?
네. 결제는 판매 대행사(merchant of record)가 처리하며, 회사 정보가 기재된 VAT 규정을 준수하는 인보이스를 발행합니다.