browseract-ui
Advanced tools
BrowserAct React 组件库，基于 Tailwind CSS v4 和 shadcn/ui 构建，专为 Next.js 应用设计。提供丰富的图标组件、客户端交互组件和完整的主题系统。
npm install browseract-ui
# or
pnpm add browseract-ui
# or
yarn add browseract-ui
确保你的项目已安装以下依赖：
{
"react": ">=19",
"react-dom": ">=19",
"next": ">=15",
"tailwindcss": ">=4"
}
确保你的项目已配置 Tailwind CSS v4，并在全局 CSS 文件中添加 @source 指令扫描组件库源码：
/* app/globals.css */
@import 'tailwindcss';
/* 扫描 browseract-ui 源码以提取 cva 动态类名 */
@source '../../node_modules/browseract-ui/src/**/*.{ts,tsx}';
注意：
@source路径需要根据你的 CSS 文件位置调整。上面的示例假设 CSS 文件位于app/globals.css。
在你的全局 CSS 文件中（如 app/globals.css）导入主题：
/* app/globals.css */
@import 'tailwindcss';
@import 'tw-animate-css'; /* 动画支持（Tooltip 等组件需要）*/
@import 'browseract-ui/theme.css';
/* 扫描 browseract-ui 源码以提取 cva 动态类名 */
@source '../../node_modules/browseract-ui/src/**/*.{ts,tsx}';
在根布局中添加主题切换：
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html className="dark">
{' '}
{/* 添加 dark 类启用暗色模式 */}
<body>{children}</body>
</html>
);
}
// app/page.tsx
import { IconApiAutomation, IconChain, cn } from 'browseract-ui';
export default function Page() {
return (
<div className={cn('flex gap-4')}>
<IconApiAutomation className="size-6" />
<IconChain className="text-primary size-6" />
</div>
);
}
// app/components/MyButton.tsx
'use client';
import { Button } from 'browseract-ui/client';
import { IconPlane } from 'browseract-ui';
export default function MyButton() {
return (
<Button
onClick={() => console.log('clicked')}
loading={false}
>
<IconPlane className="size-4" />
发送
</Button>
);
}
browseract-ui)适用于不需要客户端交互的场景，可以在服务端渲染。
IconCheck, IconClose, IconEdit, IconDelete, IconCopy 等IconLoading, IconExclamationCircle, IconInfoCircle 等IconSearch, IconSetting, IconExpand 等IconAgent, IconWorkflow, IconDashboard, IconIntegration 等IconDecorApi, IconDecorHot, IconDecorMakeimport { cn } from 'browseract-ui';
// 条件类名合并
const className = cn('base-class', condition && 'conditional-class', 'another-class');
browseract-ui/client)需要客户端交互的组件，使用 'use client' 指令。
import { Button } from 'browseract-ui/client';
// 基础用法
<Button variant="default" size="default">按钮</Button>
// 变体
<Button variant="destructive">删除</Button>
<Button variant="outline">轮廓</Button>
<Button variant="ghost">幽灵</Button>
<Button variant="link">链接</Button>
// 尺寸
<Button size="sm">小号</Button>
<Button size="lg">大号</Button>
<Button size="icon"><IconPlane /></Button>
// Loading 状态
<Button loading>加载中...</Button>
// 作为子元素
<Button asChild>
<a href="/about">关于</a>
</Button>
import { ButtonLink } from 'browseract-ui';
// Next.js Link 按钮样式
<ButtonLink href="/dashboard" variant="default">
控制台
</ButtonLink>
<ButtonLink href="/docs" variant="outline" target="_blank">
文档
</ButtonLink>
import { copyText } from 'browseract-ui/client';
// 复制文本到剪贴板
await copyText('要复制的内容');
所有组件使用 CSS 变量，可轻松自定义：
/* app/globals.css */
@import 'browseract-ui/theme.css';
:root {
/* 修改基础圆角 */
--radius: 0.5rem;
/* 修改主色调（OKLCH 格式）*/
--primary: oklch(0.6 0.25 250);
--primary-foreground: oklch(1 0 0);
/* 修改链接色 */
--link: oklch(0.55 0.25 260);
}
.dark {
/* 暗色模式自定义 */
--primary: oklch(0.8 0.2 250);
--background: oklch(0.12 0 0);
}
--primary, --secondary, --accent, --destructive--foreground, --foreground-2, --foreground-3, --foreground-4--background, --fill-1, --fill-2, --fill-3, --fill-4--border, --divider, --ring--radius, --radius-sm, --radius-lg, --radius-xl 等--link查看 主题文档 了解完整变量列表。
# 安装依赖
npm install
# 启动 Storybook
npm run storybook
# 运行测试
npm run test
# 测试覆盖率
npm run test:coverage
# 构建
npm run build
# 构建 Storybook
npm run build-storybook
// 主入口 (browseract-ui)
import {
// 所有图标组件
IconApiAutomation,
IconChain,
// ... 更多图标
// 服务端组件
ButtonLink,
// 工具函数
cn,
} from 'browseract-ui';
// 客户端入口 (browseract-ui/client)
import { Button, copyText, cn } from 'browseract-ui/client';
// 主题样式
import 'browseract-ui/theme.css';
欢迎贡献！请遵循以下步骤：
git checkout -b feature/amazing-featuregit commit -m 'feat: add amazing feature'git push origin feature/amazing-feature请确保：
MIT License © 2024 Xing Lin
查看 LICENSE 文件了解详情。
FAQs
BrowserAct React Component Library
The npm package browseract-ui receives a total of 4 weekly downloads. As such, browseract-ui popularity was classified as not popular.
We found that browseract-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.