Plugin

List of third-party plugins that Phoenix uses

Simple approach(without npm)

<p>Place your new plugin in <code>public/vendors</code> folder. Eg: to add the <code>flatpickr</code> plugin, we will download it from <a href="https://flatpickr.js.org/" target="_blank">here,</a> unzip it and place the <code>flatpickr-master</code> folder in <code>public/vendors</code> folder. You can now simply link the plugin files to your HTML and use them.</p>

Place your new plugin in public/vendors folder. Eg: to add the flatpickr plugin, we will download it from here, unzip it and place the flatpickr-master folder in public/vendors folder. You can now simply link the plugin files to your HTML and use them.

Using npm

<p>Suppose we are installing the <code>flatpickr</code> plugin. Here are the steps:</p>
<p class="fw-bold mb-0">Step 1:</p>
<p>run npm command for install plugin. for <code>flatpickr </code>we can run </p><Pre> <code class="lang-js">npm i flatpickr</code></Pre>
<p class="fw-bold mb-0 mt-3">Step 2:</p>
<p>Go to <code>vendors.json </code>file and give the path directory from node_modules as follow</p><pre><code class="language-js">&quot;flatpickr&quot;: {
	&quot;src&quot;: [&quot;dist/flatpickr.min.js&quot;, &quot;dist/flatpickr.min.css&quot;],
	&quot;dest&quot;: &quot;flatpickr&quot;
}</code></pre>
<p>Here, <code>dest</code> refers to <code>public/vendors/</code>, where gulp will copy files from the <code>flatpickr</code> plugin. We actually use the <code>vendors</code> folder to store neccassary plugins. And all the plugins folder name will be as we give the dest value</p>
<p class="fw-bold mb-0 mt-3">Step 3:</p>
<p>Run the following command:</p><pre><code class="lang-js">gulp vendor:move</code></pre>

Suppose we are installing the flatpickr plugin. Here are the steps:

Step 1:

run npm command for install plugin. for flatpickr we can run

 npm i flatpickr

Step 2:

Go to vendors.json file and give the path directory from node_modules as follow

"flatpickr": {
	"src": ["dist/flatpickr.min.js", "dist/flatpickr.min.css"],
	"dest": "flatpickr"
}

Here, dest refers to public/vendors/, where gulp will copy files from the flatpickr plugin. We actually use the vendors folder to store neccassary plugins. And all the plugins folder name will be as we give the dest value

Step 3:

Run the following command:

gulp vendor:move

Built-in plugins

Anchor.js

A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies.

Full Documentation
CountUp

CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.

Full Documentation
Dayjs

Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API.

Full Documentation
Dropzone

Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.

Full Documentation
Echarts.js

A powerful, interactive charting and visualization library for browser.

Full Documentation
Flatpickr

Lightweight, powerful javascript datetimepicker with no dependencies.

Full Documentation
FontAwesome 5

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

Full Documentation
FullCalendar

FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.

Full Documentation
Glightbox

Glightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.

Full Documentation
Google Map

Phoenix uses Google map with Snazzy Maps, with different color schemes aimed towards web designers and developers.

Full Documentation
Is.js

Micro check plugin. Check types, regexps, presence, time and more...

Full Documentation
List.js

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Full Documentation
Lodash

A modern JavaScript utility library delivering modularity, performance, & extras.

Full Documentation
Rater

Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.

Full Documentation
Sortablejs

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Full Documentation
Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Full Documentation
Tinymce

The world's most popular JavaScript library for rich text editing.

Full Documentation
Typed Text

A JavaScript library that types out, deletes them, and then types again.

Full Documentation

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.19.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize