ChuFix UI v0.1.0

ChuFix UI

A no-friction component library, ready out of the box

ChuFix · same source for Vue & React · themable via CSS vars · install or copy source · works in plain HTML/JS

Get started Plain HTML usage Browse components GitHub →

Why ChuFix UI

One source, two frameworks
Vue 3 and React share the same design tokens, class names, and interaction behaviors. Move between projects with zero rework.
Zero-runtime theming
Colors, radii, shadows are all CSS variables. Switch themes by toggling — no JS theme factory. [data-theme]
Two ways to use it
npm i @chufix-design/vue or npx chufix add copy source into your repo with npx chufix add.
Plain HTML works too
All visuals come from cf-* CSS classes — you can get 90% of the look without writing a single Vue or React line. One <link> tag is enough.

See it live

Real interactive instances below — not screenshots. Code is collapsed by default; expand to switch between Vue / React / CLI and copy.

 
<script setup lang="ts">
import { CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfButton variant="primary">Primary</CfButton>
  <CfButton variant="secondary">Secondary</CfButton>
  <CfButton variant="tertiary">Tertiary</CfButton>
  <CfButton variant="ghost">Ghost</CfButton>
  <CfButton variant="danger">Danger</CfButton>
</template>
import { CfButton } from '@chufix-design/react';

export default () => (
  <>
    <CfButton variant="primary">Primary</CfButton>
    <CfButton variant="secondary">Secondary</CfButton>
    <CfButton variant="tertiary">Tertiary</CfButton>
    <CfButton variant="ghost">Ghost</CfButton>
    <CfButton variant="danger">Danger</CfButton>
  </>
);
# Vue 3
pnpm add @chufix-design/vue @chufix-design/tokens

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

# or copy source into your repo
npx @chufix-design/cli add button

What's already in

151+ components covering forms, containers, feedback, data display, navigation, layout, editors, system shells, multi-window, plus 22 charts and 8 page-level templates.

ButtonInputTextareaSelectCheckboxRadioSwitchCardModalTooltipToastTagBadgeAvatarTabsAlertSkeletonDividerEmptyProgressBreadcrumbPaginationSpinnerSearchInputNumberInputAccordionSliderDrawerPopoverDropdownInputGroupOtpInputFormComboboxTagInputDropzoneColorPickerDatePickerDateRangePickerBannerPageHeaderStepperSplitterAppShellSidebarNavMenuListDescriptionListStatTableDataGridTreeViewKbdLinkCodeAspectRatioRatingTocScrollAreaSegmentedControlKVEditorJsonViewerJsonDiffCalendarKanbanMentionCascaderImageCarouselStatisticTimelineResultBackTopAffixWatermarkMarqueeFloatButtonAnchorImagePreviewTimePickerTransferHighlightTextEllipsisCountDownInfiniteScrollTimeRangePickerCalendarHeatmapTourQRCodeIconButtonCommandPaletteHoverCardContextMenuProtocolBadgeStatusCodeBadgeCodeEditorDiffEditorMarkdownEditorRegexBuilderAnsiTextTitleBarNotificationCenterGlobalSearchDockLayoutLineChartDonutChartGaugeSankeyDiagramProtocolPaneSqlWorkbench Full list →