# Naive UI 디자인 시스템

## Naive UI 디자인 시스템 인터페이스 미리보기

레코드를 검색하고, 검토 내용을 펼쳐 확인하고, 여러 페이지에 걸쳐 행을 선택한 다음 로컬 일괄 항목을 검토 완료로 표시하세요.

## Naive UI 디자인 시스템 디자인 참조

설치된 패키지에서 확인한 Naive UI 2.45.3 기본 공통 라이트 테마 객체입니다. 이 camelCase 속성은 테마 재정의이며, 공개된 --token CSS 변수 명명 규칙이 아닙니다. 미리보기의 사용자 지정 공통 재정의는 별도로 나열했습니다.

### 기본 공통 색상

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| primaryColor | #18a058 | 기본 주요 녹색입니다. |
| primaryColorHover | #36ad6a | 호버 상태 색상입니다. |
| primaryColorPressed | #0c7a43 | 누름 상태 색상입니다. |
| primaryColorSuppl | #36ad6a | 보조 주요 색상입니다. |
| infoColor | #2080f0 | 정보 역할입니다. |
| successColor | #18a058 | 성공 역할. |
| warningColor | #f0a020 | 경고 역할입니다. |
| errorColor | #d03050 | 오류 역할. |
| textColor1 | rgb(31, 34, 37) | 강조 텍스트. |
| textColor2 | rgb(51, 54, 57) | 일반 텍스트입니다. |
| textColor3 | rgb(118, 124, 130) | 보조 텍스트입니다. |
| borderColor | rgb(224, 224, 230) | 기본 경계선. |
| dividerColor | rgb(239, 239, 245) | 은은한 구분선입니다. |
| tableHeaderColor | rgb(250, 250, 252) | 표 헤더 배경입니다. |
### 글자 및 컨트롤 크기

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 기본 UI 글꼴 스택입니다. v-sans는 자동으로 다운로드되지 않습니다. |
| fontSize | 14px | 기본 글자 크기 14px입니다. |
| fontSizeMini | 12px | 가장 작은 글자 크기입니다. |
| fontSizeSmall | 14px | 작은 컨트롤 글자 크기입니다. |
| fontSizeMedium | 14px | 중간 컨트롤 글자 크기입니다. |
| fontSizeLarge | 15px | 큰 컨트롤 글자 크기입니다. |
| fontSizeHuge | 16px | 가장 큰 컨트롤 글자 크기입니다. |
| lineHeight | 1.6 | 기본 글자 리듬입니다. |
| heightTiny | 22px | 가장 작은 컨트롤 높이입니다. |
| heightSmall | 28px | 작은 컨트롤 높이입니다. |
| heightMedium | 34px | 중간 컨트롤 높이입니다. |
| heightLarge | 40px | 큰 컨트롤 높이입니다. |
| heightHuge | 46px | 가장 큰 컨트롤 높이입니다. |
| borderRadius | 3px | 기본 모서리 반경 3px입니다. |
| borderRadiusSmall | 2px | 기본 작은 모서리 반경 2px입니다. |
### 실제 미리보기 테마 재정의

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| common.primaryColor | #176b57 | 독창적인 더 진한 녹색 주요 액션 색상입니다. |
| common.primaryColorHover | #238a71 | 독창적인 조화로운 호버 값입니다. |
| common.primaryColorPressed | #115340 | 독창적인 조화로운 누름 상태 값입니다. |
| common.borderRadius | 6px | 독창적인 모서리 반경 재정의입니다. 기본값은 3px입니다. |
| Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | 독창적인 페이지 간격이며, 전역 Naive 간격 척도라고 주장하지 않습니다. |
## Naive UI 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Naive UI 디자인 시스템: Sass 파이프라인이 아닌 JavaScript 테마 객체

### Sass 파이프라인이 아닌 JavaScript 테마 객체

