Skip to main content


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.


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";

You can make Fancybox global - window.Fancybox = Fancybox; - and it will be available anywhere on the page, it will also be easier to debug.

Remember to include the corresponding CSS file, example:

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


You can also use standalone UMD build by downloading the files or using directly from the CDN on your page:

For the Panzoom component:

Usage example (demo):

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

href="[email protected]/dist/fancybox.css"
<!-- Content -->

<script src="[email protected]/dist/fancybox.umd.js"></script>
// JavaScript will go here

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

<script type="module">
import { Fancybox } from "[email protected]/dist/fancybox.esm.js";

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.