Panda UI

Appearance

Get Started ​

Panda UI is an UI component framework for Vue.js technically, but it is also a design system that helps you to build Intuitive, Efficient, Simplified applications.

There are 45+ components totally, and will be migrated gradually from vue2 to vue3, document will be completed later...

Install ​

Note: panda-ui is currently not a released npm package, because there still things to do, it will be released when it's ready, maybe with another name.
bash
npm install panda-ui -S
npm install panda-ui -S

with CDN

html
<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/panda-ui/dist/panda-ui.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/panda-ui/dist/panda-ui.js"></script>
</head>
<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/panda-ui/dist/panda-ui.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/panda-ui/dist/panda-ui.js"></script>
</head>

How to use ​

ts
import { createApp } from 'vue';
import PandaUI from 'panda-ui';
import 'panda-ui/dist/panda-ui.css';
import App from './App.vue';

const app = createApp(App);

app.use(PandaUI);
app.mount('#app');
import { createApp } from 'vue';
import PandaUI from 'panda-ui';
import 'panda-ui/dist/panda-ui.css';
import App from './App.vue';

const app = createApp(App);

app.use(PandaUI);
app.mount('#app');

Global config ​

ts
import { createApp } from 'vue';
import PandaUI from 'panda-ui';
import 'panda-ui/dist/panda-ui.css';
import App from './App.vue';

const app = createApp(App);

// set config globally
app.use(PandaUI, {
  size: 'small',
});
app.mount('#app');
import { createApp } from 'vue';
import PandaUI from 'panda-ui';
import 'panda-ui/dist/panda-ui.css';
import App from './App.vue';

const app = createApp(App);

// set config globally
app.use(PandaUI, {
  size: 'small',
});
app.mount('#app');