ICEN UI 设计系统
搜索组件… ⌘K

折叠面板

与 behaviors/accordion 配套；本例容器带 data-single（展开一项自动收起其余）。

icen.ai 生态的统一设计系统：设计 tokens + 无框架组件 CSS + 行为 JS，所有前端从这里取设计资产。
预设类挂在 html 上：clay（默认）/ piano / art / vangogh / ink / retro，各含 .dark 变体，可与 .style-* 风格配置正交组合。
不可以。组件 CSS 只消费 --token-* 变量，语义色仅绿 / 黄 / 红 + 品牌 accent 四档。
<div class="accordion" data-single>  <div class="accordion-item is-open">    <button class="accordion-trigger" type="button" aria-expanded="true"><span>什么是 @icen.ai/ui？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>    <div class="accordion-panel"><div class="accordion-panel-inner">icen.ai 生态的统一设计系统：设计 tokens + 无框架组件 CSS + 行为 JS，所有前端从这里取设计资产。</div></div>  </div>  <div class="accordion-item">    <button class="accordion-trigger" type="button" aria-expanded="false"><span>如何切换色彩预设？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>    <div class="accordion-panel"><div class="accordion-panel-inner">预设类挂在 html 上：clay（默认）/ piano / art / vangogh / ink / retro，各含 .dark 变体，可与 .style-* 风格配置正交组合。</div></div>  </div>  <div class="accordion-item">    <button class="accordion-trigger" type="button" aria-expanded="false"><span>组件可以直接写死颜色吗？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>    <div class="accordion-panel"><div class="accordion-panel-inner">不可以。组件 CSS 只消费 --token-* 变量，语义色仅绿 / 黄 / 红 + 品牌 accent 四档。</div></div>  </div></div>

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import { initAccordion } from '@icen.ai/ui/kit/accordion';initAccordion();

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add accordion

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/content.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { initAccordion } from '@icen.ai/ui/behaviors/accordion';initAccordion();// 容器带 data-single 时展开一项会收起其余