## 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

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize