Doctalk Design System (Vue)

shadcn/ui 기반의 Vue 3 컴포넌트 라이브러리입니다.

설치

npm install doctalk-design-system-vue

사용법

1. CSS 스타일 import

프로젝트의 진입점 파일(예: main.ts)에 스타일을 import합니다:

import "doctalk-design-system-vue/styles.css"

2. 컴포넌트 사용

<script setup lang="ts">
import { Button, Badge, Input } from "doctalk-design-system-vue"
</script>

<template>
  <Input placeholder="검색" />
  <Button variant="primary">확인</Button>
  <Badge variant="success">완료</Badge>
</template>

가이드 문서

각 컴포넌트의 상세 사용 가이드는 패키지에 포함된 docs/ 폴더에서 확인할 수 있습니다.

node_modules/doctalk-design-system-vue/docs/
├── components/
│   ├── action/
│   ├── content-display/
│   ├── indicators-and-feedback/
│   ├── navigation/
│   └── selection-and-input/
├── foundations/
└── ui-patterns/

기술 스택

• Vue 3.4+
• TypeScript
• Tailwind CSS 4
• class-variance-authority

관련 패키지

• React 버전: doctalk-design-system

License

MIT — see LICENSE for details.