ChuFix UI v0.1.0

Ctrl K

Preview Updated 2026-05-10

Components

The full catalog of components currently shipped by ChuFix UI and their status.

Overview

P0–P11 + 8 templates + 22 data visualization components are all materialized, 151+ components total, covering every visual unit in the ProtoForge design — form / feedback / container / navigation / data display / editor / system shell / multi-window / chart / template.

Form

169 built-in SVG icons with typed names, inlined directly by React / Vue components.

5 variants, 3 sizes, 2 semantic tones, loading state.

3 variants, 3 sizes; clearable, prefix/suffix, error state.

Native input role=switch semantics preserved; supports loading and disabled states.

3 sizes, indeterminate state, native input semantics preserved.

Radio + RadioGroup combo, mutually exclusive, keyboard reachable.

Same color system as Input; autoResize, character count, resize control.

Config-driven options API; clearable, keyboard navigation, disabled items.

Preset search icon + clear button + optional shortcut hint.

+/− stepper, min/max/step constraints, arrow keys, auto clamp.

Single-value range drag; ticks, bubbles, full ←→↑↓ keyboard support.

Compose Input/Button/Select/static labels into a single control with shared outer radius and border.

Fixed-cell numeric input with auto-advance, Backspace, and full-string paste distribution.

Form wrapper that unifies label / hint / error display and adopts existing inputs.

Editable variant of Select; type to filter, optionally allow new entries.

Multi-tag input control; Enter to add, Backspace to remove, paste for bulk import, validation.

Drag and click double trigger; built-in file list, progress bar, and reject callback.

Edit HTTP headers / query params / env vars; toggle column and description column optional.

Type @ in a textarea to trigger a candidate dropdown; ↑↓ Enter / Tab to select.

HSV palette + hue / alpha sliders + HEX / RGB / HSL inputs + preset swatches.

Month panel with day / month / year view switch; min/max/disabledDate constraints, clearable.

Side-by-side dual months, hover preview, last 7 / 30 / 90 day quick presets.

Embedded month view with optional week numbers; shares date utils with DatePicker.

Column-by-column expand picker for multi-level options; path selection for region / department / category.

Trigger + three-column scrolling panel for hour / minute / second; HH:mm and HH:mm:ss precisions.

Two-column list with arrows in between; move items between “available / selected” with search.

Two TimePickers combined to pick a “start – end” time range.

Container

3 variants; Header / Body / Footer three-section layout; clickable whole card.

All-in-one page header with title + description + breadcrumb + actions + toolbar + tabs.

CSS Grid layout for header + sidebar + main + aside + footer; site-wide scaffold.

Drag the divider to resize panels on either side; horizontal and vertical, keyboard reachable.

Data display

3 variants, 5 tones, 3 sizes; closable and rounded.

Standalone pill or anchored to a child’s corner; dot/count forms, overflow shows +.

Image / initials / icon with automatic fallback; AvatarGroup overlapping layout.

General-purpose list; single / multi select, grouping, card style, custom render.

dt / dd style key-value display; horizontal or vertical, multi-column, optional border.

Metric card with number + label + trend; dashboard staple.

Column-definition API; sorting, row selection, 3 variants, custom render.

Heavy-duty grid — column drag-resize, double-click cell editing, sticky header scroll.

Nested tree display; single / checkbox (with cascade) selection, expand / collapse, custom icons.

Tiny typographic control for shortcuts; supports key combos and custom separators.

4 variants; auto-detects external links, can be disabled, design-consistent style.

InlineCode + CodeBlock; supports title, language tag, line numbers, copy button.

Container that locks the child’s aspect ratio; image / video / iframe placeholder.

Star rating with integer / half-star precision; readonly / disabled, optional value display.

Article side table of contents; depth-based indent, manual or scroll-aware tracking.

Themed scrollbar container; gutter stable + overscroll contain.

Collapsible JSON tree view; values colored by type, deep-expand and type badges supported.

Line-level LCS diff between two JSON values; tinted by add / del / eq.

Multi-column card board; HTML5 drag to move cards across columns, WIP limit and accent color per column.

Image container with shimmer loading placeholder, error fallback, and native lazy loading.

Horizontal carousel for images or custom content; autoplay, loop, indicators, prev/next controls.

Large number + thousand separators / prefix-suffix / countdown; top-of-dashboard metric.

Sequential event stream with dot / line / timestamp; changelog and audit trail.

Horizontal continuous scroll for announcements / tickers / logo walls; pauses on hover.

Full-screen image viewer with wheel zoom + mouse drag + keyboard +/− / 0 / Esc controls.

Highlight matched keywords inside long text; for search result lists and hit markers.

Multi-line text overflow ellipsis with optional “expand/collapse”; the button only appears when actually truncated.

Standalone countdown supporting DD/HH/mm/ss/SSS placeholders; zero-out callback.

52 weeks × 7 days grid colored by intensity; activity / contribution stats.

Pure client-side, zero-dependency encoder; auto picks version 1–40, 4 error-correction levels.

line / segmented / pill variants; controlled and uncontrolled; items array API.

Current location trail; last item is non-clickable, separator is customizable.

Number buttons + prev/next + jump input; auto-calculated ellipses.

Items array API; full ↑↓ Enter Esc keyboard support; groups and danger items.

