shadcn.io is not affiliated with official shadcn/ui
Framework
UI library
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
Usage
import { FormatByte } from "@/components/ui/format";<div class="flex flex-col gap-1">
<span class="text-muted-foreground text-sm">File size</span>
<span class="font-semibold text-2xl text-foreground tabular-nums tracking-tight">
<FormatByte value={120_000} />
</span>
</div>Demos
Byte
Byte Unit Display
Byte Unit System
Number
Number Compact
Number Currency
Number Percent
Relative Time
Relative Time Short
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?(props: ParentProps) => JSX.Element
Render your own element: a function that gets the part's props to spread on it.
- Type
(props: ParentProps) => JSX.Element
FormatNumber
data-slot="format-number"
PropType
valuenumber
The number to format.
asChild?(props: ParentProps) => JSX.Element
Render your own element: a function that gets the part's props to spread on it.
- Type
(props: ParentProps) => JSX.Element
FormatRelativeTime
data-slot="format-relative-time"
PropType
valueDate
The date to format.
asChild?(props: ParentProps) => JSX.Element
Render your own element: a function that gets the part's props to spread on it.
- Type
(props: ParentProps) => JSX.Element