shadcn.io is not affiliated with official shadcn/ui

Components

Free

Format for Vue

Format numbers, bytes, and time with Intl API.

PreviewCode

Installation

Sign in to get your install command

Free with an account. It carries your token, so the CLI installs everything in one go.

Use email insteadNo credit card

Usage

<script setup lang="ts">
import { FormatByte } from "@/components/ui/format";
</script>

<div className="flex flex-col gap-1">
  <span className="text-muted-foreground text-sm">File size</span>
  <span className="font-semibold text-2xl text-foreground tabular-nums tracking-tight">
    <FormatByte value={120_000} />
  </span>
</div>

Demos

Byte

PreviewCode

Byte Unit Display

PreviewCode

Byte Unit System

PreviewCode

Number

PreviewCode

Number Compact

PreviewCode

Number Currency

PreviewCode

Number Percent

PreviewCode

Relative Time

PreviewCode

Relative Time Short

PreviewCode

API Reference

FormatByte

data-slot="format-byte"

PropType

valuenumber

The byte size to format.

unit?"bit" | "byte"

The unit granularity to display.

Type: "bit" | "byte"

unitDisplay?"long" | "short" | "narrow"

The unit display.

Type: "long" | "short" | "narrow"

unitSystem?"decimal" | "binary"

The unit system to use for formatting.

Type: "decimal" | "binary"

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

FormatNumber

data-slot="format-number"

PropType

valuenumber

The number to format.

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

FormatRelativeTime

data-slot="format-relative-time"

PropType

valueDate

The date to format.

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.