/>
MDX UI
$ init
Emphasis

Emphasis

Bold and italic text styling

Installation

npx @ravikumarsurya/mdx-ui add emphasis

Usage

Bold Text

Use double asterisks or double underscores for bold text:

**This text is bold**
**This is also bold**

Italic Text

Use single asterisks or single underscores for italic text:

_This text is italic_
_This is also italic_

Combined

You can combine bold and italic:

**_This is bold and italic_**
**This is bold with _italic_ inside**
_This is italic with **bold** inside_

Features

  • Semantic HTML (<strong> and <em>)
  • Proper font weight and style
  • Accessible styling
  • Works with light and dark themes

Examples

Use bold text for key terms and critical warnings. Use italic text for titles, foreign words, or gentle stress. Combine them for maximum emphasis when needed.

Basic Emphasis

Regular text, **bold text**, and _italic text_ all in one sentence.

Strong Emphasis

This is **very important** and requires **_immediate attention_**.

In Context

# Documentation
 
When writing docs, use **bold** for important terms and _italic_ for emphasis.
 
**Note:** Always test your _components_ before deploying.

Customization

The emphasis components map to standard HTML:

  • **text** → <strong>text</strong>
  • *text* → <em>text</em>

You can customize styling through your global CSS or Tailwind configuration.

Accessibility

  • Uses semantic HTML elements
  • Proper ARIA roles are inherited
  • Screen reader friendly
PreviousDiff Block
NextFile Tree