Typography
Explore Streamdown's built-in Tailwind typography styles for beautiful Markdown rendering.
Streamdown comes with beautiful, built-in typography styles powered by Tailwind CSS. All standard Markdown elements are styled out of the box, ensuring your content looks polished without additional configuration.
Headings
Streamdown supports all six levels of Markdown headings with responsive sizing and proper spacing:
# Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6Headings automatically include:
- Responsive font sizes that scale appropriately
- Proper font weights (semibold by default)
- Optimal line heights for readability
- Consistent vertical spacing
Text Formatting
Bold and Italic
Use standard Markdown syntax for emphasis:
**Bold text** or __also bold__ *Italic text* or _also italic_ ***Bold and italic***Strikethrough
GitHub Flavored Markdown strikethrough is fully supported:
~~Crossed out text~~Inline Code
Inline code is styled with a subtle background and monospace font:
Use the `Streamdown` component in your app.Links
Links are styled with underlines and appropriate colors:
[Visit our website](https://streamdown.ai)Features include:
- Distinct styling for regular links
- Proper hover and focus states
- Accessible color contrast
- Smooth transitions
Lists
Unordered Lists
- First item - Second item - Nested item - Another nested item - Third itemOrdered Lists
1. First step 2. Second step 1. Sub-step A 2. Sub-step B 3. Third stepLists include:
- Proper indentation for nested levels
- Consistent spacing between items
- Clear visual hierarchy
- Appropriate markers (bullets/numbers)
Blockquotes
Blockquotes are styled with a left border and subtle background:
> "The development of full artificial intelligence could spell the end of the human race." > — Stephen HawkingFeatures:
- Left accent border
- Subtle background color
- Proper padding and margin
- Italic text styling
Code Blocks
Code blocks receive syntax highlighting via Shiki:
```javascript function greet(name) { return `Hello, ${name}!`; } ```See the Code Blocks documentation for detailed configuration options.
Images
Images are responsive and properly contained:
Features:
- Responsive sizing
- Proper aspect ratio preservation
- Loading states
- Alt text for accessibility
Tables
Tables are fully styled with borders and hover states:
| Feature | Supported | |---------|-----------| | Markdown | ✓ | | Streaming | ✓ | | Math | ✓ |See the GitHub Flavored Markdown documentation for more table features.
Horizontal Rules
Create visual separators:
---Paragraphs
Paragraphs receive proper spacing and line height for optimal readability:
This is a paragraph with normal text flow. It automatically wraps and includes proper spacing between adjacent paragraphs. This is a second paragraph with appropriate margin top spacing.