0
# Typography Components
1

2
Comprehensive set of styled HTML elements with consistent theming and typography for building documentation interfaces and content display.
3

4
## Capabilities
5

6
### HTML Elements
7

8
Pre-styled HTML elements that maintain consistent theming across Storybook interfaces.
9

10
```typescript { .api }
11
/**
12
 * Styled anchor/link element with Storybook theming
13
 */
14
const A: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
15

16
/**
17
 * Styled blockquote element
18
 */
19
const Blockquote: React.ComponentType<React.BlockquoteHTMLAttributes<HTMLElement>>;
20

21
/**
22
 * Styled inline code element
23
 */
24
const Code: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
25

26
/**
27
 * Styled div element
28
 */
29
const Div: React.ComponentType<React.HTMLAttributes<HTMLDivElement>>;
30

31
/**
32
 * Styled definition list element
33
 */
34
const DL: React.ComponentType<React.HTMLAttributes<HTMLDListElement>>;
35

36
/**
37
 * Styled heading elements (H1 through H6)
38
 */
39
const H1: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
40
const H2: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
41
const H3: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
42
const H4: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
43
const H5: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
44
const H6: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
45

46
/**
47
 * Styled horizontal rule element
48
 */
49
const HR: React.ComponentType<React.HTMLAttributes<HTMLHRElement>>;
50

51
/**
52
 * Styled image element
53
 */
54
const Img: React.ComponentType<React.ImgHTMLAttributes<HTMLImageElement>>;
55

56
/**
57
 * Styled list item element
58
 */
59
const LI: React.ComponentType<React.LiHTMLAttributes<HTMLLIElement>>;
60

61
/**
62
 * Styled ordered list element
63
 */
64
const OL: React.ComponentType<React.OlHTMLAttributes<HTMLOListElement>>;
65

66
/**
67
 * Styled paragraph element
68
 */
69
const P: React.ComponentType<React.HTMLAttributes<HTMLParagraphElement>>;
70

71
/**
72
 * Styled preformatted text element
73
 */
74
const Pre: React.ComponentType<React.HTMLAttributes<HTMLPreElement>>;
75

76
/**
77
 * Styled span element
78
 */
79
const Span: React.ComponentType<React.HTMLAttributes<HTMLSpanElement>>;
80

81
/**
82
 * Styled table element
83
 */
84
const Table: React.ComponentType<React.TableHTMLAttributes<HTMLTableElement>>;
85

86
/**
87
 * Styled teletype text element
88
 */
89
const TT: React.ComponentType<React.HTMLAttributes<HTMLTitleElement>>;
90

91
/**
92
 * Styled unordered list element
93
 */
94
const UL: React.ComponentType<React.HTMLAttributes<HTMLUListElement>>;
95
```
96

97
### Typography Components
98

99
Higher-level typography components for specific use cases.
100

101
```typescript { .api }
102
/**
103
 * Typography link component with enhanced styling
104
 */
105
const Link: React.ComponentType<{
106
  href?: string;
107
  children: React.ReactNode;
108
  target?: string;
109
  rel?: string;
110
}>;
111

112
/**
113
 * Document wrapper component for content formatting
114
 */
115
const DocumentWrapper: React.ComponentType<{
116
  children: React.ReactNode;
117
}>;
118
```
119

120
### Component Mappings
121

122
Component mapping objects for MDX rendering and reset functionality.
123

124
```typescript { .api }
125
/**
126
 * Typography component mapping object for MDX rendering
127
 * Maps HTML element names to styled React components
128
 */
129
const components: {
130
  h1: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
131
  h2: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
132
  h3: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
133
  h4: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
134
  h5: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
135
  h6: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
136
  p: React.ComponentType<React.HTMLAttributes<HTMLParagraphElement>>;
137
  a: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
138
  code: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
139
  pre: React.ComponentType<React.HTMLAttributes<HTMLPreElement>>;
140
  hr: React.ComponentType<React.HTMLAttributes<HTMLHRElement>>;
141
  dl: React.ComponentType<React.HTMLAttributes<HTMLDListElement>>;
142
  blockquote: React.ComponentType<React.BlockquoteHTMLAttributes<HTMLElement>>;
143
  table: React.ComponentType<React.TableHTMLAttributes<HTMLTableElement>>;
144
  img: React.ComponentType<React.ImgHTMLAttributes<HTMLImageElement>>;
145
  div: React.ComponentType<React.HTMLAttributes<HTMLDivElement>>;
146
  span: React.ComponentType<React.HTMLAttributes<HTMLSpanElement>>;
147
  li: React.ComponentType<React.LiHTMLAttributes<HTMLLIElement>>;
148
  ul: React.ComponentType<React.HTMLAttributes<HTMLUListElement>>;
149
  ol: React.ComponentType<React.OlHTMLAttributes<HTMLOListElement>>;
150
  tt: React.ComponentType<React.HTMLAttributes<HTMLTitleElement>>;
151
  resetwrapper: React.ComponentType<React.HTMLAttributes<HTMLDivElement>>;
152
};
153

154
/**
155
 * Reset wrapper components for clean styling
156
 * Provides unstyled versions of HTML elements
157
 */
158
const resetComponents: Record<string, React.ComponentType>;
159
```
160

161
### Utility Functions and Exports
162

163
Styling utilities and formatting components.
164

165
```typescript { .api }
166
/**
167
 * Higher-order component utility for applying reset styles
168
 */
169
function withReset<T = {}>(component: React.ComponentType<T>): React.ComponentType<T>;
170

171
/**
172
 * Common code styling utilities
173
 */
174
const codeCommon: {
175
  // Common styling properties for code elements
176
  [key: string]: any;
177
};
178
```
179

180
## Usage Examples
181

182
**Basic HTML Elements:**
183

184
```typescript
185
import { H1, H2, P, Code, A } from "@storybook/components";
186

187
<H1>Main Title</H1>
188
<H2>Subtitle</H2>
189
<P>This is a paragraph with proper Storybook styling.</P>
190
<Code>const code = "highlighted";</Code>
191
<A href="https://storybook.js.org">Storybook Link</A>
192
```
193

194
**Typography Components:**
195

196
```typescript
197
import { Link, DocumentWrapper } from "@storybook/components";
198

199
<DocumentWrapper>
200
  <Link href="/docs">Documentation Link</Link>
201
</DocumentWrapper>
202
```
203

204
**Component Mapping for MDX:**
205

206
```typescript
207
import { components } from "@storybook/components";
208

209
// Use with MDX or markdown renderers
210
const mdxComponents = {
211
  ...components,
212
  // Override specific components if needed
213
  h1: (props) => <components.h1 {...props} style={{ color: 'blue' }} />
214
};
215
```
216

217
**Reset Components:**
218

219
```typescript
220
import { resetComponents } from "@storybook/components";
221

222
// Use unstyled versions of HTML elements
223
<resetComponents.h1>Unstyled Heading</resetComponents.h1>
224
```
225

226
## Typography Utilities
227

228
Additional utilities are exported from DocumentFormatting and ResetWrapper modules:
229

230
```typescript
231
// All exports from DocumentFormatting
232
export * from './components/typography/DocumentFormatting';
233

234
// All exports from ResetWrapper  
235
export * from './components/typography/ResetWrapper';
236
```
237

238
These provide additional formatting utilities and wrapper components for consistent document styling across Storybook interfaces.