Base Front Components 组件库

基于 Next.js 15 和 shadcn/ui 构建的组件库。

安装

# 使用 pnpm 安装（推荐）
pnpm add base-front-components

快速开始

1. 引入样式 - 只需一步

在应用入口处引入样式是确保组件显示正常的关键步骤：

// 在应用入口处引入（如 _app.js, layout.tsx 等）
import 'base-front-components/styles';

或在全局CSS文件中：

/* 在全局CSS文件中（如 globals.css） */
@import 'base-front-components/styles';

2. 使用组件

import { Button, Card } from 'base-front-components';

export default function MyComponent() {
  return (
    <div>
      <Button>点击我</Button>
      <Card>
        <Card.Header>
          <Card.Title>卡片标题</Card.Title>
          <Card.Description>卡片描述</Card.Description>
        </Card.Header>
        <Card.Content>
          卡片内容
        </Card.Content>
      </Card>
    </div>
  );
}

与 Tailwind CSS 集成

该组件库兼容 Tailwind CSS 3.4.3 版本。若您的项目使用 Tailwind CSS，请确保：

1. 安装正确的版本：

pnpm add -D [email protected] postcss autoprefixer

2. 配置 tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/base-front-components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      // 您的自定义主题
    }
  },
  plugins: []
};

3. 配置 postcss.config.js：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

样式问题排查

如果在其他项目中引入组件后样式未生效，请尝试以下解决方案：

方案1：检查样式导入

确保样式已正确导入，并且导入位置在应用程序的入口文件中：

// _app.jsx 或 layout.tsx
import 'base-front-components/styles';

// 您的应用代码...

方案2：在使用组件的地方导入样式

有时全局样式可能会被覆盖，您可以在使用组件的地方再次导入样式：

import { Button } from 'base-front-components';
import 'base-front-components/styles';

export default function MyComponent() {
  return <Button>点击我</Button>;
}

方案3：使用CSS模块隔离样式

如果您的项目使用CSS模块，可以创建一个专门的样式文件：

/* components-styles.css */
@import 'base-front-components/styles';

然后在组件中导入：

import './components-styles.css';

方案4：与shadcn/ui一起使用

如果您的项目使用了shadcn/ui，确保在全局CSS文件的正确位置导入样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 导入组件库样式 - 放在Tailwind之后 */
@import 'base-front-components/styles';

/* 您的自定义样式 */

方案5：使用内联样式类

如果所有方法都不生效，组件库提供了CSS类，您可以直接应用到元素上：

<div className="card">
  <div className="card-header">
    <h3 className="card-title">标题</h3>
    <p className="card-description">描述</p>
  </div>
  <div className="card-content">内容</div>
</div>

可用组件

• Button - 按钮组件
• Card - 卡片组件
• Dialog - 对话框组件
• ConfirmDialog - 确认对话框
• Accordion - 手风琴组件
• HelloWorld - 示例组件

贡献

欢迎提交 PR 和 Issue。

许可

MIT