Custom WordPress elements which can be used everywhere.

Kickstart yout development process with fully functional and ready-made elements. Available as native web components, shortcodes and page builder wrappers.


Veraciously versatile.

Since spx is built on the web component standard, its elements can be used anywhere custom HTML is allowed.

<spx-masonry columns="4" gap="8px"> <img src="img-1.jpg" alt="masonry image" /> <img src="img-2.jpg" alt="masonry image" /> <img src="img-3.jpg" alt="masonry image" /> <img src="img-4.jpg" alt="masonry image" /> <img src="img-5.jpg" alt="masonry image" /> <img src="img-6.jpg" alt="masonry image" /> <img src="img-7.jpg" alt="masonry image" /> <img src="img-8.jpg" alt="masonry image" /> <img src="img-9.jpg" alt="masonry image" /> <img src="img-10.jpg" alt="masonry image" /> </spx-masonry>
masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image
<spx-slider navigation slides-per-view="2.5" space-between="10" max-height="clamp(200px, 40vh, 500px)" bp-600="slides-per-view: 2.5" images="<?php spx\Get::gallery("myGallery", "acf") ;?>"> </spx-masonry>
masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image

A flexible toolbox
for every occasion.

New element features are being added regularly while current functionality is constantly reviewed and enhanced.


Content toggle to show and hide text or images on click.


Animate all inner elements using controls like x, y and opacity.

Class Toggle

Triggers one or multiple classes on the inner element.


Highlights a given piece of text like in a code editor.

Edit Button

Allows you to edit custom fields and options from the frontend.


A utility component to apply the same settings to multiple elements.


Renders an icon from the Ionicon library. Font Awesome support coming soon.


An enhanced Iframe element with enhanced capabilities.

Image Comparison

Compare two images using a slider. (before/after)


Opens a group of images in an overlay above the page.


Lay out images or elements in masonry style (Pinterest-like) grid.


Display a device mockup (iPhone, MacBook etc.) around an image.


Render an accessible navigation from a WordPress menu.


Notate parts of a text, similar to making scribbes in a notebook.


Responsively offsets itself to the height of another element in the document.


Add CSS classes to navigation items depending on scroll position.


Sharing buttons for the most popular social media networks.


Image slider to navigate through a gallery of images.


An infinite slideshow of thats animated from right to left.


A notification bar which removes itself from the DOM after 5 seconds.


Animates text like it is being written on a typewriter.


Easily understood.

A straightforward syntax makes composing elements with spx a breeze for simple and advanced use cases.

<spx-accordion header-text="Click to show more" content-text="I am hidden text"> </spx-accordion>
<spx-accordion> <h1 slot="header">Header slot ✌️</h1> <img slot="content" src="" alt="image" /> </spx-accordion>

Header slot ✌️

<spx-accordion link-type="close" link="acc" header-text="Accordion 1" content-text="I am hidden text"> </spx-accordion> <spx-accordion link-type="close" link="acc" header-text="Accordion 2" content-text="I am hidden text"> </spx-accordion> <spx-accordion link-type="close" link="acc" header-text="Accordion 3" content-text="I am hidden text"> </spx-accordion>

Truly future-proof.

By adopting an open web standard, spx is able to adjust its elements to the previous, current and future tools available in the WordPress world.

logo Web Components
logo Shortcodes
logo Oxygen
logo Gutenberg blocks
logo Elementor wrapper
logo Brizy wrapper

Extendable if needed.

Need to build your own customised solution? All component data is available as JSON files inside the plugin folder.

{ "name": "spx-accordion", "description": "The classic method to show and hide elements on your website.\nCan be used with custom markup for the header and/or content section.", "properties": [ { "id": "accordion-contentColor", "name": "contentColor", "attribute": "content-color", "type": "string", "description": "", "default": "'var(--spx-color-gray-900)'", "defaultValue": "'var(--spx-color-gray-900)'", "tags": [] }, { "id": "accordion-contentText", "name": "contentText", "attribute": "content-text", "type": "string", "description": "Content text.", "default": "'Default Content Text'", "defaultValue": "'Default Content Text'", "tags": [] }, { "id": "accordion-contentTextTag", "name": "contentTextTag", "attribute": "content-text-tag", "type": "string", "description": "Content text tag.", "default": "'span'", "defaultValue": "'span'", "tags": [] } ] } ...

Pagebuilder modules

Use it as a base to automatically generate native elements for your favourite page builder. The same approach is used internally to create all component shortcodes.

Custom field solutions

Systematically map spx component settings to custom fields using the JSON data.


Goodbye large bundles.

Instead of serving a single file, spx is dynamically loading the components which are currently active on the page.


99 €

Continue to checkout

Buy once,
use forever.