open-index/open-npm huggingface dataset:
npm package: @skulter/test_ui
Description: React UI 컴포넌트 라이브러리입니다.
Latest version: 0.1.30

# @skulter/test_ui

React UI 컴포넌트 라이브러리입니다.

## 설치

```bash
npm install @skulter/test_ui
# 또는
pnpm add @skulter/test_ui
```

## 사용 방법

### 컴포넌트 사용하기

```jsx
import { Button } from '@skulter/test_ui';

function App() {
  return (
    <Button variant="primary">버튼</Button>
  );
}
```

### 타입 사용하기
```
import { ColumnSummary } from '@skulter/test_ui/types'
```

### 커스텀 프리셋 사용하기

```jsx
import customPreset from '@skulter/test_ui/customPreset';

// panda.config.ts 파일에서 사용
import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  // 다른 설정들...
  presets: ['@pandacss/dev/presets', customPreset],
});
```

## PandaCSS 설정 가이드

이 라이브러리를 사용할 때 발생할 수 있는 경로 문제를 해결하기 위해 다음과 같이 설정하세요:

### 프로젝트의 `panda.config.ts` 파일 설정

```typescript
import { defineConfig } from '@pandacss/dev'
import customPreset from '@skulter/test_ui/customPreset'

export default defineConfig({
  staticCss: {
    recipes: '*',
  },
  jsxFramework: 'react',
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: [
    './app/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@skulter/test_ui/dist/**/*.{js,mjs}', // 배포된 UI라이브러리 위치
  ],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  presets: ['@pandacss/dev/presets', customPreset],

  // The output directory for your css system
  outdir: '@mono/acme-ui',
  importMap: '@ui', // 필요할 경우 사용
})

```



## 버전 정보

현재 버전: 0.1.03