소개
부드러운 표면과 명확한 상호작용 상태로 일관된 React 인터페이스를 만드세요.
Neumorphism UI는 빛과 그림자로 깊이를 표현하는 React 컴포넌트 모음입니다. shadcn CLI로 필요한 소스를 프로젝트에 설치하고 직접 수정할 수 있습니다.
여기서 시작하세요
- 설치 안내에 따라 공통 스타일과 Button을 추가합니다.
- 앱에서 첫 버튼이 올바르게 표시되는지 확인합니다.
- 컴포넌트 목록에서 필요한 요소를 골라 추가합니다.
첫 컴포넌트를 사용하기 전에 디자인 토큰이나 Registry 내부 구조를 모두 이해할 필요는 없습니다.
완성된 화면 살펴보기
로컬 CMS에서 초안을 선택하고 제목과 본문을 편집한 뒤 미리보기와 저장을 사용해 보세요. 선택·입력·피드백이 한 화면에서 어떻게 연결되는지 확인할 수 있습니다.
데모의 변경 사항은 메모리에만 남고 새로고침하면 초기화됩니다. 실제 서비스에서는 initialPosts와 onSave에 데이터를 연결하고 인증·저장·게시 권한을 처리하세요.
인터페이스 구성 원칙
깊이에는 역할이 있어야 합니다
돌출된 표면은 누를 수 있는 동작을, 안으로 들어간 표면은 입력이나 눌림 상태를 표현합니다. 모든 중첩 영역에 그림자를 추가하기보다 관련 내용을 한 표면으로 묶으세요.
선택 상태를 계속 보여 주세요
선택한 탭이나 필터는 포인터가 떠나도 구분되어야 합니다. 색상과 형태로 선택을 표시하고, 키보드 포커스는 별도로 유지하세요.
빛과 형태를 일관되게 유지하세요
같은 화면에서 광원 방향과 표면 반경을 공유하세요. Theme Studio에서 색상·깊이·광원·모양을 함께 조절할 수 있습니다.
입력과 피드백을 명확하게 만드세요
필드의 레이블을 유지하고 오류를 해당 입력 가까이에 표시하세요. 저장 상태를 설명하고, 애니메이션을 줄여도 선택·포커스·오류가 보이도록 구성하세요.
제공하는 것
- 필요에 따라 Base UI의 키보드·포커스 동작을 사용하는 React 19 컴포넌트
- 라이트·다크 색상, 깊이, 광원, 형태를 관리하는 Tailwind CSS v4 토큰
- 앱에 직접 설치하고 수정하는 컴포넌트 소스
- 실용적인 조합을 보여 주는 차트와 화면 템플릿
설치와 커스터마이징
shadcn CLI는 선택한 소스와 필요한 패키지를 프로젝트에 추가합니다. 설치된 파일은 앱 코드이며 자동으로 업데이트되지 않습니다. 이후 변경을 적용할 때는 직접 수정한 부분을 비교하세요.
설치가 끝나면 디자인 토큰으로 화면을 조정할 수 있습니다. Registry 구성과 검증 범위는 필요할 때 참고하세요.