ChuFix UI v0.1.0

础件

初见即用的基础组件库

础件 · 双框架同源 · CSS 变量主题 · 可装包也可拷源码 · 纯 HTML/JS 也能用

快速开始 纯 HTML 用法 浏览组件 GitHub →

为什么是础件

双框架同源
Vue 3 与 React 共用同一套 design token、同一套类名、同一套交互行为。从 Vue 项目搬到 React 项目，零负担。
零运行时主题
所有颜色、半径、阴影都走 CSS 变量。切主题只需改 ，没有 JS 主题工厂。 [data-theme]
两种用法
npm i @chufix-design/vue 或 npx chufix add npx chufix add 把源码直接拷进自己仓库。
纯 HTML 也能用
所有视觉走 cf-* CSS 类名，不写任何 Vue/React 也能拿到 90% 的视觉。一个 <link> 标签搞定。

一眼看到效果

下面是真实可交互的实例，不是截图。代码默认折叠，展开后可在 Vue / React / CLI 三种来源之间切换并一键复制。
Demo source
src/App.vue vue 
<script setup lang="ts">
import { CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfButton variant="primary">主要</CfButton>
  <CfButton variant="secondary">次要</CfButton>
  <CfButton variant="tertiary">三级</CfButton>
  <CfButton variant="ghost">幽灵</CfButton>
  <CfButton variant="danger">危险</CfButton>
</template>
src/App.tsx tsx 
import { CfButton } from '@chufix-design/react';

export default () => (
  <>
    <CfButton variant="primary">主要</CfButton>
    <CfButton variant="secondary">次要</CfButton>
    <CfButton variant="tertiary">三级</CfButton>
    <CfButton variant="ghost">幽灵</CfButton>
    <CfButton variant="danger">危险</CfButton>
  </>
);
scripts/setup.sh bash 
# Vue 3
pnpm add @chufix-design/vue @chufix-design/tokens

# React 18+
pnpm add @chufix-design/react @chufix-design/tokens

# 或源码复制（拷贝到自己仓库）
npx @chufix-design/cli add button

现在已经有什么

151+ 个组件，覆盖表单、容器、反馈、数据展示、导航、布局、编辑器、系统壳、多窗口、22 项数据可视化与 8 个页面模版。

ButtonInputTextareaSelectCheckboxRadioSwitchCardModalTooltipToastTagBadgeAvatarTabsAlertSkeletonDividerEmptyProgressBreadcrumbPaginationSpinnerSearchInputNumberInputAccordionSliderDrawerPopoverDropdownInputGroupOtpInputFormComboboxTagInputDropzoneColorPickerDatePickerDateRangePickerBannerPageHeaderStepperSplitterAppShellSidebarNavMenuListDescriptionListStatTableDataGridTreeViewKbdLinkCodeAspectRatioRatingTocScrollAreaSegmentedControlKVEditorJsonViewerJsonDiffCalendarKanbanMentionCascaderImageCarouselStatisticTimelineResultBackTopAffixWatermarkMarqueeFloatButtonAnchorImagePreviewTimePickerTransferHighlightTextEllipsisCountDownInfiniteScrollTimeRangePickerCalendarHeatmapTourQRCodeIconButtonCommandPaletteHoverCardContextMenuProtocolBadgeStatusCodeBadgeCodeEditorDiffEditorMarkdownEditorRegexBuilderAnsiTextTitleBarNotificationCenterGlobalSearchDockLayoutLineChartDonutChartGaugeSankeyDiagramProtocolPaneSqlWorkbench 完整清单 →