> Naive UI는 테마 사용자 지정에 JavaScript 객체를 사용하는 Vue 3 컴포넌트 라이브러리입니다. 리뷰 대기열은 themeOverrides를 NConfigProvider에 전달합니다. 공통 섹션에서는 primaryColor, primaryColorHover, primaryColorPressed 및 borderRadius를 재정의하고, 나머지 컴포넌트 기본값은 provider에서 그대로 사용할 수 있습니다.

참조 표에는 설치된 2.45.3 공통 라이트 테마의 실제 값이 표시됩니다. 카멜 케이스 키를 바탕으로 CSS 변수 이름을 임의로 만들어내지 않습니다. 기본 primary 값은 #18a058이고 기본 테두리 반경은 3픽셀입니다. 이 예시의 더 짙은 녹색과 6픽셀 반경은 명시적으로 직접 재정의한 값입니다.

지원 사양 읽기

## Naive UI 디자인 시스템의 촘촘한 UI 타이포그래피와 컨트롤 높이

### 촘촘한 UI 타이포그래피와 컨트롤 높이

공통 테마는 14픽셀 글자에 줄 높이 1.6을 사용합니다. 작은 크기와 중간 크기의 글자 크기는 모두 14픽셀이지만, 컨트롤 높이는 서로 다릅니다. heightSmall은 28픽셀이고 heightMedium은 34픽셀입니다. 따라서 크기 이름은 단순한 글자 크기 단계가 아니라 컴포넌트의 기하학적 크기를 나타냅니다.

권장 글꼴 스택은 v-sans로 시작하지만, 이 예시를 렌더링하기 위해 해당 글꼴을 내려받을 필요는 없습니다. 주변 페이지는 system-ui, 34px 제목, 18px 보조 섹션 제목을 사용합니다. 이러한 페이지 스타일은 직접 작성한 것입니다. 라이브러리를 사용하는 디자이너는 테마의 컨트롤 크기 체계와 랜딩 페이지의 더 큰 편집용 시각적 위계를 구분해야 합니다.

지원 사양 읽기

## Naive UI 디자인 시스템의 동작을 정의하는 열 설정

### 열 정의에 동작이 포함됩니다

NDataTable에는 columns 배열과 records 배열이 전달됩니다. 예제는 선택 열로 시작하고, 다음으로 확장 열, 이어서 이름이 지정된 데이터 열을 배치합니다. Reference 열은 굵은 이름과 작은 안정적 ID를 렌더링합니다. Entries 열은 숫자 비교기를 사용하고, 이름 열은 기본 정렬기를 사용합니다. Review 열은 레코드의 상태에 따라 기본 NTag를 렌더링합니다.

이 설정은 표 제목만 장식적으로 표시한 스크린샷이 아니라 실제 동작을 구현합니다. Entries 열을 정렬하면 서식이 적용된 문자열이 아니라 숫자 수를 비교합니다. 펼친 콘텐츠에는 각 레코드에 해당하는 구체적인 리뷰 질문이 표시됩니다. 데이터 표가 행 표시를 제어하고, 애플리케이션이 레코드의 의미를 관리합니다.

지원 사양 읽기

## Naive UI 디자인 시스템의 선택 상태는 정렬 후에도 유지되어야 합니다

### 순서를 바꿔도 선택 항목을 유지해야 합니다

row-key 함수는 각 레코드의 안정적인 ID를 반환합니다. checked-row-keys와 update:checked-row-keys는 Vue 상태에서 선택을 제어된 상태로 유지합니다. 정렬이나 페이지 이동으로 레코드 표시 위치가 바뀌어도 일괄 작업에 사용되는 ID는 바뀌지 않습니다. 대신 배열 인덱스를 사용하면 행 순서가 변경될 때 이러한 연결이 불안정해집니다.

