@anker-in/headless-ui NPM

开发

使用方法

npm install @anker-in/headless-ui

手动在html 标签添加主题名（anker, eufy, soundcore等）, 不同的主题名对应不同的css 变量，如果需要更新

<html data-brand-theme="soundcore"></html>

如果是nextjs 项目，在_document.tsx文件的html标签添加主题名

然后就可以项目内引入需要的组件

// 在项目入口添加样式文件，比如_app.js
import '@anker-in/headless-ui/style.css'

// 使用组件
import { Button, Skeleton } from '@anker-in/headless-ui'

// ...

<Button size="lg" variant="primary">
    Primary
</Button>
<Button size="sm" variant="secondary">
    secondary
</Button>

<Skeleton className="w-[300px] h-[300px] rounded-full" />