@yjg-ui/react
v0.2.0
Published
Dockable, data-dense React UI components
Maintainers
yoojungyuReadme
@yjg-ui/react
Dockable, data-dense React UI components.
Install
pnpm add @yjg-ui/react
# or
npm install @yjg-ui/reactSetup
1. Import tokens CSS (한 번만, 앱 진입에서)
// app/layout.tsx (Next.js) 또는 main.tsx (Vite)
import "@yjg-ui/react/tokens.css";2. Tailwind 설정 (Tailwind 4 기준)
// tailwind.config.ts
import yjgPreset from "@yjg-ui/react/tailwind-preset";
export default {
presets: [yjgPreset],
content: [
"./src/**/*.{ts,tsx}",
"./node_modules/@yjg-ui/react/dist/**/*.{js,mjs}",
],
};Usage
import { Button } from "@yjg-ui/react";
export function Example() {
return (
<div>
<Button variant="primary">저장</Button>
<Button variant="outline" size="sm" isFixedSize>
취소
</Button>
</div>
);
}Sizing — em vs px
모든 컴포넌트는 isFixedSize prop 으로 사이즈 정책을 결정합니다.
| 역할 | isFixedSize | 단위 |
|---|---|---|
| 조회/표시 (그리드 셀, 차트, 라벨 등) | false (기본) | em — 부모 font-size 에 비례 |
| 명령/액션 (버튼, 입력, 페이지네이션 등) | true | px 고정 |
{/* 조회 영역 */}
<MyGrid size="base" isFixedSize={false} />
{/* 액션 영역 */}
<Button size="sm" isFixedSize>저장</Button>Dark mode
<html data-theme="dark"> 만 추가하면 모든 컴포넌트가 자동으로 dark 토큰 사용.
Components (in progress)
- ✅
Button - 🚧
Input,Select,Checkbox,Radio,Toggle - 🚧
Dialog,Toast,Tooltip - 🚧
Tabs,Accordion,SplitPane - 🚧
Badge,Loading,Divider
License
MIT