TypographyGenerated from the public API

Typography

Roles rather than sizes, and numerals that never lie about their alignment.

@luc/ui/typography

Examples

Default

One paragraph set in the four voices: heading, body, numeric and code.

Portfolio review

Three positions were rebalanced this morning.

+1,284.5

pnpm build⌘

<Stack gap="sm">
  <Heading size="title" as="h3">Portfolio review</Heading>
  <Text variant="body">Three positions were rebalanced this morning.</Text>
  <NumericText value={1284.5} kind="decimal" signed />
  <Inline gap="xs" align="center">
    <Code>pnpm build</Code>
    <Kbd>⌘</Kbd>
  </Inline>
</Stack>

Usage

import { Code } from "@luc/ui/typography";

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`Code`	1 documented props	`({ className, block, ...props }: CodeProps) => import("@types/react").JSX.Element`
`Heading`	3 documented props	`({ className, size, tone, as, ...props }: HeadingProps) => import("@types/react").JSX.Element`
`Kbd`	2 documented props	`({ className, variant, size, ...props }: KbdProps) => import("@types/react").JSX.Element`
`NumericText`	8 documented props	`({ className, value, kind, currency, suffix, signed, locale, minimumFractionDigits, maximumFractionDigits, ...props }: NumericTextProps) => import("@types/react").JSX.Element`
`Text`	4 documented props	`({ className, variant, tone, truncate, as, ...props }: TextProps) => import("@types/react").JSX.Element`