1. Project Overview

Kingcloud Design System

A front-end component library that supports the Intact, Vue, and React frameworks.

Enhances team collaboration and enables efficient delivery of industry-specific design solutions.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• Multi-framework Support: Intact / Vue / React
• TypeScript Support
• Dynamic Theme Switching
• Declarative Form Validation
• Comprehensive Documentation and Carefully Crafted Design
• 90% Unit Test Coverage

Components

• Affix Pin
• Badge Badge
• Breadcrumb Breadcrumb
• Button Button
• Card Card
• Carousel Carousel
• Cascader Cascader
• Checkbox Checkbox
• Code Code Editor
• Collapse Collapse
• Colorpicker Color Picker
• Datepicker Date Picker
• Diagram Drawing
• Dialog Modal
• Drawer Drawer
• Dropdown Dropdown Menu
• Editable Editable Text
• Form Forms
• Grid Grid
• Icon Icon font
• Input Input
• Layout Layout
• Menu Menu
• Message Message
• Pagination Pagination
• Progress Progress Bar
• Radio Radio
• Rate Rate
• ScrollSelect Scroll Select
• Select Select
• Skeleton Skeleton
• Slider Slider
• Spin Loading
• Spinner Input Number
• Split Split Panel
• Steps Steps
• Switch Switch
• Table Table
• Tabs Tabs
• Tag Tag
• Timeline Timeline
• Timepicker Time Picker
• Tip Alert
• Tooltip Popover
• Transfer Transfer
• Tree Tree
• TreeSelect Tree Select
• Upload Upload

Browser support

IE / Edge

Firefox

Chrome

Safari

Opera

IE10, IE11, Edge

last 2 versions

last 2 versions

last 2 versions

last 2 versions

5. Tech Stack

Vue

Installation

# Vue3
npm install @king-design/vue --save

# Vue2
npm install @king-desing/vue-legacy --save

Usage

<template>
    <Button>Hello</Button>
</template>
<script>
import {Button} from 'kpc-vue';

export default {
    components: {
        Button
    }
}
</script>

React

Installation

npm install @king-design/react--save

Usage

import {Button} from '@king-design/react';

function App() {
    return <Button>Hello</Button>
}

Development

Requirementsnode@10Andnpm@6.9Above

Visit Yifei Open Source: [https://code.exmay.com/](https://code.exmay.com/) Download
cd kpc
npm install
npm run dev:doc

# Tests
npm run test
# Update test snapshots
npm run snapshot
# Deploy documentation
npm run deploy:doc
# Release
npm run release