Installation

You can install Fancyapps UI with NPM and modern build tools, or get started quickly with just static hosting or a CDN. For most users, installing from NPM is the best choice. Whichever you choose, be consistent and import all files from the same version of the library.

NPM

You'll need to have Node.js installed so that you can use NPM. You'll also need to know how to access the command line on your machine.

@fancyapps/ui is the primary Fancyapps UI package on NPM and home to all components. Install it with your favourite package manager:

npm install @fancyapps/ui
// or
yarn add  @fancyapps/ui

After installation, you'll be able to import components in your application. Example:

import { Fancybox } from "@fancyapps/ui";
// or
import { Fancybox } from "@fancyapps/ui/src/Fancybox/Fancybox.js";

Remember to include the corresponding CSS file, example:

import "fancyapps/ui/dist/fancybox.css";

CDN

You can also use the standalone UMD build by downloading or using these as CDN in your page:

Usage example (demo):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css"
    />
  </head>
  <body>
    <!-- Content -->

    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
    <script>
      //  JavaScript will go here
    </script>
  </body>
</html>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.esm.js";
</script>

Local development

Grab all the source files and build+develop locally

git clone [email protected]:fancyapps/ui.git
cd ui
rm -rf .git && git init
npm install
npm run build:js && npm run build:css

To build CSS automatically everytime you change the SCSS files, use NPM watch:css task. You can run tests using the test task.

NPM​

CDN​

Local development​

NPM

CDN

Local development