nui-kit

Next.js App Router 용 React 컴포넌트 라이브러리. 폼, 팝업, 달력, 선택 컨트롤을 제공한다.

설치

npm install @nui-kit/react

peer dependency 는 react 와 react-dom 둘뿐이다. next 는 ButtonLink, react-hook-form 은 RHF 래퍼에서만 쓰이며 둘 다 optional 로 선언되어 있다.

import "@nui-kit/react/styles/index.css";
import { Button } from "@nui-kit/react";

export default function Page() {
  return <Button color="primary">저장</Button>;
}

쓰기 전에 알아둘 세 가지

1. 프로젝트 CSS 가 라이브러리 CSS 를 이긴다

라이브러리 CSS 는 전부 @layer nui.* 안에 있다. Cascade 는 상세도보다 레이어를 먼저 보므로 레이어 밖 선언이 항상 우선한다. !important 없이 덮어쓴다.

.my-button { border-radius: 0; }

2. 클래스 충돌이 없다

컴포넌트의 class 는 전부 nui- 로 구성되어 충돌을 피한다. reset 도 기본 배포에 넣지 않았다.

3. 전부 클라이언트 컴포넌트다

모든 컴포넌트가 "use client" 로 배포된다. Server Component 에서 dot notation 은 undefined 가 되므로 named export 를 쓴다. 설치와 사용 참조.

어디로 가면 되나

• 설치와 사용 — 스타일 불러오기, 서브패스, Server Component 주의점
• 브랜드 색 고르기 — 준비된 185색 중 하나를 고르면 화면 전체 색이 바뀐다
• Foundations — 쓸 수 있는 값과 바꿀 수 있는 자리
• Components — 컴포넌트별 예제와 props 표

props 표와 토큰 표는 코드에서 자동 생성한다.