Complex Content Demo

🚀 Getting Started with PM7

Follow these steps to integrate PM7 components:

Install the package: npm install @pm7/core
Import the CSS: import '@pm7/core/dist/pm7.css'
Start using components with simple CSS classes

For detailed instructions, check out our getting started guide.

Implementation Example

Here's how to create a complete callout with all elements:

<div class="pm7-callout pm7-callout--info">
  <h4 class="pm7-callout-header">
    <svg class="pm7-callout-icon">...</svg>
    Header Text
  </h4>
  <div class="pm7-callout-body">
    <p>Your content here</p>
  </div>
</div>

✨ PM7 Callout Features

What makes PM7 callouts special:

✅ Framework agnostic - works with React, Vue, Angular, or vanilla JS
✅ Auto dark mode support - adapts to system preferences
✅ Semantic variants - info, success, warning, error, tip, neutral
✅ Flexible content - supports any HTML content
✅ Accessible by default - proper ARIA attributes and semantic HTML
✅ Zero JavaScript required - pure CSS implementation

Learn More View Examples

⚠️ Important Migration Notice

Breaking Changes in Version 3.0:

We've made several improvements that require minor updates to your code:

The .pm7-alert class has been renamed to .pm7-callout
Icon classes are now .pm7-callout-icon instead of .pm7-icon
The --compact modifier is now --sm for consistency

Migration steps:
Run the following find/replace commands in your codebase:

pm7-alert → pm7-callout
pm7-alert-body → pm7-callout-body
--compact → --sm