Globals 
The Globals Component Contains:
- Layout - Grids, Sections, Spacings, Layout Utilities
- Typography - All Global Headings, Paragraphs Styles
- Rich Text - Styles for Typography, Video Embed, Tables, Images, Lists etc
- Flex - Wrapper element for flex alignment and positioning
Installation
yarn add @berlitz/globals
Props
Headings Props
| Argument | Type | Required | Default | Example |
|---|
| inverse | bool | ❌ | false | |
| disableMargin | bool | ❌ | false | |
| highlight | string | ❌ | null | |
| color | string | ❌ | null | 'brandPrimary' |
Paragraphs Props
| Argument | Type | Required | Default | Example |
|---|
| size | string | ❌ | md | sm / md / lg |
| color | string | ❌ | null | 'brandPrimary' |
RichText Props
| Argument | Type | Required | Default | Example |
|---|
| inverse | bool | ❌ | false | |
Flex Props
| Argument | Type | Required | Default | Example |
|---|
| alignItems | string | ❌ | | flex-end / flex-start |
| basis | string | ❌ | | auto / 0 / 200px |
| direction | string | ❌ | | row / column |
| grow | string | ❌ | | 1 / 0.5 / unset / inherit |
| inline | bool | ❌ | | |
| justifyContent | string | ❌ | | flex-end / flex-start / space-around, space-between |
| width | string | ❌ | | 200px / 50% |
| wrap | string | ❌ | | wrap / no-wrap |
Usage
import { P, H1, H2, H3, H4, H5, RichText } from '@berlitz/globals/lib/components/typography'
import { Flex } from '@berlitz/globals/lib/components/Flex'
const MyApp = () => (
<>
<H1>Hello World</H1>
<div>
<H2 highlight="secondary">H2 Heading</H2>
</div>
<P>I am an Example Paragraph</P>
<RichText>
<h3>Just a HTML heading</h3>
<p>Just your average HTML Paragraph</p>
<iframe src="//youtube.com/embed/9cWxP_HMkCA" />
</RichText>
<Flex direction="row" justifyContent="space-around">
<div>Boxes</div>
<div>distributed</div>
<div>in a row</div>
</Flex>
</>
)
When to use this component
- Headings
- Paragraphs
- RichText
- Grids
- Containers
关于 @berlitz/globals 的常见问题
@berlitz/globals 是什么？
Globals component for the Max Design System
如何安装 @berlitz/globals？
在项目目录运行 npm install @berlitz/globals，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（16.13.1）、polished（^3.4.1）、styled-components（5.2.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
@berlitz/globals 支持 TypeScript 吗？
该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/berlitz__globals 是否存在。
@berlitz/globals 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require()；在 ES Module 项目中也可以用 import 引入（Node.js 会把 module.exports 作为默认导出）。
@berlitz/globals 可以商用吗？
@berlitz/globals 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
@berlitz/globals 的下载量有多少？
根据 npm 官方下载统计，@berlitz/globals 在 2026/10/08 – 2026/11/06 这 30 天内被下载 7,121 次，日均约 237 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
@berlitz/globals 还在维护吗？
最新版本 4.9.4 发布于 2026/05/26（5 个月前）；至今共发布 239 个版本，其中过去 12 个月发布了 2 个；首次发布于 2018/09/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。