Multi-step flow progress; 3 variants, horizontal or vertical, clickable to switch.

Vertical primary navigation; groups, nested submenus, badges, collapsible icon mode.

Top horizontal navigation; each item can attach a rich panel (multi-column links + descriptions).

Semantic alias for Tabs segmented variant; for view / time-period switching.

Explicit anchor list; highlights the current section while scrolling, smooth scrolls on click.

Layout and state

Horizontal / vertical divider; 3 line styles, optional label and position.

Placeholder for empty lists / tables / search results; optional icon and action button.

Linear / circular progress; 5 semantic tones, indeterminate state.

Spinning ring loading icon; 3 sizes × 6 tones, optional text label.

Single / multi-expand modes; 3 border styles (bordered / flush / separated).

Sticky button that appears past a scroll threshold; smooth-scrolls to the container top.

Switches an element to fixed positioning when it scrolls past; for toolbars / anchors / submit bars.

Overlay tilted, repeated text watermark on a content container to trace leaks.

Round button anchored to a viewport corner; supports tooltip and badge.

Auto-loads the next page when scrolled to the bottom; based on IntersectionObserver.

Step-by-step highlight on key UI elements + explanation popover for new-feature onboarding.

Feedback and overlays

Built-in portal, focus trap, scroll lock, ESC / mask close, enter/exit animations.

4 placements; auto edge-avoidance; hover and focus dual trigger; non-blocking.

Imperative API + single-mount Toaster; 5 semantics, 6 positions, auto-dismiss.

4 tones × 3 variants; inline static message with title, icon, and close button.

text / circle / rect shapes; shimmer animation; multi-line text placeholder helper.

Edge-anchored variant of Modal; slides from any side. Shares portal / focus trap / scroll lock.

Interactive variant of Tooltip; supports any rich content, forms, and buttons.

Full-width top notice; 6 tones × 2 variants, closable, can stick to top.

Full-page feedback for success / failure / error states; supports 404 / 403 / 500 placeholders.

Editor

Lightweight code editing container: textarea + line numbers + Tab indent. For full syntax / completion, plug in Monaco / CodeMirror.

Line-level LCS diff; split / unified modes; line numbers + +/- markers.

Built-in minimal markdown renderer; split / edit / preview modes.

Live-compile + match testing; friendly error messages; flags toggled via chips.

Parses ANSI escape sequences and renders colored spans; pure display, no xterm.js dependency.

System shell

Desktop-app window title bar. macOS-style traffic-light + centered title; Windows / Linux-style min/max/close + left-aligned.

Editor bottom bar. Three slots (left / center / right); 6 semantic tones.

App-top menu bar (File / Edit / View style); shortcuts, separators, danger items.

Notification history panel with unread count, mark-all-read, and clear controls.

Full-screen overlay app-level search; category switch + grouped list + path / badge / shortcut.

Multi-window layout

Recursive split + tabbed pane shell for desktop apps. v1 declarative; v2 adds drag-rearrange.

Draggable floating panel teleported to body; pairs with TearOffTab / DockLayout’s detach action.

Corner-anchored collapsible inspector panel; for performance monitoring / debug overlays.

Fires a tear-off event when a tab is dragged past a threshold; consumer decides whether to spawn DetachedPanel or a new window.

Data visualization

Inline mini trend line; common as the trend line on a KPI card.

Multi-series line chart; smooth curves, gridlines, x/y axis labels.

Area chart with stacked mode and smooth curve support.

Single-series vertical bar chart.

Binned histogram, one bar per bin.

Horizontal 100% stacked bars; suited to share-of-total distributions.

Single-value progress bar + target line + qualitative bands.

OHLC candlestick chart; green up / red down; wick + body.

Hollow pie chart; can host a value/label in the center.

Layer-by-layer narrowing conversion funnel; absolute values per layer.

Hierarchical area-rectangle chart; single-level slice-and-dice layout.

Node + weighted-edge flow diagram; node height = flow.

2D scatter; can be tinted by group.

Five-number summary + outliers for statistical distribution.

Multi-axis polygon chart for comparing dimensions; supports multiple series.

Vertically stacked density curves for multiple groups.

Ring-shaped current-value gauge; 4 tones.

Value + unit + delta + embedded sparkline trend.

Horizontal request waterfall with one segment per phase.

2D matrix heatmap; green→yellow→red OKLCH hue lerp.

Node + edge graph; default circular equidistant layout.

Crosshair locator + tooltip helper that drops into any SVG chart.

Chart-header toolbar: title + legend toggle + zoom/export/refresh buttons.

Templates / page modules

Protocol monitor shell with SSE / MQTT / Kafka / gRPC tabs.

Network capture pane with HAR / Hex / PCAP / Cert / Cookie tabs.

SQL workbench shell with Editor / Console / History tabs.

Terminal pane shell with Terminal / Output / CommandLine tabs.

Crash Dialog / Stack Trace / Dump Uploader / Safe Mode tabs.

Plugin center pane with Card / Manifest / Permission / Marketplace tabs.

API debugging pane with Collection / Request / Response / Mock / Workflow tabs.

Onboarding flow shell with First-Run Wizard / Hotspot Tour / Full Flow tabs.

反馈与讨论

Components · Discussion

0

正在加载评论...