Atoms

Typography

Typography components for consistent text styling.

FormanceCustom component built for Formance products.

Docs

Heading 1

Heading 2

Heading 3

Heading 4

This is a lead paragraph.

This is a standard paragraph with inline code.

This is small text.

Installation#

npx shadcn@latest add @formance/typography

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  TypographyH1,
  TypographyH2,
  TypographyH3,
  TypographyH4,
  TypographyP,
  TypographyLead,
  TypographyLarge,
  TypographySmall,
  TypographyBlockquote,
  TypographyList,
  TypographyListItem,
  TypographyInlineCode,
} from '@/components/ui/typography'

h1#

Transaction Overview

h2#

Payment Processing

h3#

Wallet Configuration

h4#

Connector Settings

p#

Each ledger maintains an immutable log of all transactions posted against it. Accounts are created on the fly and balances are computed in real time from the transaction history.