공지사항 제목
본문 내용입니다. 강조도 되고 링크도 자연스럽게 표시됩니다.
- 리스트 항목 1
- 리스트 항목 2
시작하기
@newtil/components는 newtil 패밀리의 기본 컴포넌트 라이브러리입니다. n- prefix 클래스로 prose(본문), table, layout 을, 그리고 웹 컴포넌트 <n-resize-handle> 을 제공합니다. Material Design 3 구현체가 필요하면 @newtil/materials를 사용하세요.
설치
bash
npm install @newtil/components@newtil/design-tokens는 일반 의존성(dependencies)이라 함께 설치됩니다. 따로 설치할 필요가 없습니다.
단독 사용
CSS 하나만 불러오면 됩니다.
html
<!-- HTML -->
<link rel="stylesheet" href="/node_modules/@newtil/components/dist/index.css" />js
// 번들러 (Vite, Webpack, Next.js 등)
import "@newtil/components";css
/* 또는 CSS에서 */
@import "@newtil/components";웹 컴포넌트 (n-resize-handle)
CSS 컴포넌트는 import 한 줄로 끝나지만, <n-resize-handle> 은 JS 모듈을 브라우저에서 한 번 등록해야 합니다.
js
import "@newtil/components/n-resize-handle"; // 개별
import "@newtil/components/js"; // 이 패키지의 웹 컴포넌트 전부자세한 내용은 Resize handle 을 참고하세요.
@newtil/materials와 함께 사용
두 패키지는 각자 자기 prefix (n-*, m3-*)만 리셋하므로 순서에 무관하게 import 해도 됩니다.
js
import "@newtil/materials"; // m3-* 컴포넌트 + m3-* 스코프 reset
import "@newtil/components"; // n-* 컴포넌트 + n-* 스코프 reset기본 사용 예
소스 코드 보기
소스 코드 보기
다크모드
별도 설정 없이 시스템 테마를 따라갑니다 (prefers-color-scheme: dark). 수동 제어는 data-theme 속성으로:
html
<html data-theme="dark">…</html>
<html data-theme="light">…</html>모든 n-* 컴포넌트는 semantic 토큰을 참조하므로, 토글 시 자동으로 다크/라이트 테마로 전환됩니다.
Next.js App Router
Next.js에서 node_modules CSS를 app/layout.tsx 또는 app/globals.css에서 import하면 됩니다.
ts
// app/layout.tsx
import "@newtil/components";<n-resize-handle> 을 쓴다면 JS 등록은 "use client" 컴포넌트에서 import 합니다 (SSR 안내).
Next.js가 @import url() 외부 URL 스타일을 번들링에서 누락시키는 경우가 있지만, @newtil/components는 외부 폰트 등 URL import를 사용하지 않으므로 이 문제가 없습니다.
다음 단계
- 커스터마이징 — 타입 → 옵션 → 변수 3단계 원칙
- Prose — 마크다운 본문 렌더링
- Table — 데이터 표
- Layout — 도구 앱 레이아웃
- Resize handle — 슬롯 폭 조절 웹 컴포넌트