선택 열에서는 Archived 레코드를 선택할 수 없습니다. 이 레코드는 이전 내역을 확인할 수 있도록 계속 표시되지만 리뷰 일괄 처리에는 추가할 수 없습니다. 애플리케이션은 작업을 적용할 때도 상태를 확인하여 데이터 변경이 화면에 표시된 제한과 일치하도록 합니다. 실제 시스템에서는 서버에서도 권한을 검사해야 합니다. 체크박스 비활성화는 권한 경계가 아닙니다.

1. 첫 페이지에서 리뷰 가능한 레코드 하나를 선택하세요.

2. 다음 페이지로 이동해 선택 개수가 유지되는지 확인하세요.

3. 일괄 작업을 적용한 뒤 보관된 레코드는 건드리지 않고 선택한 레코드의 상태가 변경되는지 확인하세요.

지원 사양 읽기

## Naive UI 디자인 시스템에서 필터와 페이지네이션은 별도의 상태로 관리됩니다

### 필터링과 페이지 매김 상태는 서로 분리됩니다

검색 입력은 참조 이름과 소유자를 대상으로 검색합니다. 값을 변경하면 현재 페이지가 1페이지로 초기화되므로, 필터링한 결과가 현재 페이지에 없어 빈 후속 페이지가 표시되는 일을 방지합니다. 페이지네이션은 페이지당 4개 항목과 onChange 핸들러를 사용합니다. 이 로컬 예시에서는 레코드 6개로 페이지 이동을 확인할 수 있습니다.

선택 상태는 의도적으로 필터링된 배열과 분리되어 있으며 여러 페이지에 걸쳐 유지될 수 있습니다. 도구 모음의 개수가 이 범위를 나타냅니다. 실제 일괄 작업에서는 숨겨진 선택 항목을 유지할지 해제할지 명확한 규칙을 정해야 합니다. 이 예제는 선택을 유지합니다. 필터를 기본 리뷰 레코드 자체를 변경하는 작업으로 취급하지 않습니다.

지원 사양 읽기

## Naive UI 디자인 시스템에서 일괄 작업을 결정하기 전에 행을 펼쳐 확인하세요

### 일괄 작업을 결정하기 전에 행을 펼쳐 확인하세요

각 펼침 행에는 내비게이션에서 키보드 이동을 확인하거나 서로 다른 빈 상태가 의미하는 바를 비교하는 등 구체적인 작업이 포함됩니다. 따라서 펼친 영역은 일반적인 설명을 반복하는 대신 리뷰 판단에 유용한 근거를 제공합니다. 확장 열은 renderExpand를 사용해 해당 레코드 아래에 일반 콘텐츠를 표시합니다.

좁은 화면에서도 표 열 구조를 유지하며 scroll-x=640을 적용합니다. 이에 따라 페이지는 뷰포트 안에 유지되고 기본 표 영역은 가로로 스크롤할 수 있습니다. 모바일에서는 도구 모음이 세로로 쌓이지만, 스크린샷을 깔끔하게 보이게 하려고 데이터를 숨기지는 않습니다.

지원 사양 읽기

## Naive UI 디자인 시스템의 일괄 리뷰는 로컬 데이터 변환입니다

### 일괄 검토는 로컬 데이터 변환입니다

제어되는 키 배열이 비어 있으면 ‘선택 항목을 리뷰 완료로 표시’ 버튼이 비활성화됩니다. 버튼을 누르면 레코드를 순회하며 선택된 항목 중 보관되지 않은 항목만 Reviewed로 변경합니다. 작업을 마친 뒤 선택을 해제하고, 로컬에서 실행한 작업 내용을 정확히 알리는 기본 성공 알림을 표시합니다. 카드 헤더의 리뷰 완료 개수는 별도로 증가시키는 대신 레코드에서 계산합니다.

저장소, 리뷰 서비스 또는 외부 문서는 변경되지 않습니다. 실제 비동기 구현에는 로딩, 거부 및 부분 실패 처리가 필요합니다. 어떤 업데이트가 성공했는지 확인하기 전에 선택을 해제해서는 안 됩니다. 이 예제는 작업을 동기식으로 명시적으로 로컬에서 처리하므로 성공 안내가 코드의 동작과 일치합니다.

