Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
File size120 kB
Installation
pnpm add @ark-ui/react.json
Usage
import { FormatByte, FormatNumber, FormatRelativeTime } from "@/components/ui/format";
<FormatByte value={120_000} /> <FormatNumber value={1234567} /> <FormatRelativeTime value={new Date("2025-05-05")} />
Examples
Format Byte
Format byte values as file sizes.
File size120 kB
Unit display
Use the unitDisplay prop to control how the unit is displayed.
Long: 1.5 megabytes
Short: 1.5 MB
Narrow: 1.5MB
Unit system
Use unitSystem to choose between decimal (1000 bytes) or binary (1024 bytes).
Decimal (1000): 1.02 kB
Binary (1024): 1 kB
Format Relative Time
Format dates as relative time.
Last updated11 months ago
Style
Use the style prop for long, short, or narrow format.
Long: 11 months ago
Short: 11 mo. ago
Narrow: 11mo ago
Format Number
Format numbers with locale-aware options.
Downloads1,234,567per month
Currency
Use style="currency" with the currency prop for currency formatting.
USD: $99.99
EUR: €99.99
BRL: R$99.99
Percentage
Use style="percent" to format numbers as percentages.
Default: 75%
With decimals: 75.67%
Compact notation
Use notation="compact" for compact display.
1.2M: 1.2M
120K: 120K
Downloads: 1.2M per month
API Reference
FormatByte
| Prop | Type | Default |
|---|---|---|
value | number | - |
unit | "byte" | "bit" | "byte" |
unitDisplay | "long" | "short" | "narrow" | - |
unitSystem | "decimal" | "binary" | - |
locale | string | - |
FormatRelativeTime
| Prop | Type | Default |
|---|---|---|
value | Date | number | - |
numeric | "always" | "auto" | - |
style | "long" | "short" | "narrow" | - |
locale | string | - |
FormatNumber
| Prop | Type | Default |
|---|---|---|
value | number | - |
locale | string | - |
style | "decimal" | "percent" | "currency" | "unit" | "decimal" |
currency | string | - |
unit | string | - |
notation | "standard" | "compact" | "scientific" | "engineering" | "standard" |
minimumFractionDigits | number | - |
maximumFractionDigits | number | - |
For a complete list of props, see the Ark UI documentation.