설치 | Neumorphism UI

준비 사항

React 19와 Tailwind CSS v4를 사용하는 프로젝트가 필요합니다. 컴포넌트는 Next.js와 Vite에서 사용할 수 있습니다. 아직 shadcn을 설정하지 않았다면 프로젝트 폴더에서 실행하세요.

npx shadcn@latest init

CLI에서 컴포넌트 라이브러리를 묻는 경우 Base UI를 선택하세요.

@neumorphism-ui는 공식 shadcn 디렉터리에 등록되어 있습니다. CLI가 주소를 자동으로 찾으므로 별도 Registry 등록 없이 아래 명령을 실행하세요.

공통 스타일은 한 번 설치한 뒤, 필요한 컴포넌트를 추가합니다. 공통 스타일에는 라이트·다크 색상, 그림자, 반경과 유틸리티가 들어 있습니다.

npx shadcn@latest add @neumorphism-ui/neumorphism-ui

Next.js의 app/layout.tsx 또는 src/app/layout.tsx, Vite의 src/main.tsx에서 폰트 CSS를 한 번 가져오세요. 앱 번들러가 폰트 파일을 함께 제공합니다.

import "pretendard/dist/web/variable/pretendardvariable.css";

npx shadcn@latest add @neumorphism-ui/button

shadcn init이 만든 utils.ts와 button.tsx가 있다면 공통 스타일과 Button 설치 중 해당 기본 파일의 교체 질문에 동의하세요. 직접 수정한 유틸리티나 컴포넌트는 아래 ‘기존 프로젝트’에서 차이를 확인하고 필요한 변경을 병합하세요.

포크나 로컬 레지스트리 주소를 사용하는 경우

공식 주소 대신 다른 레지스트리를 사용하려면 아래 주소를 해당 엔드포인트로 바꾸세요. CLI로 등록하거나 registries 항목을 components.json에 병합하고 기존 별칭과 설정은 유지하세요.

npx shadcn@latest registry add @neumorphism-ui=https://neumorphism-ui.andongmin.com/r/{name}.json

{
  "registries": {
    "@neumorphism-ui": "https://neumorphism-ui.andongmin.com/r/{name}.json"
  }
}

페이지에서 설치한 Button을 렌더링하세요.

import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button variant="primary">시작하기</Button>;
}

부드러운 표면과 그림자, 파란 강조색이 있는 버튼이 표시되면 설정이 완료된 것입니다. 기본 shadcn 버튼이 남아 있다면 components/ui/button.tsx가 설치한 소스인지 확인하세요.

공통 스타일은 프로젝트 전체에 적용됩니다. 현재 작업을 커밋하고 설치 전에 변경 내용을 확인하세요. 전역 CSS, components.json, 의존성과 유틸리티를 특히 살펴보세요.

npx shadcn@latest view @neumorphism-ui/neumorphism-ui

npx shadcn@latest add @neumorphism-ui/neumorphism-ui --dry-run

각 컴포넌트 페이지의 설치 명령을 사용하세요. CLI가 필요한 패키지와 구성 요소를 함께 설치합니다. 이미 수정한 파일이 있다면 제안된 변경 내용을 비교하세요.

npx shadcn@latest add @neumorphism-ui/dialog
npx shadcn@latest add @neumorphism-ui/card

기본 Air 테마에는 라이트·다크 색상과 파란색 강조색이 포함됩니다. 다른 팔레트가 필요하면 원하는 테마 하나를 설치하세요. 먼저 dry run으로 변경 내용을 확인할 수 있습니다.

npx shadcn@latest add @neumorphism-ui/style-sage --dry-run

npx shadcn@latest add @neumorphism-ui/style-sage

라이트·다크 토큰이 함께 제공되며 앱의 .dark 클래스로 모드를 선택합니다. Theme Studio에서 색상·깊이·광원·형태를 조절하고 CSS를 복사할 수도 있습니다.

컴포넌트 페이지의 ‘컴포넌트 소스’ 탭에서 파일과 필요한 패키지를 확인할 수 있습니다. 설치한 파일은 앱에 속하며 자동 업데이트되지 않습니다. 업데이트 전에 dry run으로 직접 수정한 코드와 비교하세요.

npx shadcn@latest add @neumorphism-ui/button --dry-run