- 선택된 키가 있는지에 따라 일괄 작업 버튼의 상태가 바뀝니다.

- 리뷰 완료 개수는 표에 표시된 것과 동일한 레코드에서 계산합니다.

- 결과 안내에는 저장소가 변경되지 않았다고 표시합니다.

지원 사양 읽기

## Naive UI 디자인 시스템: 필수 CSS 가져오기 없는 Vue 컴포넌트

### 필수 CSS 가져오기가 없는 Vue 컴포넌트

Vue 3 프로젝트에 naive-ui@2.45.3을 설치하고 App.vue에서 사용할 컴포넌트를 가져옵니다. Naive UI는 런타임에 컴포넌트 스타일을 제공합니다. CSS 우선 방식의 많은 라이브러리와 달리 이 컴포넌트는 전역 패키지 스타일시트를 가져오지 않아도 사용할 수 있습니다. 제공된 style.css에는 직접 작성한 작업대 레이아웃만 포함됩니다.

NConfigProvider는 공통 테마 재정의뿐 아니라 영어 컴포넌트 및 날짜 로케일도 받습니다. 전체 SFC는 표준 Vite Vue 플러그인으로 컴파일할 수 있습니다. 독립 실행형 예제에는 컴파일된 컴포넌트가 번들로 포함되어 있어, 네트워크 요청 없이 네이티브 컴포넌트와 애플리케이션 동작을 사용할 수 있습니다.

지원 사양 읽기

## Naive UI 디자인 시스템 테마와 데이터 경계를 확인할 수 있습니다

### 테마와 데이터 경계를 쉽게 살펴볼 수 있습니다

이 워크벤치는 임의로 지표를 만들어 넣은 범용 관리 대시보드가 아니라 소규모 참조 라이브러리입니다. 각 행은 샘플 콘텐츠이고, 모든 상태에는 명확한 의미가 있으며, 펼침 텍스트에는 해당 항목을 살펴봐야 하는 구체적인 이유가 제시됩니다. 테마 표와 전체 SFC를 통해 스타일과 동작을 모두 재현할 수 있습니다.

Naive UI를 더 큰 시스템에 도입할 때는 전역 공통 재정의와 컴포넌트 수준 재정의를 함께 조정하세요. 기본, 호버, 눌림 상태의 주요 색상을 함께 검토해야 합니다. 제공자가 지원하는 테마 표면을 활용할 수 있다면, 생성된 내부 요소를 우선 스타일링하는 방식은 피하세요.

지원 사양 읽기

## Naive UI 디자인 시스템 컴포넌트 예제

### Vue 검토 대기열 완성

DataTable 열 구성, 안정적인 행 키, 선택, 펼침 및 제어형 페이지네이션.

