# Numeral (/components/typography/numeral)
`Numeral` formats a number with `Intl.NumberFormat`. It reads the active locale from React Aria's
`I18nProvider` and accepts the relevant typography props from `Text`.
apps/docs/src/examples/numeral/basic.tsx
```tsx
import { Numeral } from '@luke-ui/react/numeral';
export default () => {
return ;
};
```
## Format [#format]
`Numeral` uses decimal formatting by default. It infers currency or unit formatting when `currency`
or `unit` is present. Set `format` to `'percent'` or `'decimal'` for those formats. Set it to
`'currency'` or `'unit'` when you want that formatting explicit in the component call.
apps/docs/src/examples/numeral/formats.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Numeral } from '@luke-ui/react/numeral';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Conversion rate:
Ticket price:
Wind speed:
Page views:
);
};
```
## Compact notation [#compact-notation]
Set `abbreviate` for compact notation such as `12K`. Pass `"long"` for a long display such as
`12 thousand`.
apps/docs/src/examples/numeral/compact.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Numeral } from '@luke-ui/react/numeral';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Short:
Long:
);
};
```
## Precision [#precision]
Pass a number for fixed fraction digits or a `[min, max]` tuple for a range. Use `formatOptions` for
other `Intl.NumberFormat` options.
apps/docs/src/examples/numeral/precision.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Numeral } from '@luke-ui/react/numeral';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Fixed:
Range:
);
};
```
## Formatting rules [#formatting-rules]
`Numeral` throws when:
* you provide both `currency` and `unit`.
* you use `format="currency"` without a `currency` code.
* you use `format="unit"` without a `unit` value.
* `precision` is not a non-negative integer or a valid `[min, max]` tuple.
## Typography and alignment [#typography-and-alignment]
Numerals use tabular figures and end alignment by default, so values remain readable in a column.
Set `fontVariantNumeric`, `textAlign`, or inherited `Text` typography props when the context needs a
different treatment.
## Related components [#related-components]
Use [Text](/components/typography/text) for non-numeric content and
[Heading](/components/typography/heading) for section titles.
## API [#api]