component

Code block

Zoo UI's code surface — near-black in both themes — for a command, a config or an inline value, with copy.

The code surface stays near-black in both themes, so a command looks like a command wherever it sits. inline is a chip in running text; line is one command after a $ prompt; block is multi-line, with an optional language label. Every variant but inline has a copy button.

Install with pnpm add @zooui/theme-forest

pnpm add @zooui/theme-forest

export default defineNuxtConfig({
  extends: ['@zooui/theme-forest'],
  css: ['~/assets/css/main.css'],
})

<script setup lang="ts">
const config = `export default defineNuxtConfig({
  extends: ['@zooui/theme-forest'],
  css: ['~/assets/css/main.css'],
})`
</script>

<template>
  <div class="flex flex-col gap-3 w-full">
    <p class="text-sm text-muted">Install with <ZCodeBlock variant="inline" code="pnpm add @zooui/theme-forest" /></p>
    <ZCodeBlock variant="line" code="pnpm add @zooui/theme-forest" />
    <ZCodeBlock variant="block" lang="ts" :code="config" />
  </div>
</template>

Marking a secret

token marks a substring as the secret: highlighted, and selectable in one click. The copy result is announced to screen readers, a refused copy says so, and @copy fires only when the text really reached the clipboard.

@acme:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

npmrc

Copied 0 times

<script setup lang="ts">
const npmrc = '@acme:registry=https://registry.npmjs.org/\n//registry.npmjs.org/:_authToken=${NPM_TOKEN}'
const copies = ref(0)
</script>

<template>
  <div class="flex flex-col gap-2 w-full">
    <ZCodeBlock variant="block" lang="npmrc" token="${NPM_TOKEN}" :code="npmrc" @copy="copies++" />
    <p class="text-xs text-muted">Copied {{ copies }} {{ copies === 1 ? 'time' : 'times' }}</p>
  </div>
</template>

API

Props

Prop	Type	Default	Description
coderequired	`string`	—	—
lang	`string`	—	—
prompt	`string`	`"$"`	—
token	`string`	—	substring highlighted as the secret
variant	`"line" \| "inline" \| "block"`	`"line"`	inline = a chip; line = one command with a $ prompt; block = multi-line config
wrap	`boolean`	`true`	the block queries its OWN width: under 360px it stops wrapping and scrolls, because a command shredded into 3-character stacks is unreadable at any viewport size

Emits

Event	Payload	Description
copy	`[code: string]`	—

Card

Nuxt UI's UCard with a colored left edge.

Date field

A calendar-day field with typed entry, shortcut keys and a calendar picker, holding a Temporal.PlainDate.