Introduction

Birdpaper UI (v3 · Blue) is built for enterprise admin UIs. It ships a complete design system and high-quality Vue 3 components — simple, consistent, and efficient — so you can build trustworthy product interfaces faster.

Features

• Vue 3.5+ — Composition API with full TypeScript types
• Design system — Reusable tokens for color, type, radius, shadow, motion, and elevation
• Dark mode — Paired semantic colors + CSS variables; toggle with the .dark root class
• Theming — Override --bp-primary-*, --bp-size-*, and related variables to match your brand
• On-demand import — Tree-shakeable components and per-component styles
• Bilingual docs — English / 中文
• Icons — birdpaper-icon (based on Remix Icon)

Requirements

• Node.js >= 18
• Vue >= 3.5.0
• pnpm recommended

Install

# pnpm
pnpm add birdpaper-ui

# npm
npm install birdpaper-ui

# yarn
yarn add birdpaper-ui

Full import

// main.ts
import { createApp } from "vue";
import BirdpaperUI from "birdpaper-ui";
import "birdpaper-ui/theme/index.css";
import App from "./App.vue";

const app = createApp(App);
app.use(BirdpaperUI);
app.mount("#app");

<template>
  <bp-button status="primary">Hello Birdpaper</bp-button>
</template>

On-demand import

<script setup lang="ts">
import { Button } from "birdpaper-ui";
import "birdpaper-ui/theme/button.css";
</script>

<template>
  <Button status="primary">Button</Button>
</template>

See the docs for more: Install · Quick Start

Components

| Category | Components | |----------|------------| | General | Button, Icon, Link, Space, Grid | | Data Entry | Form, Input, Textarea, InputNumber, InputTag, Select, Radio, Checkbox, Switch, Rate, DatePicker, TimePicker, ColorPicker, VerifyCode | | Data Display | Table, Tag, Badge, Avatar, Image, Statistic, Empty, Tooltip | | Navigation | Pagination, Dropdown, Steps | | Feedback | Alert, Message, Modal, Drawer, Popconfirm, Spin, Trigger | | Other | ConfigProvider |

Full catalog: Component Catalog

Development

This repo is a pnpm monorepo:

birdpaper-ui/
├── packages/
│   ├── birdpaper-ui/     # Published package entry
│   ├── components/       # Component source
│   ├── theme/            # Styles and design tokens
│   └── hooks/            # Shared hooks
├── docs/                 # VitePress documentation site
└── scripts/              # Build scripts

# Install dependencies
pnpm install

# Start the docs dev server (default http://localhost:7070)
pnpm docs:dev

# Build the component library
pnpm build

# Build the docs
pnpm docs:build

# Preview the docs build
pnpm docs:preview

# Unit tests
pnpm test

Contributing guides: Contributing · Local Development

Before opening a PR, sync the default branch and create a feature branch:

git pull
git checkout -b feat/your-topic

Browser Support

Modern browsers and the latest two versions of Chromium, Firefox, Safari, and Edge. IE is not supported.

Links

| | | |---|---| | Documentation | https://www.birdpaper.design/en/ | | 中文文档 | https://www.birdpaper.design | | npm | https://www.npmjs.com/package/birdpaper-ui | | Icons | https://icon.birdpaper.design | | Changelog | https://www.birdpaper.design/en/develop/changelog/ |

License

MIT © 2021-PRESENT birdpaper-ui