Get started

Use the native VitePress language menu to switch between Simplified Chinese and English. Guidelines, component documentation, preview controls and interactive examples have corresponding versions. Switching retains the current page and section, along with the global appearance preference. The brand appears as “云乐坊” in Chinese and “YunLeFun” in English.

YunLeFun Design is the shared design system for YunLeFun applications. It brings together design guidelines, brand visuals and UI implementation. Vue components are maintained through npm; Reka UI supplies complex behavior and accessibility primitives, while --ylf-* tokens define their appearance.

Projects that only need design tokens can use the CSS entry without Vue or Sass. Vue components are distributed as SFCs and require Sass in the consuming build. See Public use and releases for the supported scope and release criteria.

Installation

pnpm add @yunlefun/ui @yunlefun/vue
pnpm add -D sass

Load the design tokens once in your application. Choose either CSS or SCSS:

import '@yunlefun/ui/css'

@use '@yunlefun/ui/styles';

Nuxt can register component auto imports:

export default defineNuxtConfig({
  modules: ['@yunlefun/vue/nuxt'],
  css: ['@yunlefun/ui/styles'],
})

Check that your installed release includes the CSS entry and accent styles described here. Try local source through workspace dependencies or pnpm -C packages/ui pack.

Where to begin

• Read Design and UI to understand the design system, styles and component library.
• Read Package responsibilities to distinguish public packages, experiments and internal tools.
• Use Visual foundations for sky blue, font roles and light/dark themes.
• Read Colors and components for the vivid palette and shared tone interface.
• Explore Brand and interfaces for cloud scenes, the logo, composition and documentation.
• Follow Vue integration for explicit imports and a complete Nuxt example.
• Read Component architecture for the responsibilities of Reka UI, YunLeFun and Registry.
• Use Registry distribution to install token, Button or Dialog source by URL.
• Explore the live Vue component demos; each preview has its own theme and viewport controls.
• Try seven AG-UI examples, including task planning, recommendation cards, form return and multiple tools, with live protocol events.
• Read Typography to load display fonts on demand.
• Read Admin guidelines for neutral surfaces and responsive control density in management tables, filters and forms.
• Read Editor guidelines for independent density and neutral surfaces in complex workspaces.
• Move existing applications through the Migration guide, tracking source changes, package releases and deployment separately.