Getting Started
K-UI를 프로젝트에 설치하고 사용하는 방법을 안내합니다.
Installation
npm install @kui-ui/reactTailwind CSS Plugin
tailwind.config.js에 KRDS (Korea Design System) 플러그인을 등록하면 디자인 토큰(색상, 폰트, radius)이 자동 주입됩니다.
const krdsPlugin = require("@kui-ui/react/plugin");
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@kui-ui/react/dist/**/*.{js,cjs}",
],
plugins: [krdsPlugin],
};Usage
import { Button, Input, Badge } from "@kui-ui/react";
export default function App() {
return (
<div>
<Button variant="primary" size="md">확인</Button>
<Input label="이름" required placeholder="홍길동" />
<Badge variant="success" dot>완료</Badge>
</div>
);
}Copy & Paste (Registry)
소스 코드를 직접 복사해서 사용할 수도 있습니다. 각 컴포넌트 문서 하단에 전체 소스 코드가 포함되어 있습니다.