Wire Elements Pro

Beautiful handcrafted components Livewire components that will take your productivity to the next level.

Re-use your Livewire component on any page

Modal Component

With the Modal component, you can turn any of your Livewire components into a modal and call the component into view throughout your entire application with just one line of code.

Tailwind CSS and Bootstrap.
Wire Elements Pro is compatible with both Tailwind CSS and Bootstrap. Choose your stack and build your application.
Customize behavior.
You can control behavior for every modal. Close on escape, trap input focus, removing state on close or closing the modal when clicking the backdrop.
Size.
Use over ten different sizes or use our full-screen option.
Wire Elements Modal

The ultimate component for your power users

Spotlight Component

Livewire component that brings context-aware Spotlight/Alfred-like functionality to your Laravel application. Integrates perfectly with the modal and slide-over component.

Try Spotlight now
⌘K
or
CTRL+K
Context aware.
Show results and actions based on the current application route or applied scopes. Use the tab key to apply new scopes or hit backspace to remove one.
Custom actions.
Redirect to a different page, open modals, dispatch events, you can control what happens when executing a result.
Modes.
Group results based on different modes. Try entering '#' to enable user search or '>' to activate command mode.
Wire Elements Spotlight

Add autocomplete and insert commands to your input fields

Insert Component

Improve the typing experience of your customers by adding an autocomplete to support things like mentions and hashtags, just like Twitter or add commands to, for example, insert images and links.

Mention anything.
Add the ability to mention anything inside text fields and text areas.
Beyond mentions.
Go even further and use the insert component to trigger advanced commands that integrate perfectly with the overlay components.
Wire Elements Insert

Slide to the left, slide to the right, Cha Cha

Slide-over Component

Take a different approach and forget the modal; use the slide-over component to add a subtle overlay to your application.

Tailwind CSS and Bootstrap.
Wire Elements Pro is compatible with both Tailwind CSS and Bootstrap. Choose your stack and build your application.
Customize behavior.
You can control behavior for every modal. Close on escape, trap input focus, removing state on close or closing the modal when clicking the backdrop.
Wire Elements Insert

“Wire Elements Pro gives us access to high-quality UI components that we can depend on, freeing us up to focus on what matters - building the business logic and customer journey. I'd recommend adding this kit to your toolbox!”

Anthony Escott-Lawrence
Co-Founder / Engineer, Volanti

Demo Time

In the example below you will be able to test the modal, slide-over and the insert component.

Manage Users

This is an interactive demo to show you how you could use the components in a real world example.

Name Title Email Role Edit
Ethelyn Price Laravel Developer [email protected] Member
Bradly Greenfelder Livewire Developer [email protected] Member
Cheyanne Schneider TALL Developer [email protected] Member
Nolan Carter Tailwind CSS Developer [email protected] Member
Try the new Spotlight component
⌘K
or
CTRL+K

“Wire Elements Pro components are pure gold. They are easy to use out of the box, but can also be customised extremely well. At this point I use them in all of my projects.”

Robert Cordes
Developer, Diverently

Ready to dive in? Buy Wire Elements Pro today.

Frequently asked questions

Yes! You can use Wire Elements Pro for basically anything — the only thing we disallow is using it to create derivative competing products.

Definitely! You may use Wire Elements Pro for your own projects with a few exceptions. You cannot use the Components to create end products that are designed to allow an end user to build their own end products using the Components or derivatives of the components. You are also not allowed to re-distribute the Components or derivatives of the components separately from an end product. Finally, you cannot use the components to produce anything that may be deemed by Wire Elements, in their sole and absolute discretion, to be competitive or in conflict with the business of Wire Elements.

No, other elements like you see in the demo are for demonstrative purpose. If you are looking for beautiful UI components, crafted with Tailwind CSS we recommend Tailwind UI.

No, you will still have access once your license expires but you will no longer have receive updates or have access to screencasts.

No, you are not allowed to use the components in any open source projects.

Wire Elements Pro should be considered as a self-serve product. If you believe you discovered a bug please let us know and we will investigate. If you are interested in a paid Livewire related consult you can book a meeting here.

The Wire Elements Pro components are designed to work in the latest, stable releases of all major browsers, including Chrome, Firefox, Safari, and Edge. Internet Explorer 11 is not supported.

Wire Elements Pro works with Tailwind CSS 3 and Bootstrap 5.1.

No it is not possible to buy a single component. You have to purchase the entire bundle.

If you're not happy with your purchase for any reason, email us at [email protected] with your transaction details within 30 days to get a full refund.

View the license here.

“With Wire Elements Pro, we can add more interactive elements to website for our clients much faster and easier. The client is always happy with the result but perhaps more importantly, the DX is also really very good.”

Stef van Esch
Developer, Marshmallow.dev

Ready to dive in? Buy Wire Elements Pro today.

To navigate
Press Enter to select