ccui Component Library

website·Indexed 29 days ago

https://vaebe.github.io/ccui/

An out-of-the-box component library based on Vue 3 and TypeScript, with visual and mental models aligned with Ant Design v6. It provides a comprehensive set of components including layout, navigation, data entry, and feedback, featuring integration with Iconify for icons and a global ConfigProvider for theme and locale management.

Tokens: 98.7K
Snippets: 575
Records: 643
Agent score: 74%

What's inside ccui

Use the Divider component to separate content
The c-divider component is used to separate different paragraphs of text, inline text/links (such as in table action columns), or to act as a section break when paired with a heading.
```
<template>
  <p>First paragraph</p>
  <c-divider />
  <p>Second paragraph</p>
</template>
```
https://vaebe.github.io/ccui/components/divider/index.htmlwebsitellms
Use c-segmented for mutually exclusive option switching
The c-segmented component is used to switch between two or more mutually exclusive options. It is more compact than a Radio group and is ideal for view switching (e.g., Day/Week/Month) or switching between similar datasets.
```
<template>
  <c-segmented v-model="v" :options="['Daily', 'Weekly', 'Monthly']" />
</template>
<script setup>
import { ref } from 'vue'
const v = ref('Daily')
</script>
```
https://vaebe.github.io/ccui/llms-full.txt?llms-doc=selectwebsitellms
Use the c-rate component for rating and feedback
The c-rate component provides a visual rating interface (defaulting to 5 stars) to collect user satisfaction/preference feedback or display read-only aggregated scores. It supports double-binding via v-model for the rating value.
```
<script setup>
import { ref } from 'vue'
const value = ref(3)
</script>

<template>
  <c-rate v-model="value" />
  <span>Current: {{ value }} stars</span>
</template>
```
https://vaebe.github.io/ccui/llms-full.txt?llms-doc=resultwebsitellms
Use c-result to provide operation feedback
The c-result component is designed to give users clear feedback after completing a form, transaction, or creation process, or when a route hits an unauthorized, not found, or service error page. It consists of a status icon, a title, a sub-title, and optional action buttons.
```
<template>
  <c-result 
    status="success" 
    title="Operation Successful!" 
    sub-title="Order #2025-04-001 has been submitted.">
    <template #extra>
      <c-button type="primary">View Order</c-button>
      <c-button style="margin-inline-start: 8px">Return Home</c-button>
    </template>
  </c-result>
</template>
```
https://vaebe.github.io/ccui/components/result/index.htmlwebsitellms
Use c-card to aggregate information
The c-card component is used to group related information into a container. It is ideal for overview displays, entry-point cards, or independent units within a list.
```
<template>
  <c-card header="基础卡片">
    Content goes here.
  </c-card>
</template>
```
https://vaebe.github.io/ccui/components/card/index.htmlwebsitellms
Use the Progress component for task completion
The c-progress component visualizes the completion level of an operation. It is recommended for operations taking 2 seconds or more, real-time file transfers, or percentage-based metrics like data fill rates.
```
<template>
  <c-progress :percent="30" />
</template>
```
https://vaebe.github.io/ccui/components/progress/index.htmlwebsitellms
Use c-card-meta for card header layouts
The c-card-meta component is a top-level component (not under the Card namespace) used to display a standard layout consisting of an avatar, title, and description. It is ideal for list items or the header section of detail cards.
```
<template>
  <c-card style="width: 320px">
    <c-card-meta title="人称的太阳" description="来自瑞典斯德哥尔摩的乐队 Mando Diao" />
  </c-card>
</template>
```
https://vaebe.github.io/ccui/llms-full.txt?llms-doc=carouselwebsitellms

Implement a Collapse panel

The c-collapse component is used to hide complex content. Use v-model to bind an array of currently expanded panel names. Each panel is defined by a c-collapse-item with a unique name and a title.

<script setup>
import { ref } from 'vue'
const value = ref(['1'])
</script>

<template>
  <c-collapse v-model="value">
    <c-collapse-item name="1" title="Panel 1">Content 1</c-collapse-item>
    <c-collapse-item name="2" title="Panel 2">Content 2</c-collapse-item>
    <c-collapse-item name="3" title="Disabled Panel" disabled>Disabled content</c-collapse-item>
  </c-collapse>
</template>

Use the Calendar component for date selection
The c-calendar component displays dates by month and is typically used for schedules, tasks, or shift planning. By default, it uses v-model to bind a date string in YYYY-MM-DD format.
```
<script setup>
import { ref } from 'vue'

const date = ref(new Date().toISOString().slice(0, 10))
</script>

<template>
  <c-calendar v-model="date" />
  <p>Selected: {{ date }}</p>
</template>
```
https://vaebe.github.io/ccui/llms-full.txt?llms-doc=cardwebsitellms

Implement application-wide dark mode in CCUI

CCUI components use a --ccui-* CSS variable system. Dark mode is activated by adding the .dark class to a parent element (typically <html> or <body>). To enable this, you must import the dark theme CSS from @vaebe/ccui-theme/darkTheme.css once in your application.

const STORAGE_KEY = 'ccui-theme'

function applyDark(isDark: boolean) {
  document.documentElement.classList.toggle('dark', isDark)
}

// Initialize: use saved preference or system default
const media = window.matchMedia('(prefers-color-scheme: dark)')
const saved = localStorage.getItem(STORAGE_KEY) // 'dark' | 'light' | null
applyDark(saved ? saved === 'dark' : media.matches)

// Manual toggle
function setTheme(isDark: boolean) {
  localStorage.setItem(STORAGE_KEY, isDark ? 'dark' : 'light')
  applyDark(isDark)
}

// Listen for system changes if no manual preference is set
media.addEventListener('change', (e) => {
  if (!localStorage.getItem(STORAGE_KEY)) applyDark(e.matches)
})

Customize c-card header and content

Use slots to provide custom layouts for the card:

default slot: Used for the main card content.
header slot: Used to completely customize the title area, allowing for icons, buttons, or subtitles.

<template>
  <c-card>
    <template #header>
      <div style="display: flex; align-items: center; justify-content: space-between">
        <span style="font-weight: 500">Recent Orders</span>
        <c-button type="text">View All</c-button>
      </div>
    </template>
    Main content area
  </c-card>
</template>

Declare table columns using template syntax
The <c-table-column> component allows for template-based column declarations as children of <c-table>. This approach is preferred over the columns prop when you need conditional rendering (v-if), dynamic columns (v-for), or complex cell content via scoped slots.
Note: The columns prop and template-based declarations are mutually exclusive; if the columns prop is provided, it takes precedence and template children are ignored.
```
<template>
  <c-table :data-source="data">
    <c-table-column title="姓名" data-index="name" column-key="name" />
    <c-table-column title="年龄" data-index="age" column-key="age" :sorter="true" />
    <c-table-column title="角色" data-index="role" column-key="role" />
  </c-table>
</template>
```
https://vaebe.github.io/ccui/llms-full.txt?llms-doc=tablecolumngroupwebsitellms