open-index/open-npm huggingface dataset:
npm package: @lynn_p/tiny
Description: <!--  * @Author: fengjiling  * @Date: 2021-12-31 17:40:20 -->
Latest version: 1.0.1

<!--
 * @Author: fengjiling
 * @Date: 2021-12-31 17:40:20
-->

![npm (scoped)](https://img.shields.io/npm/v/@lynn_p/tiny.svg) 
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lynn_p/tiny.svg)
npm package: @lynneshao/dip-ui
Description: 一个基于 React + Ant Design 的 UI 组件库。
Latest version: 1.0.4

# @aishu/dip-ui

一个基于 React + Ant Design 的 UI 组件库。

## 📦 安装

```bash
# 安装组件库
npm install @aishu/dip-ui

# 安装必需的 peerDependencies
npm install react react-dom antd @ant-design/icons
```

## ⚠️ 依赖要求

本组件库需要以下 peerDependencies：

- `react` >= 18.0.0
- `react-dom` >= 18.0.0
- `antd` >= 6.0.0
- `@ant-design/icons` >= 6.1.0

**注意**：这些依赖需要由使用方自行安装，组件库不会自动安装它们。

## 🚀 快速开始

```tsx
import { DipHeader } from '@aishu/dip-ui'
import type { BreadcrumbItem } from '@aishu/dip-ui'

const breadcrumbItems: BreadcrumbItem[] = [
  {
    key: 'home',
    icon: '/icon.png',
    name: '首页',
    path: '/',
  },
]

function App() {
  return <DipHeader username="admin" breadcrumbItems={breadcrumbItems} />
}
```

## 🎨 Tailwind CSS 配置

本组件库使用 Tailwind CSS，使用方需要配置 Tailwind。

**重要**：在 `tailwind.config.js` 的 `content` 中必须包含组件库路径：

```js
// tailwind.config.js
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@aishu/dip-ui/dist/**/*.js', // 重要：包含组件库路径
  ],
}
```

**说明**：

- 组件库使用 Tailwind 的任意值语法（如 `px-[13px]`、`h-[52px]`）
- 不需要额外的自定义配置
- 只需要确保 `content` 路径包含组件库即可

详细说明请查看 [Tailwind CSS 配置指南](./docs/TAILWIND_CONFIG.md)。

## 📚 文档

- [组件库架构说明](./COMPONENT_LIBRARY_ARCHITECTURE.md)
- [快速开始指南](./QUICK_START.md)
- [依赖管理策略](./docs/DEPENDENCY_MANAGEMENT.md)
- [库模式构建说明](./docs/LIBRARY_BUILD_MODE.md)
- [Tailwind CSS 配置指南](./docs/TAILWIND_CONFIG.md)
- [npm 发布指南](./docs/NPM_PUBLISH.md)

## 🔧 开发

```bash
# 开发模式
yarn dev

# 构建
yarn build

# 预览构建结果
yarn preview
```

## 📝 License

MIT