xusir Component Library

A custom Vue 3 business component library (11 components, all written as <script setup> single-file components). Zero third-party UI dependencies — icons (XIcon), the segmented selector (XSegmented) and the toast (useToast) are all hand-rolled. Only XEditor, the rich-text editor, depends on @tiptap.

This site globally registers every component. Each component has its own documentation page, listed below in the same four categories as the original project.

Component Catalog (by category)

Category	Component	Link	Description
Basic	XIcon	xicon	Zero-dependency SVG icon set; color inherits the parent text color
Basic	XCode	xcode	Code display with a hand-written, zero-dependency syntax highlighter
Basic	XTime	xtime	Digital / analog / traffic-light display modes
Basic	XTimeDiff	xtimediff	Elapsed / countdown time diff, 5 visual styles
Basic	XLoading	xloading	Various pure CSS / SVG loading animations
Chart	XRadar	xradar	Pure-SVG hand-rolled radar chart, zero dependencies
Chart	XHeatmap	xheatmap	Gitee-style contribution heatmap
Chart	XKeyboard	xkeyboard	Pure-SVG keyboard diagram, 5 built-in layouts
Tool	XPixelImage	xpixelimage	Canvas pixel-art image conversion
Tool	XEditor	xeditor	Tiptap-based rich-text editor
Other	XSegmented	xsegmented	Segmented selector, an alternative to el-radio-group

See each component's own page for its full Props / Events / Examples / Caveats.

---

Using the library in your project: global registration

The following walks through taking the components and registering them globally in your own Vue 3 project so you can use them directly.

Step 1: Copy the component sources into your project

Copy each component directory wholesale into your project's component folder (example puts them under src/components/xusir/):

# Copy a single component (XTime as an example)
cp -r <component-source>/XTime src/components/xusir/XTime

# Or copy the whole library, preserving relative imports (XCode references ../XIcon)
cp -r <component-source>/src/components/element/X* src/components/xusir/

Note: component sources live under docs/.vitepress/theme/components/element/ on this site. Copy the whole library together, because XCode internally references XIcon via ../XIcon/index.vue. Keeping the directory hierarchy intact makes those relative paths resolve.

Step 2: Install dependencies required by XEditor (only if you use XEditor)

All other components are dependency-free; XEditor needs:

npm install @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-code-block-lowlight lowlight

Step 3: Register the components globally

In your app entry (e.g. src/main.js) register them as global components, then use <XTime /> anywhere in a template:

// src/main.js
import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'

// Heavier components / ones depending on tiptap are registered asynchronously
// to keep them out of the initial bundle
const app = createApp(App)

app.component('XIcon', () => import('./components/xusir/XIcon/index.vue'))
app.component('XCode', () => import('./components/xusir/XCode/index.vue'))
app.component('XTime', () => import('./components/xusir/XTime/index.vue'))
app.component('XTimeDiff', () => import('./components/xusir/XTimeDiff/index.vue'))
app.component('XLoading', () => import('./components/xusir/XLoading/index.vue'))
app.component('XRadar', () => import('./components/xusir/XRadar/index.vue'))
app.component('XHeatmap', () => import('./components/xusir/XHeatmap/index.vue'))
app.component('XKeyboard', () => import('./components/xusir/XKeyboard/index.vue'))
app.component('XPixelImage', () => import('./components/xusir/XPixelImage/index.vue'))
app.component('XSegmented', () => import('./components/xusir/XSegmented/index.vue'))
app.component('XEditor', defineAsyncComponent(() => import('./components/xusir/XEditor/index.vue')))

app.mount('#app')

If you prefer a "synchronous + single entry" style, follow the library's own index.js approach and use import.meta.glob to auto-discover components and build the menu by category.

Step 4: Use them in templates

<template>
  <XTime style-type="digital" />
  <XRadar :data="chartData" />
  <XSegmented :options="['Live', 'History']" v-model="seg" />
</template>

For on-demand single-component imports, just import the component file directly:

import XTime from '@/components/xusir/XTime/index.vue'

---

Caveats

• Components use a neutral palette + their own CSS tokens (e.g. --xcode-*, --x-time-*) and do not depend on your app shell's variables. Dark mode is applied automatically via an outer data-theme="dark".
• XIcon's icon assets are collected automatically via import.meta.glob('./icon/**/*.svg', { query: '?raw' }). Copy the directory together with its icon/ subfolder.
• All component names start with X and are globally unique.