```
<script setup>
import {ref,computed,h} from 'vue';
import {NConfigProvider,NDataTable,NButton,NInput,NTag,NAlert,NCard,NSpace,enUS,dateEnUS} from 'naive-ui';
const themeOverrides={common:{primaryColor:'#176b57',primaryColorHover:'#238a71',primaryColorPressed:'#115340',borderRadius:'6px'}};
const rows=ref([{id:'DS-101',name:'Navigation patterns',owner:'Maya',items:18,status:'Needs review',note:'Check keyboard movement between primary and overflow navigation.'},{id:'DS-102',name:'Empty-state copy',owner:'Alex',items:9,status:'Needs review',note:'Compare first-use guidance with filtered-empty and permission-empty states.'},{id:'DS-103',name:'Color role mapping',owner:'Jules',items:24,status:'Reviewed',note:'Semantic aliases were compared in light and dark appearances.'},{id:'DS-104',name:'Form error summary',owner:'Sam',items:12,status:'Needs review',note:'Verify error links focus the corresponding input.'},{id:'DS-105',name:'Legacy icon export',owner:'Maya',items:36,status:'Archived',note:'Historical export retained for reference; batch review is disabled.'},{id:'DS-106',name:'Density variants',owner:'Alex',items:15,status:'Needs review',note:'Check compact controls with long translated labels.'}]);
const query=ref(''),checked=ref([]),page=ref(1),notice=ref('');const filtered=computed(()=>rows.value.filter(r=>(r.name+' '+r.owner).toLowerCase().includes(query.value.toLowerCase())));
const columns=[{type:'selection',disabled:r=>r.status==='Archived'},{type:'expand',renderExpand:r=>h('div',{class:'row-note'},r.note)},{title:'Reference',key:'name',sorter:'default',width:240,render:r=>h('div',[h('strong',r.name),h('div',{class:'row-id'},r.id)])},{title:'Owner',key:'owner',width:100},{title:'Entries',key:'items',sorter:(a,b)=>a.items-b.items,width:95},{title:'Review',key:'status',width:140,render:r=>h(NTag,{type:r.status==='Reviewed'?'success':r.status==='Archived'?'default':'warning',bordered:false},{default:()=>r.status})}];
const pagination=computed(()=>({page:page.value,pageSize:4,onChange:p=>page.value=p}));function apply(){rows.value=rows.value.map(r=>checked.value.includes(r.id)&&r.status!=='Archived'?{...r,status:'Reviewed'}:r);notice.value=`Marked ${checked.value.length} selected references reviewed in this preview. No repository was changed.`;checked.value=[];}
</script>
<template><NConfigProvider :locale="enUS" :date-locale="dateEnUS" :theme-overrides="themeOverrides"><main class="review-desk"><header><p class="eyebrow">NAIVE UI / REFERENCE REVIEW</p><h1>A review queue with context.</h1><p>Search, expand a row, compare entry counts, and apply a local batch action.</p></header><NCard title="Reference library"><template #header-extra><NTag :bordered="false" type="success">{{rows.filter(r=>r.status==='Reviewed').length}} reviewed</NTag></template><div class="toolbar"><NInput v-model:value="query" placeholder="Search reference or owner" clearable aria-label="Search reference or owner" @update:value="page=1"/><NButton type="primary" :disabled="!checked.length" @click="apply">Mark selected reviewed</NButton></div><p class="selection-note">{{checked.length}} selected · Selection uses stable IDs and can span pages.</p><NDataTable :columns="columns" :data="filtered" :row-key="r=>r.id" :checked-row-keys="checked" @update:checked-row-keys="keys=>checked=keys" :pagination="pagination" :scroll-x="640" :single-line="false"/><NAlert v-if="notice" type="success" class="notice">{{notice}}</NAlert></NCard><div class="notes"><section><h2>Expand before judging</h2><p>The expand control reveals a concrete review question for each reference. A title alone is not enough context for a meaningful batch decision.</p></section><section><h2>Archived is a separate state</h2><p>Archived records stay visible but cannot join the batch selection. Search and pagination never change the underlying review data.</p></section></div><footer>Native Naive UI 2.45.3 DataTable, Input, Button, Tag, Card and Alert. All records and mutations are local examples.</footer></main></NConfigProvider></template>
```

코드 참조

- 선택 상태는 안정적인 참조 ID를 기준으로 관리합니다.

- 보관된 행은 선택 열의 조건자에 따라 비활성화됩니다.

- 공통 테마 재정의는 NConfigProvider를 통해 전달합니다.

### 기존 워크벤치 레이아웃

네이티브 데이터 테이블 주변의 페이지 타이포그래피와 반응형 간격.

```
*{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}}
```

코드 참조

- Naive UI가 컴포넌트 스타일을 주입하며, 이 스타일시트에는 애플리케이션 레이아웃만 포함됩니다.

## Naive UI 디자인 시스템 AI 에이전트 설정

### 구현 시작점

