Neumorphism UI

1. shadcn 초기화

프로젝트에 components.json이 없다면 먼저 shadcn을 초기화하세요.

npx shadcn@latest init

CLI로 namespace와 현재 Registry URL을 등록합니다.

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

components.json에 직접 추가

namespace는 @neumorphism-ui, URL 템플릿은 https://neumorphism-ui.dev/r/{name}.json입니다.

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

공통 기본 테마는 처음 한 번 설치합니다. 이후 부품 추가는 선택한 테마를 다시 설치하지 않습니다.

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

기본 테마 설치 후 Next.js의 app/layout.tsx 또는 Vite의 src/main.tsx에서 폰트 CSS를 한 번 가져옵니다. 앱 번들러가 폰트 파일을 함께 제공합니다.

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

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

처음 생성된 기본 버튼을 교체할 때만 --overwrite를 사용합니다. 이미 수정한 버튼은 먼저 커밋하고 변경 내용을 검토하세요.

style item은 컴포넌트 코드를 변경하지 않고 팔레트, 그림자, 모서리 반경 토큰만 덮어씁니다. 설치 전에 dry-run으로 변경점을 확인할 수 있습니다.

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

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

다른 preset과 세부 토큰은 Theme Studio에서 확인할 수 있습니다.