@newtil/components

newtil 디자인 시스템의 UI 컴포넌트 라이브러리.

변수 기반의 일관된 컴포넌트 (버튼, 카드, 다이얼로그, 아이콘 등 Material 3 스타일)를 제공합니다.

설계 철학

• 모든 컴포넌트는 @newtil/design-tokens의 변수만 참조 (하드코딩 금지)
• 사용자가 토큰만 재정의하면 모든 컴포넌트가 일관되게 변함
• 다크모드 지원

설치

npm install @newtil/components

@newtil/design-tokens는 자동으로 함께 설치됩니다.

사용

CSS만 사용

<link rel="stylesheet" href="node_modules/@newtil/components/dist/index.css">

또는 빌드 도구에서:

import "@newtil/components";

컴포넌트 동작 JS

import "@newtil/components/dist/js/n-bar.js";
import "@newtil/components/dist/js/n-layout.js";

커스터마이징

@import "@newtil/components";

:root {
    --color-main-1: #ff6b00;
    --space-4: 1.25rem;
}

출처

이 패키지는 @newtil/css@0.4.0에서 분리되어 나왔습니다. 원본 commit: 2f5cc313c563222ddfb7231b780cce6a384dabd9

라이선스

MIT