@real-system/typography v0.0.66

Installation

# install peer dependencies

# npm
$ npm install @real-system/styled-library @real-system/elements-primitive @real-system/utils-library react react-dom
# yarn
$ yarn add @real-system/styled-library @real-system/elements-primitive @real-system/utils-library react react-dom

# install typography

# npm
$ npm install @real-system/typography
# yarn
$ yarn add @real-system/typography

Code Example

import { RealSystemProvider } from '@real-system/styled-library';
import { Text } from '@real-system/typography';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Text>Body text</Text>
      <Text.Base>Base (low-level) text</Text.Base>
      <Text.Code>Code text</Text.Code>
      <Text.Heading as="h2" size="h1">
        Heading text
      </Text.Heading>
      <Text.Help>Help text</Text.Help>
      <Text.Help variant="danger">Danger text</Text.Help>
      <Text.Help variant="warning">Warning text</Text.Help>
      <Text.Label>Label text</Text.Label>
      <Text width="50px">
        <Text.Truncate as="h1">
          Truncate long text to fit container
        </Text.Truncate>
      </Text>
    </RealSystemProvider>
  );
};