@pixelmakers/elements NPM

PXM Elements

Modern, accessible web components for everyone. From no-code builders to seasoned developers.

Philosophy

PXM Elements is built on three core principles:

🎯 Universal Compatibility - Works everywhere: Webflow, Shopify, Astro, vanilla HTML, or any framework
🪶 Lightweight & Simple - Each component does one thing exceptionally well
🎨 Unstyled by Design - You control the look, we handle the behavior and accessibility

Quick Start

For No-Code/Low-Code Users (CDN)

Drop this into your HTML and start using components immediately:

<!DOCTYPE html>
<html>
<head>
    <title>My Project</title>
</head>
<body>
    <!-- 1. Add component -->
    <pxm-accordion>
        <pxm-accordion-item>
            <pxm-accordion-trigger>Click me!</pxm-accordion-trigger>
            <pxm-accordion-content>This content toggles!</pxm-accordion-content>
        </pxm-accordion-item>
    </pxm-accordion>

    <!-- 2. Include script (loads automatically) -->
    <script src="https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/accordion.js"></script>
</body>
</html>

For Developers (NPM)

Install and import only what you need:

npm install @pixelmakers/elements

// Import individual components for optimal tree-shaking
import '@pixelmakers/elements/accordion';
import '@pixelmakers/elements/tabs';

// Or with TypeScript support
import { PxmAccordion } from '@pixelmakers/elements/accordion';

Why PXM Elements?

🚀 Zero Configuration

CDN: Works immediately, no build tools required
NPM: Tree-shakable imports, TypeScript support included

📱 Accessibility First

Full keyboard navigation
Screen reader support
ARIA attributes handled automatically
Follows WCAG guidelines

🎨 Your Design, Our Behavior

No imposed styling - use your CSS framework
Semantic HTML structure
CSS custom properties for easy theming
Works with Tailwind, Bootstrap, or custom CSS

🌍 Universal Platform Support

Webflow: Drop in custom code blocks
Shopify: Works in Liquid templates
Astro: Server-side rendering compatible
React/Vue: Framework adapters available
WordPress: Plugin-friendly

Components

Component	Size (UMD)	Size (ESM)	Description
Accordion	5.6KB	5.9KB	Collapsible content sections
Tabs	4.7KB	4.3KB	Tabbed interface navigation
Toggle	2.7KB	2.8KB	Boolean switch/checkbox
Number Input	4.1KB	3.7KB	Enhanced number input with controls
Video	11.5KB	16.3KB	Multi-platform video player
Phone Input	3.2KB*	1.4KB*	International phone number input
Lightbox	67.5KB*	91.8KB*	Image/media gallery with zoom

Sizes marked with use external dependencies (loaded separately for NPM)

Usage Patterns

CDN Usage (Recommended for Webflow, Shopify, etc.)

Each component is self-contained and can be loaded independently:

<!-- Load only the components you need -->
<script src="https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/accordion.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/tabs.js"></script>

<!-- Use immediately -->
<pxm-accordion allow-multiple="true">
    <pxm-accordion-item>
        <pxm-accordion-trigger>Section 1</pxm-accordion-trigger>
        <pxm-accordion-content>Content 1</pxm-accordion-content>
    </pxm-accordion-item>
</pxm-accordion>

NPM Usage (Recommended for Applications)

Tree-shakable imports ensure optimal bundle sizes:

// Individual imports (recommended)
import '@pixelmakers/elements/accordion';
import '@pixelmakers/elements/tabs';

// Dynamic imports for code splitting
const loadLightbox = async () => {
    await import('@pixelmakers/elements/lightbox');
    // Component is now available
};

// TypeScript usage
import type { PxmAccordion } from '@pixelmakers/elements/accordion';

const accordion = document.querySelector('pxm-accordion') as PxmAccordion;
accordion.setAttribute('allow-multiple', 'true');

Styling Guide

PXM Elements provides zero styling - you're in complete control. Here are common patterns:

CSS Custom Properties

/* Define your design tokens */
:root {
    --border-radius: 8px;
    --transition-speed: 200ms;
    --primary-color: #3b82f6;
}

/* Style components using data attributes and CSS selectors */
pxm-accordion-trigger {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius);
    background: white;
    transition: all var(--transition-speed);
}

