Markdown

IntermediateNov 10, 2026

Emerald is a design system for Vue that builds on Vuetify0. It ships tokens, CSS, and Em* components. v0 handles behavior and accessibility. Emerald handles appearance.

Try Emerald on these docs

Repaints the documentation with the Emerald palette — light and dark both follow your mode. Switch back any time here or from the theme menu.

Official Emerald UI Kit for Figma

The Figma library for this package: tokens, icons, components, and dashboard layouts. The Vue package is MIT.

Dashboard

A demo of these components, including the calendar and the kanban board.

Reference: Figma kit. The Vue package is MIT. The Store sells the file separately.

Installation

bash

pnpm add @paper/emerald

bash

npm install @paper/emerald

bash

yarn add @paper/emerald

bash

bun add @paper/emerald

The plugin registers the theme adapter, the two themes, and the icon set:

main.ts

import { createApp } from 'vue'
import { createEmeraldPlugin } from '@paper/emerald'

import '@paper/emerald/theme.css'
import '@paper/emerald/style.css'

import App from './App.vue'

createApp(App)
  .use(createEmeraldPlugin())
  .mount('#app')

Use createEmeraldPlugin(). It constructs EmeraldStyleSheetAdapter for you.

The tokens page covers options that skip the theme or the icon registry, importing the stylesheets without the plugin, and the --v0-* color bridge.

Components

@paper/emerald exports every component below, and each one has its own page.

Component	What it wraps	Page
`EmAlert`	v0 `Atom`	Alert
`EmAvatar`	v0 `Avatar`	Avatar
`EmBadge`	v0 `Atom`	Badge
`EmBreadcrumbs`	v0 `Breadcrumbs`	Breadcrumbs
`EmButton`	v0 `Button`	Button
`EmCalendar`	a private calendar core inside Emerald, ahead of a v0 graduation	Calendar
`EmCard`	v0 `Atom`	Card
`EmCheckbox`	v0 `Checkbox`	Checkbox
`EmDialog`	v0 `Dialog`	Dialog
`EmDivider`	v0 `Atom`	Divider
`EmExpansionPanel`	v0 `ExpansionPanel`	ExpansionPanel
`EmIcon`	v0 `createTokens`	Icon
`EmKanban`	v0 `createKanban` + `useDragDrop`	Kanban
`EmList`	v0 `Single`	List
`EmPagination`	v0 `Pagination`	Pagination
`EmPopover`	v0 `Popover`	Popover
`EmProgress`	v0 `Progress`	Progress
`EmRadio`	v0 `Radio`	Radio
`EmSelect`	v0 `Select`	Select
`EmSlider`	v0 `Slider`	Slider
`EmSnackbar`	v0 `Snackbar`	Snackbar
`EmSpinner`	v0 `Atom`	Spinner
`EmStep`	v0 `Step`	Step
`EmSwitch`	v0 `Switch`	Switch
`EmTabs`	v0 `Tabs`	Tabs
`EmTag`	v0 `Atom`	Tag
`EmTextField`	v0 `Input`	TextField
`EmTextarea`	v0 `Input`	Textarea
`EmTooltip`	v0 `Tooltip`	Tooltip

These components have no named slots. Each region is its own component. Pass namespace only when you nest two of the same compound.

Emerald is in preview. Component APIs can change between minor versions. These pages write their prop tables by hand until the generated API reference covers @paper/*.