Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- 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
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
File size120 kB
Installation#
pnpm dlx shadcn@latest add @shark/format
Usage#
import { FormatByte, FormatNumber, FormatRelativeTime } from "@/registry/react/components/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 updated1 year ago
Style#
Use the style prop for long, short, or narrow format.
Long: 1 year ago
Short: 1 yr. ago
Narrow: 1y 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.