BentoGrid

bento-grid

错落栅格 · BentoGrid/BentoCard 复合 + 跨列跨行 + hover CTA(纯 CSS·RSC)

用法

基础用法

BentoGrid 定义错落栅格，BentoCard 承载图标/标题/描述。

极速

纯 CSS 优先，零运行时开销

可靠

WAI-ARIA + 测试覆盖

主题

OKLCH 明暗双层 token

tsx

<BentoGrid>
  <BentoCard icon={<Zap />} title="极速" description="纯 CSS 优先，零运行时开销" />
  <BentoCard icon={<Shield />} title="可靠" description="WAI-ARIA + 测试覆盖" />
  <BentoCard icon={<Globe />} title="主题" description="OKLCH 明暗双层 token" />
</BentoGrid>

跨列跨行

在 BentoCard 上用 className（col-span / row-span）控制单卡占位，拼出错落布局。

极速

纯 CSS 优先，零运行时开销

可靠

WAI-ARIA + 测试覆盖

主题

OKLCH 明暗双层 token

吸取式聚合

博采众长，统一为一套瑚琏 API

tsx

<BentoGrid>
  <BentoCard className="sm:col-span-2" icon={<Zap />} title="极速" description="纯 CSS 优先" />
  <BentoCard icon={<Shield />} title="可靠" description="WAI-ARIA" />
  <BentoCard icon={<Globe />} title="主题" description="OKLCH 双层 token" />
  <BentoCard className="sm:col-span-2" icon={<Sparkles />} title="吸取式聚合" description="统一为一套瑚琏 API" />
</BentoGrid>

带行动区（cta）

cta 默认隐藏，hover 卡片时上滑淡入，引导次级操作。

开始使用

hover 卡片查看行动区

了解更多 →

可靠

测试覆盖

tsx

<BentoGrid>
  <BentoCard
    className="sm:col-span-2"
    icon={<Sparkles />}
    title="开始使用"
    description="hover 卡片查看行动区"
    cta={<span className="text-sm font-medium text-primary">了解更多 →</span>}
  />
  <BentoCard icon={<Shield />} title="可靠" description="测试覆盖" />
</BentoGrid>

自定义内容（children）

不用 title/description 时可直接塞 children 自由排版。

完全自定义

tsx

<BentoGrid>
  <BentoCard className="sm:col-span-3">
    <div className="flex h-full flex-col items-center justify-center gap-2">
      <Sparkles className="size-8 text-primary" />
      <span className="text-base font-semibold text-foreground">完全自定义</span>
    </div>
  </BentoCard>
</BentoGrid>

何时用

用错落响应式栅格展示一组特性/能力卡片（落地页特性区、产品亮点墙），靠 className 上的 sm:col-span-2 等让卡片跨列跨行形成「便当盒」节奏。要纯数据二维表格用 Table；要列表页查询区+工具栏的企业表格用 ProTable。

导入

import { BentoGrid, BentoCard } from "@hulianui/ui"

Props

BentoGrid

继承 HTMLAttributes<HTMLDivElement>，无自有 prop——容器，靠 className 调栅格列数。

名称	类型	默认	说明
...div	HTMLAttributes\<HTMLDivElement\>	—	透传（`className` 控列数等）

BentoCard

继承 Omit<HTMLAttributes<HTMLDivElement>, "title">。

名称	类型	默认	说明
...div	Omit\<HTMLAttributes\<HTMLDivElement\>, "title"\>	—	透传（用 `className="sm:col-span-2"` 跨列）

Slots

BentoGrid

插槽	类型	说明
children	ReactNode	一组 `BentoCard`

BentoCard

插槽	类型	说明
title	ReactNode	卡片标题
description	ReactNode	描述
icon	ReactNode	左上图标/装饰
cta	ReactNode	底部行动区（按钮/链接）
children	ReactNode	自定义卡片内容

禁忌 / 坑

跨列/跨行靠卡片自身 className（如 sm:col-span-2），不是 props——别去找 span 这类 prop。
BentoCard 的 title 被 Omit 掉了原生 title 属性，传 title 即卡片标题节点，不会渲染成 HTML tooltip。
纯 CSS + RSC，无客户端依赖，可直接在 Server Component 里用。

用法

基础用法

