Kappa / Format

Artifact bundle2.5 GBbuild/output.tar

Jobs completed128Kworker/queue

Last indexedlast monthsearch/index

Next deploy window14:05:22release/eu-central

<script setup>
import { Format } from "@dicehub/kappa/components/format";

const indexedAt = new Date("2026-08-28T09:15:00.000Z");
</script>

<template>
  <Format locale="en-US">
    <div class="format-grid">
      <div class="format-card">
        <span>Artifact bundle</span>
        <Format.Byte :value="2684354560" unit-system="binary" />
        <code>build/output.tar</code>
      </div>
      <div class="format-card">
        <span>Jobs completed</span>
        <Format.Number :value="128400" notation="compact" />
        <code>worker/queue</code>
      </div>
      <div class="format-card">
        <span>Last indexed</span>
        <Format.RelativeTime :value="indexedAt" numeric="auto" />
        <code>search/index</code>
      </div>
      <div class="format-card">
        <span>Next deploy window</span>
        <Format.Time value="14:05:22" format="24h" :with-seconds="true" />
        <code>release/eu-central</code>
      </div>
    </div>
  </Format>
</template>

Installation

Format is part of the main Kappa package. It wraps the current Ark UI format helpers and locale provider, so it adds no dependency beyond Vue and Ark UI.

Barrel

import { Format } from "@dicehub/kappa";

Granular

import { Format } from "@dicehub/kappa/components/format";

Use Format as a transparent locale provider, then place one or more named parts inside it. Each part renders a styled inline span and forwards consumer attributes to that span. A part also works on its own with the defaulten-US locale.

Worker pool processed 128K jobs and produced 512 MB of artifacts.

<script setup>
import { Format } from "@dicehub/kappa/components/format";
</script>

<template>
  <Format>
    Worker pool processed
    <Format.Number :value="128400" notation="compact" />
    jobs and produced
    <Format.Byte :value="536870912" unit-system="binary" />
    of artifacts.
  </Format>
</template>

Composition

Typical part hierarchy

Format.Root (Ark UI LocaleProvider; no DOM element)
├── Format.Byte
├── Format.Number
├── Format.RelativeTime
└── Format.Time

Format.Root is an Ark UI LocaleProvider with no DOM element. The root and each part accept an explicit BCP 47 locale. A part-level locale overrides the nearest provider for that value only. See theArk UI Format documentationfor the formatter behavior and supported option semantics.

Examples

Locales and Overrides

Set one locale for a technical surface, then override a value when needed.

Regional dashboard1.234.567,891 GB

A child can override the provider when one value uses another locale: 1,234,567.89.

<script setup>
import { Format } from "@dicehub/kappa/components/format";
</script>

<template>
  <Format locale="de-DE">
    <div lang="de">
      <span>Regional dashboard</span>
      <strong><Format.Number :value="1234567.89" /></strong>
      <small><Format.Byte :value="1073741824" unit-system="binary" /></small>
    </div>
    <p>
      A child can override the provider:
      <Format.Number locale="en-US" :value="1234567.89" />.
    </p>
  </Format>
</template>

Relative Time

Use a reactive Date when the relative label must update as the underlying record changes.

Index snapshotlast month

<script setup>
import { Format } from "@dicehub/kappa/components/format";

const indexedAt = new Date("2026-08-28T09:15:00.000Z");
</script>

<template>
  <div>
    <span>Index snapshot</span>
    <Format.RelativeTime :value="indexedAt" numeric="auto" :style="'long'" />
  </div>
</template>

Time Display

Choose 12-hour or 24-hour display and opt into seconds for operational timestamps.

24-hour14:05:2212-hour · nl-NL8:45 a.m.

<script setup>
import { Format } from "@dicehub/kappa/components/format";
</script>

<template>
  <Format locale="en-US">
    <div class="time-formats">
      <span>
        <small>24-hour</small>
        <Format.Time value="14:05:22" format="24h" :with-seconds="true" />
      </span>
      <span>
        <small>12-hour · nl-NL</small>
        <Format.Time locale="nl-NL" value="08:45" format="12h" />
      </span>
    </div>
  </Format>
</template>

Accessibility

Format parts render text in a span; they do not add a role or announce updates.
Use a surrounding time element when the value needs a machine-readable datetime.
Provide a clear label when a number or relative time is not understandable from context.
Use a stable server/client value for relative time to avoid hydration changes near a unit boundary.
Keep units and labels visible when color or typography alone would carry meaning.

API Reference

Format

Provides locale context without adding a DOM element.

Prop	Type	Default	Description
`locale`	`string`	`"en-US"`	BCP 47 locale for the root subtree or a single value override.

Parts

Component	Props	Description
`Format.Byte`	`value*, unit, unitDisplay, unitSystem`	Formats a byte count with decimal or binary units.
`Format.Number`	`value*, notation, compactDisplay, signDisplay, unit, unitDisplay, currencyDisplay, currencySign`	Formats a number with the supported Intl.NumberFormat options.
`Format.RelativeTime`	`value*, localeMatcher, numeric, style`	Formats a Date relative to the current time.
`Format.Time`	`value*, format, withSeconds, amLabel, pmLabel`	Formats a time string or Date in 12-hour or 24-hour form.

Data Slots

Slot	Element	Description
`format-byte`	`span`	Formatted byte value.
`format-number`	`span`	Formatted number value.
`format-relative-time`	`span`	Formatted relative time value.
`format-time`	`span`	Formatted time value.

Exports

Export	Description
`Format`	Transparent locale provider with named format parts.
`Format.Byte / FormatByte`	Byte formatter and named component export.
`Format.Number / FormatNumber`	Number formatter and named component export.
`Format.RelativeTime / FormatRelativeTime`	Relative time formatter and named component export.
`Format.Time / FormatTime`	Time formatter and named component export.
`FormatProps / FormatRootProps`	Locale-provider prop contracts.
`FormatByteProps / FormatNumberProps / FormatRelativeTimeProps / FormatTimeProps`	Explicit root and part prop contracts with locale support.
`FORMAT_DEFAULT_LOCALE / resolveFormatLocale`	Safe locale defaults and resolver.