Getting Started

Get up and running with pm7-ui in minutes.

Installation

pm7-ui is available as separate packages for different frameworks. Choose the one that fits your project:

For Vanilla HTML/CSS/JS Projects

npm install @pm7/core

Or include via CDN:

<link rel="stylesheet" href="https://unpkg.com/@pm7/core@1.0.0/dist/pm7.css">

For React Projects

npm install @pm7/react

For Vue Projects (Coming Soon)

npm install @pm7/vue

Basic Usage

Vanilla HTML/CSS

1. Include the CSS file in your HTML:

<!-- In your HTML head -->
<link rel="stylesheet" href="node_modules/@pm7/core/dist/pm7.css">

2. Use PM7 components with class names:

<button class="pm7-button pm7-button--primary">
  Click me
</button>

<div class="pm7-card">
  <h3 class="pm7-card-title">Card Title</h3>
  <p class="pm7-card-content">Card content goes here.</p>
</div>

3. For interactive components, include the JavaScript:

<script type="module">
  import { PM7Menu } from '@pm7/core';
  
  // Initialize menu component
  const menuElement = document.querySelector('[data-pm7-menu]');
  new PM7Menu(menuElement);
</script>

React

1. Import components in your React app:

import { Button, Card, Menu } from '@pm7/react';

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Clicked!')}>
        Click me
      </Button>
      
      <Card>
        <Card.Title>Card Title</Card.Title>
        <Card.Content>Card content goes here.</Card.Content>
      </Card>
      
      <Menu
        items={[
          { label: 'Option 1', onClick: () => console.log('Option 1') },
          { label: 'Option 2', onClick: () => console.log('Option 2') },
        ]}
      />
    </div>
  );
}

Customization

pm7-ui uses CSS custom properties (variables) for theming. You can customize colors, spacing, and more:

Override CSS Variables

:root {
  /* Custom primary color */
  --pm7-primary: #your-color;
  --pm7-primary-hover: #your-hover-color;
  
  /* Custom spacing */
  --pm7-spacing-unit: 0.25rem;
  
  /* Custom fonts */
  --pm7-font-sans: 'Your Font', sans-serif;
}

Dark Mode

pm7-ui supports dark mode automatically using prefers-color-scheme. You can also toggle it manually:

<!-- Add 'dark' class to html or body -->
<html class="dark">
  ...
</html>

Browser Support

pm7-ui supports all modern browsers:

Next Steps

Now that you've installed pm7-ui, check out: