组件
Panel 内容表面
以边界、留白和分隔组织内容，让层级安静地成立。
Panel 用于一组相关内容。Header 提供标题和辅助动作，Body 承载内容，Footer 安排结果或操作。密集内容用 List 的分隔行，避免连续嵌套卡片。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/panel.json首次使用请先完成 Registry 与主题接入。
组合
<Panel>
<PanelHeader title="成员" description="管理工作区访问" />
<PanelBody>…</PanelBody>
<PanelFooter>…</PanelFooter>
</Panel>导出的 panelClass、cardClass 与 cardLiftClass 支持已有语义元素复用表面样式。只有确实可跳转的卡片才使用 hover lift。
Props
| API / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
Panel / PanelBody / PanelFooter | 原生 div 属性 | — | 透传内容、事件和 className |
PanelHeader.title | ReactNode | 必填 | 区域标题 |
PanelHeader.description / actions | ReactNode | — | 说明与操作插槽 |
PanelHeader.headingLevel | 2 / 3 | 2 | 保持文档标题顺序 |
List | 原生 div 属性 | — | 有分隔线的内容容器 |
SectionLabel | 原生 h2 属性 | — | 轻量段落标题 |
DataPoint.label / children | ReactNode | 必填 | 定义项，放在 dl 中 |
键盘与约束
Panel 本身不进入 Tab 顺序。只有内部真实操作可聚焦；需要语义化区块时由 section、标题与 aria 关联共同表达，不能只靠边框。
避免这样使用
不要为每段文字包一个 Panel；不要给普通容器绑定跳转再嵌套多个交互控件；不要用更重阴影代替清晰间距。
来源与版本
0.1.0，来自 Subtic apps/web/components/ui/panel.tsx。属于直接可复用的视觉与结构基础。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
PanelHeader
| 属性 | 类型 | 默认值 |
|---|---|---|
title | ReactNode | — |
description? | ReactNode | — |
actions? | ReactNode | — |
headingLevel? | 2 | 3 | 2 |
className? | string | — |
DataPoint
| 属性 | 类型 | 默认值 |
|---|---|---|
label | ReactNode | — |
children | ReactNode | — |