Design Resources

Birdpaper UI provides a full set of design resources so designers and developers can collaborate efficiently and keep design and implementation aligned.

Icon Library

Birdpaper UI’s official icon set is Birdpaper Icon, built on Remix Icon. It offers 2,000+ Vue icon components in line and fill styles.

Install

bash

pnpm add birdpaper-icon

Basic Usage

Icons support size, fill, rotate, and related props. Import only what you need:

vue

<script setup>
import { IconSearchLine, IconHeartFill } from "birdpaper-icon";
</script>

<template>
  <!-- Line icon -->
  <IconSearchLine size="16px" />

  <!-- Fill icon with custom color -->
  <IconHeartFill size="16px" fill="#f53f3f" />

  <!-- Rotation -->
  <IconSearchLine size="16px" :rotate="90" />
</template>

Icon Props

size	String	18px	Icon size, including unit
fill	String	#595959	Icon color
spin	Boolean	false	Enable spin animation
rotate	Number	-	Rotation angle in degrees

Guideline: Icons are named Icon{Name}{Style}, where style is Line or Fill. Prefer line icons by default; use fill icons for emphasis or selected states.

Design Tokens

All design tokens are CSS variables you can reference in design tools or code. Naming follows --bp-{category}-{token}.

Color	--bp-primary- / --bp-gray-	--bp-primary-6: #165dff	Color
Size	--bp-size-	--bp-size-height-default: 32px	Style Guide
Layering	--z-index-	--z-index-base: 2000	Style Guide
Spacing	No dedicated prefix	Follows the 4px grid	Style Guide

Tip: Color tokens also expose -rgb variants (for example --bp-primary-6-rgb) for rgba() opacity. Dark mode switches variables automatically. See Color and Style Guide.

Component Index

Components grouped by role. Open the matching docs for details:

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

Theme Customization

Override CSS Variables

Override CSS variables for global theming, including runtime switches:

css

:root {
  --bp-primary-6: #722ed1; /* Swap brand color to purple */
  --bp-primary-5: #9254de;
  --bp-primary-4: #b37feb;
}

Guideline: When changing the brand color, update the commonly used steps 4–7 together so the ramp stays coherent. Changing only the primary step (6) can make hover and active states feel off.

SCSS Variable Customization

Use SCSS variables at build time for lower-level options such as class prefixes and spacing baselines:

scss

$namespace: "bp"; // Class name prefix
$borderSize: 1px; // Border width
$defaultMargin: 10px; // Default margin

Dark Mode Theming

Theme overrides also apply in dark mode. To customize dark mode separately, scope under .dark:

css

:root {
  --bp-primary-6: #722ed1;
}

.dark {
  --bp-primary-dark-6: #b37feb; /* Purple primary for dark mode */
}

Tip: Dark-mode variables use a -dark- infix, and the scale is inverted (1 darkest, 10 lightest). See Dark Mode.

Design Resources ​

Icon Library ​

Install ​

Basic Usage ​

Icon Props ​

Design Tokens ​

Component Index ​

Theme Customization ​

Override CSS Variables ​

SCSS Variable Customization ​

Dark Mode Theming ​

Links ​