BentoGrid 定义错落栅格，BentoCard 承载图标/标题/描述。

极速

纯 CSS 优先，零运行时开销

可靠

WAI-ARIA + 测试覆盖

主题

OKLCH 明暗双层 token

tsx

<BentoGrid>
  <BentoCard icon={<Zap />} title="极速" description="纯 CSS 优先，零运行时开销" />
  <BentoCard icon={<Shield />} title="可靠" description="WAI-ARIA + 测试覆盖" />
  <BentoCard icon={<Globe />} title="主题" description="OKLCH 明暗双层 token" />
</BentoGrid>

跨列跨行

在 BentoCard 上用 className（col-span / row-span）控制单卡占位，拼出错落布局。

极速

纯 CSS 优先，零运行时开销

可靠

WAI-ARIA + 测试覆盖

主题

OKLCH 明暗双层 token

吸取式聚合

博采众长，统一为一套瑚琏 API

tsx

<BentoGrid>
  <BentoCard className="sm:col-span-2" icon={<Zap />} title="极速" description="纯 CSS 优先" />
  <BentoCard icon={<Shield />} title="可靠" description="WAI-ARIA" />
  <BentoCard icon={<Globe />} title="主题" description="OKLCH 双层 token" />
  <BentoCard className="sm:col-span-2" icon={<Sparkles />} title="吸取式聚合" description="统一为一套瑚琏 API" />
</BentoGrid>

带行动区（cta）

cta 默认隐藏，hover 卡片时上滑淡入，引导次级操作。

开始使用

hover 卡片查看行动区

了解更多 →

可靠

测试覆盖

tsx

<BentoGrid>
  <BentoCard
    className="sm:col-span-2"
    icon={<Sparkles />}
    title="开始使用"
    description="hover 卡片查看行动区"
    cta={<span className="text-sm font-medium text-primary">了解更多 →</span>}
  />
  <BentoCard icon={<Shield />} title="可靠" description="测试覆盖" />
</BentoGrid>

自定义内容（children）

不用 title/description 时可直接塞 children 自由排版。

完全自定义

tsx

<BentoGrid>
  <BentoCard className="sm:col-span-3">
    <div className="flex h-full flex-col items-center justify-center gap-2">
      <Sparkles className="size-8 text-primary" />
      <span className="text-base font-semibold text-foreground">完全自定义</span>
    </div>
  </BentoCard>
</BentoGrid>

Props

BentoGrid

继承 HTMLAttributes<HTMLDivElement>，无自有 prop——容器，靠 className 调栅格列数。

名称	类型	默认	说明
...div	HTMLAttributes\<HTMLDivElement\>	—	透传（`className` 控列数等）

BentoCard

继承 Omit<HTMLAttributes<HTMLDivElement>, "title">。

名称	类型	默认	说明
...div	Omit\<HTMLAttributes\<HTMLDivElement\>, "title"\>	—	透传（用 `className="sm:col-span-2"` 跨列）

插槽

类型

说明

children

ReactNode

一组 BentoCard

插槽

类型

说明

title

ReactNode

卡片标题

description

ReactNode

描述

icon

ReactNode

左上图标/装饰

cta

ReactNode

底部行动区（按钮/链接）

children

ReactNode

自定义卡片内容

禁忌 / 坑

跨列/跨行靠卡片自身 className（如 sm:col-span-2），不是 props——别去找 span 这类 prop。

BentoCard 的 title 被 Omit 掉了原生 title 属性，传 title 即卡片标题节点，不会渲染成 HTML tooltip。

纯 CSS + RSC，无客户端依赖，可直接在 Server Component 里用。

用法

基础用法

极速

可靠

主题

跨列跨行

极速

可靠

主题

吸取式聚合

带行动区（cta）

开始使用

可靠

自定义内容（children）

何时用

导入

Props

BentoGrid

BentoCard

Slots

BentoGrid

BentoCard

禁忌 / 坑

相关

用法

基础用法

极速

可靠

主题

跨列跨行

极速

可靠

主题

吸取式聚合

带行动区（cta）

开始使用

可靠

自定义内容（children）

何时用

导入

Props

BentoGrid

BentoCard

Slots

BentoGrid

BentoCard

禁忌 / 坑

相关