Composed UI

A Vue 3 Component Library

Theme Customizable, Fully using TypeScript and SFC, Supports tree shaking.

Kinda Interesting

English | 中文

Documentation

Composed UI

Features

• The component library is implemented with Vue@3.5.21+ TypeScript@5.9.2 + Vite@7.1.4 + Less@4.4.1.
• Currently, it includes 67 basic UI components and 18 utility functions, with continuous exploration and updates ongoing...
• Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me.
• By the way, they are all treeshakable.
• All the stuff inCompose UI is written in TypeScript. It can work with your typescript project seamlessly.
• All components are built in single file component SFC and can be used independently.
• Ready to use out of the box, no fuss.

Installation

pnpm add composed-ui
# or
npm install composed-ui
# or
yarn add composed-ui
# or
bun add composed-ui

Use Components

Global Registration All Components (Not Recommended)

No tree-shaking. Bundle will have redundant codes.

import { createApp } from 'vue'
import App from './App.vue'
import ComposeUI from 'composed-ui'
import 'composed-ui/css'

const app = createApp(App)
app.use(ComposeUI)
app.mount('#app')

Global Partial Registration

In this form, only the imported components will be bundled.

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Tag } from 'composed-ui'
import 'composed-ui/es/button/Button.css'
import 'composed-ui/es/tag/Tag.css'

const app = createApp(App)
app.use(Button).use(Tag)
app.mount('#app')

Local Registration

In this form, only the imported components will be bundled as well.

<script setup lang="ts">
import { Button, Tag } from 'composed-ui'
import 'composed-ui/es/button/Button.css'
import 'composed-ui/es/tag/Tag.css'
</script>
<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

Both Global Partial Registration and Local Registration require manually importing the global default styles of the component library (Automatic On-Demand Import is recommended).

import { createApp } from 'vue'
import App from './App.vue'
import 'composed-ui/es/style/global.css' // 引入全局默认样式

const app = createApp(App)
app.mount('#app')

Automatic On-Demand Import (Strongly Recommended)

Use the unplugin-vue-components plugin to automatically import components on demand. The plugin will automatically parse the components used in the template and import the components and styles.

pnpm add unplugin-vue-components -D
# or
npm install unplugin-vue-components -D
# or
yarn add unplugin-vue-components -D
# or
bun add unplugin-vue-components -D

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
// composed-ui on-demand import
import { ComposeUIResolver } from 'composed-ui'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // auto import components from ComposeUI
        ComposeUIResolver({
          cjs: false // whether use commonjs build, default false
        })
      ]
    })
  ]
})

Then, you can directly use all components from composed-ui in your code.

<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

Use Types

All types can be directly imported and used from composed-ui without any additional installation.

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'composed-ui'
const shape = ref<ButtonProps['shape']>('default')
</script>
<template>
  <Button :shape="shape">button</Button>
</template>

Use Functions

<script setup lang="ts">
import {
  dateFormat,
  formatNumber,
  rafTimeout,
  cancelRaf,
  throttle,
  debounce,
  add,
  downloadFile,
  toggleDark,
  useEventListener,
  useMutationObserver,
  useScroll,
  useFps,
  useMediaQuery,
  useResizeObserver,
  useSlotsExist,
  useInject,
  useOptionsSupported
} from 'composed-ui'
</script>

Project

• Get the project code

git clone https://github.com/Kitesource/composed-ui.git

• Install dependencies

cd composed-ui

pnpm i

• Run project

pnpm dev

• Run docs

pnpm docs:dev

Components

Functions