Components and elements demo

Badges one badge two badge red badge blue badge

Included in Vitepress by default.

Input:

Text <Badge>a badge with no type set</Badge>

Text <Badge type="warning">a warning badge</Badge>

Text <Badge type="tip">a tip badge</Badge>

Text <Badge type="info">an info badge</Badge>

Text <Badge type="danger">a danger badge</Badge>

Output:

Text a badge with no type set

Text a warning badge

Text a tip badge

Text an info badge

Text a danger badge

Buttons

Input:

<VPButton theme="brand" text="brand button" />
<VPButton theme="alt" text="alt button" />
<button>A regular button</button>
<button class="btn">A button by unocss</button>

Output:

Inputs

<TextInput placeholder="Placeholder text" label="Label"/>

Label

Speech

EasySpech

https://github.com/leaonline/easy-speech

useSpeechSynthesis from VueUse

https://vueuse.org/core/useSpeechSynthesis

Spoken Text
Language

Select Language

Pitch

Rate

Icons via UnoCSS

https://unocss.dev/presets/icons

The long way

Input

<div class="i-carbon-play-filled"></div>
<div class="i-carbon-logo-vue"></div>

Output

Attributify

https://unocss.dev/presets/attributify

Input

<div i-carbon-play-filled></div>
<div i-carbon-pause-outline-filled></div>
<div i-carbon-stop-filled></div>
<div i-carbon-stop-outline-filled></div>
<div i-carbon-logo-vue></div>
<span i-mdi-pause-circle>pause</span>
<span i-mdi-stop-circle>stop</span>

Output

pausestop

Tagify

https://unocss.dev/presets/tagify

Input

<i-mdi-play-circle /> <i-mdi-pause-circle /> <i-mdi-stop-circle />

Markdown <i-mdi-language-markdown />

Output

Markdown

Galaxy Pizza!!

Input

<GalaxyPizza />
<GalaxyPizza size="48" />
<GalaxyPizza size="128" />

Output