pxm-accordion-trigger:hover {
    background: #f9fafb;
}

pxm-accordion-item[active="true"] pxm-accordion-trigger {
    background: var(--primary-color);
    color: white;
}

Tailwind CSS

<pxm-toggle class="relative inline-block w-12 h-6 bg-gray-300 rounded-full transition-colors duration-200 ease-in-out data-[state=checked]:bg-blue-500">
    <span class="block w-5 h-5 bg-white rounded-full shadow transform transition-transform duration-200 ease-in-out translate-x-0.5 data-[state=checked]:translate-x-6"></span>
</pxm-toggle>

CSS-in-JS / Styled Components

const StyledAccordion = styled(PxmAccordion)`
    border: 1px solid ${props => props.theme.colors.border};
    border-radius: ${props => props.theme.radii.md};
    
    pxm-accordion-trigger {
        padding: ${props => props.theme.space[4]};
        background: ${props => props.theme.colors.surface};
        
        &:hover {
            background: ${props => props.theme.colors.surfaceHover};
        }
    }
`;

Platform Integration

Webflow

Add a Custom Code block to your page
Include the component script
Add HTML structure in an Embed block

<!-- In Custom Code (Head) -->
<script src="https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/accordion.js"></script>

<!-- In Embed block -->
<pxm-accordion>
    <pxm-accordion-item>
        <pxm-accordion-trigger>FAQ Question</pxm-accordion-trigger>
        <pxm-accordion-content>Answer content here</pxm-accordion-content>
    </pxm-accordion-item>
</pxm-accordion>

Shopify Liquid

<!-- In theme.liquid -->
<script src="https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/tabs.js"></script>

<!-- In template -->
<pxm-tabs>
    <pxm-triggers>
        {% for variant in product.variants %}
            <button data-tab="variant-{{ variant.id }}">{{ variant.title }}</button>
        {% endfor %}
    </pxm-triggers>
    
    {% for variant in product.variants %}
        <pxm-panel data-tab="variant-{{ variant.id }}">
            {{ variant.price | money }}
        </pxm-panel>
    {% endfor %}
</pxm-tabs>

Astro

---
// Component works server-side
---

<script>
    import '@pixelmakers/elements/accordion';
</script>

<pxm-accordion>
    <pxm-accordion-item>
        <pxm-accordion-trigger>Server-rendered content</pxm-accordion-trigger>
        <pxm-accordion-content>
            This works with SSR!
        </pxm-accordion-content>
    </pxm-accordion-item>
</pxm-accordion>

Browser Support

Chrome 90+ ✅
Firefox 90+ ✅
Safari 14+ ✅
Edge 90+ ✅

All components use modern Web Components APIs with graceful degradation.

TypeScript Support

Full TypeScript support with exported types:

import type { 
    PxmAccordion, 
    AccordionConfig,
    PxmTabs,
    TabsConfig 
} from '@pixelmakers/elements';

// Type-safe component usage
const accordion = document.querySelector('pxm-accordion') as PxmAccordion;
const config: AccordionConfig = {
    allowMultiple: true,
    animationDuration: 300
};

Performance

Bundle Sizes

CDN: Self-contained, cacheable across sites
NPM: Tree-shakable, only bundle what you use
Dependencies: Heavy deps (Swiper, intl-tel-input) are external for NPM builds

Loading Strategy

<!-- Preload critical components -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/accordion.js" as="script">

<!-- Load non-critical components lazily -->
<script>
    // Load lightbox only when needed
    document.addEventListener('click', async (e) => {
        if (e.target.matches('[data-lightbox]')) {
            await import('https://cdn.jsdelivr.net/npm/@pixelmakers/elements/dist/umd/lightbox.js');
        }
    }, { once: true });
</script>

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run test

# Build library
npm run build

Examples

Live Examples: CodePen Collection
CDN Usage: examples/cdn-usage.html
NPM Usage: examples/npm-usage.ts
Webflow Project: Template Link

License

MIT © PixelMakers

Built with ❤️ for the web community

Report Issues • Discussions • Twitter

web-components custom-elements phone-input

intl-tel-input medium-zoom swiper

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago