magicuidesign/magicui

어떤 프로젝트인가요?

핵심 기능

• 01설치형 패키지 의존성 대신 복사해 붙여 넣는 방식의 컴포넌트입니다.
• 02React, TypeScript, Tailwind CSS, Framer Motion으로 제작되었습니다.
• 03애니메이션 배경, 버튼, 텍스트 효과를 제공합니다.
• 04컴포넌트 미리보기가 포함된 문서 사이트를 제공합니다.

활용 사례

• Next.js 랜딩 페이지에 애니메이션 히어로 섹션과 효과를 추가할 때.
• shadcn/ui 기반 프로젝트에서 인터페이스 애니메이션을 빠르게 프로토타이핑할 때.
• 애니메이션 컴포넌트를 출발점으로 삼아 원하는 대로 수정할 때.

빠른 시작

1. 1

   문서 사이트에서 컴포넌트 둘러보기

2. 2

   컴포넌트를 추가하려면 기여 가이드 읽기

사용 전 알아둘 점

• !README에는 설치 명령어가 없습니다. 컴포넌트는 패키지로 설치하는 대신 프로젝트에 복사해 사용합니다.
• !문서는 magicui.design에서 외부 호스팅됩니다.

토픽

자주 묻는 질문

magicui은(는) 무엇인가요?

Next.js 또는 shadcn/ui 앱에 복사해 넣어 사용할 수 있는 애니메이션 UI 컴포넌트와 효과 모음입니다. Magic UI는 React 애플리케이션을 위한 애니메이션 컴포넌트와 시각 효과 모음입니다. 패키지를 설치하고 가져오는 대신, shadcn/ui와 같은 방식으로 컴포넌트 소스를 프로젝트에 복사한 뒤 필요에 맞게 수정해 사용할 수 있습니다.

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

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

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

활발히 유지보수 중. magicui의 마지막 커밋은 2026년 10월 17일입니다.

magicui은(는) 어디에 사용할 수 있나요?

Next.js 랜딩 페이지에 애니메이션 히어로 섹션과 효과를 추가할 때. shadcn/ui 기반 프로젝트에서 인터페이스 애니메이션을 빠르게 프로토타이핑할 때. 애니메이션 컴포넌트를 출발점으로 삼아 원하는 대로 수정할 때.

magicui는 어떻게 설치하나요?

문서 사이트에서 컴포넌트 둘러보기 컴포넌트를 추가하려면 기여 가이드 읽기

magicui은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/magicuidesign/magicui