Formats

Utilities to format bytes, numbers, and relative time into human-readable strings.

Usage

The @fidely-ui/react package provides simple formatters to make displaying data more readable — such as converting file sizes, numeric values, and timestamps.

import { FormatBytes, FormatNumber, FormatRelativeTime } from '@fidely-ui/react'

Examples

Bytes

Use the FormatBytes component to convert raw byte values into human-readable formats.

50 byte

500 byte

50 kB

50 MB

1.45 kb

import { FormatByte, Stack, Text } from '@fidely-ui/react'

export const FormatBytes = () => {
  return (
    <Stack gap={2}>
      <Text>
        <FormatByte value={50} />
      </Text>

      <Text>
        <FormatByte value={500} />
      </Text>

      <Text>
        <FormatByte value={50000} />
      </Text>
      <Text>
        <FormatByte value={50000000} />
      </Text>

      <Text>
        <FormatByte value={1450.45} unit="bit" />
      </Text>
    </Stack>
  )
}

Numbers

Use the FormatNumber component to format numeric values based on locale and precision.

1,450.45

import { FormatNumber as FidelyFormatNumber } from '@fidely-ui/react'

export const FormatNumber = () => {
  return <FidelyFormatNumber value={1450.45} />
}

Relative Time

Use the FormatRelativeTime component to display dates as relative time (e.g., “3 minutes ago”, “yesterday”).

Edited 4 weeks ago

1 minute ago

1 hour ago

1 day ago

1 week ago

1 month ago

1 year ago

import {
  FormatRelativeTime as FidelyFormatRelativeTime,
  Stack,
  Text,
} from '@fidely-ui/react'

export const FormatRelativeTime = () => {
  const now = new Date()

  return (
    <Stack gap={2}>
      <Text>
        Edited{' '}
        <FidelyFormatRelativeTime value={new Date('2025-10-24T10:00:00Z')} />
      </Text>
      <Text>
        <FidelyFormatRelativeTime value={new Date(now.getTime() - 1000 * 60)} />{' '}
        {/* 1 min ago */}
      </Text>

      <Text>
        <FidelyFormatRelativeTime
          value={new Date(now.getTime() - 1000 * 60 * 60)}
        />{' '}
        {/* 1 hr ago */}
      </Text>

      <Text>
        <FidelyFormatRelativeTime
          value={new Date(now.getTime() - 1000 * 60 * 60 * 24)}
        />{' '}
        {/* 1 day ago */}
      </Text>

      <Text>
        <FidelyFormatRelativeTime
          value={new Date(now.getTime() - 1000 * 60 * 60 * 24 * 7)}
        />{' '}
        {/* 1 week ago */}
      </Text>

      <Text>
        <FidelyFormatRelativeTime
          value={new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30)}
        />{' '}
        {/* 1 month ago */}
      </Text>

      <Text>
        <FidelyFormatRelativeTime
          value={new Date(now.getTime() - 1000 * 60 * 60 * 24 * 365)}
        />{' '}
        {/* 1 year ago */}
      </Text>
    </Stack>
  )
}

Props

FormatBytes

Prop	Type	Default	Description
`value`	`number`	—	The raw byte value to format.
`unit`	`"bit" \| "bytes"	`"bytes"`	The base unit to start formatting from.

FormatNumber

Prop	Type	Default	Description
`value`	`number`	—	The numeric value to format.
`style`	`string`	-	The style of the format.
`unit`	`kilometer` \| `etc...`	-	The unit value to display.
`notation`	`"standard" \| "compact" \| "scientific"`	`"standard"`	Controls how numbers are displayed (e.g., `1K`, `1.2e+3`).
`minimumFractionDigits`	`number`	`0`	Minimum number of decimal places to show.
`maximumFractionDigits`	`number`	`2`	Maximum number of decimal places to show.

FormatRelativeTime

Prop	Type	Default	Description
`value`	`Date \| string \| number`	—	The date or timestamp to format relative to now.
`numeric`	`"always" \| "auto"`	`"auto"`	Whether to always show numeric values (`3 days ago`) or relative terms (`yesterday`).