Vue 3 및 Naive UI 2.45.3으로 검증했습니다. 표준 SFC 컴파일을 사용합니다. 모든 참조 레코드는 로컬에 있습니다.

```
// Create the project first:
// npm create vite@latest naive-ui-specimen -- --template vue
// cd naive-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install naive-ui@2.45.3
// Save the complete component above as App.vue and layout as style.css.
import {createApp} from 'vue';
import App from './App.vue';
import './style.css';
createApp(App).mount('#app');
// index.html contains <div id="app"></div>.
// NConfigProvider, locales, themeOverrides and component imports are in App.vue.
// No Naive UI global CSS import is required for these components.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### 프로젝트를 위한 프롬프트

```
Naive UI 2.45.3 참조 검토 대기열에서 NConfigProvider와 네이티브 NDataTable의 열, 펼침, 정렬, 페이지네이션 및 선택 기능을 사용하세요. 필터를 적용하거나 페이지를 바꿀 때 안정적인 참조 키를 유지하고, 일괄 작업은 현재 보이는 행뿐 아니라 선택된 레코드에 적용해야 합니다. 빈 상태와 비활성화된 작업 상태는 실제 컬렉션에 따라 처리하세요. 제공된 themeOverrides는 패키지 기본값과 구분되는 애플리케이션 재정의로 유지하고, 기존 레이아웃 전체도 보존하세요. 이 대기열은 로컬 참조 검토용이며 데이터셋 가져오기 서비스가 아닙니다.
```

## Naive UI 디자인 시스템 출처 및 범위

Naive UI 2.45.3. 테마 기본값과 기존 재정의를 구분해 표시합니다. 검토 레코드와 일괄 변경은 로컬에서 처리합니다.

- 공식 저장소 Vue 3, 런타임 스타일 및 테마 사용자 지정.

- DataTable 예제 네이티브 데이터 테이블 패턴 및 API 예제.

- 공통 라이트 테마 실제 기본 팔레트와 파생 역할.

- 공통 형태 글꼴 크기, 컨트롤 높이 및 모서리 반경.

- 구성 제공자 프로바이더 테마 구성.

## Naive UI 디자인 시스템 관련 리소스

### Nuxt UI

실제 Vue 컴포넌트, 의미에 맞는 테마 참조, 입력 유효성 검사, 명확한 로컬 임시 저장 동작을 갖춘 완전한 Nuxt UI 4.11.3 브리프 작성기를 만드세요.

### Oruga UI

검색 및 삭제가 가능한 주제 태그, 어휘 개수 제한, 선택 테마의 실제 토큰, 선택한 레이블이 반영되는 실시간 카드가 포함된 기본 Oruga 카탈로그 편집기.

### Pico CSS

Pico CSS 스타일은 반응형 rem 기반 타이포그래피 스케일과 테마 변수를 사용해 시맨틱 HTML을 지정합니다. 표준, 클래스리스, 조건부 배포판은 통합 범위가 서로 다릅니다. 이 가이드에서는 기본 빌드를 사용해 네이티브 disclosure 및 dialog 동작이 포함된 읽기 환경 설정 양식을 구성합니다.


- [구현 레퍼런스](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [출처](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [출처](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)
- [지원 사양 읽기](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [지원 사양 읽기](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [지원 사양 읽기](https://github.com/tusen-ai/naive-ui)
- [지원 사양 읽기](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)
- [코드 참조](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [코드 참조](https://github.com/tusen-ai/naive-ui)
- [공식 저장소 Vue 3, 런타임 스타일 및 테마 사용자 지정.](https://github.com/tusen-ai/naive-ui)
- [DataTable 예제 네이티브 데이터 테이블 패턴 및 API 예제.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [공통 라이트 테마 실제 기본 팔레트와 파생 역할.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [공통 형태 글꼴 크기, 컨트롤 높이 및 모서리 반경.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts)
- [구성 제공자 프로바이더 테마 구성.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)