Skip to Content

Get started

Clover builds interfaces for IIIF content, in React or as web components: accessible, composable and light.

Install

Choose your setup

The Viewer and its parts are React components, and custom elements for a page without React: a CMS template, a static site, an exhibit page. Choose yours, and every example in these docs is written that way.

React

You build your site with React. Add Clover to your app like any other package.

Web components (npm)

Your site has a build step, but no React. Install Clover once, then use it on any page.

Web components (CDN)

Plain HTML or an embed, no build step. Paste one line into a CMS or a blog post.

Install the package

npm install @nulib/clover

React 18 and 19 are supported.

Add it to a page

How would you like to start? Pick one to see it here.

Start with the Viewer

One component for any IIIF resource, with its panel, keyboard and languages built in. See Viewer for its templates and props.

Compose with its parts

Place them anywhere inside a Root<clover-root>, among your own markup; only the parts you use load. The example here is a minimal starter layout, to show how they fit together; see Composing for layouts of your own and the hooks.

import Viewer from "@nulib/clover";
import { Default } from "@nulib/clover/templates";
import "@nulib/clover/styles.css";
 
<Viewer
  iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
  template={}
/>;
<clover-viewer
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
  template=>
</clover-viewer>

Install the package

npm install @nulib/clover

Import the elements

Once, anywhere on the page. The elements bring their own styles, so there is no stylesheet to add.

import "@nulib/clover/web-components";

Add it to a page

How would you like to start? Pick one to see it here.

Start with the Viewer

One component for any IIIF resource, with its panel, keyboard and languages built in. See Viewer for its templates and props.

Compose with its parts

Place them anywhere inside a Root<clover-root>, among your own markup; only the parts you use load. The example here is a minimal starter layout, to show how they fit together; see Composing for layouts of your own and the hooks.

import Viewer from "@nulib/clover";
import { Default } from "@nulib/clover/templates";
import "@nulib/clover/styles.css";
 
<Viewer
  iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
  template={}
/>;
<clover-viewer
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
  template=>
</clover-viewer>

Load the script

In the page’s <head>. The elements bring their own styles, so there is no stylesheet to add.

<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>

Add it to a page

How would you like to start? Pick one to see it here.

Start with the Viewer

One component for any IIIF resource, with its panel, keyboard and languages built in. See Viewer for its templates and props.

Compose with its parts

Place them anywhere inside a Root<clover-root>, among your own markup; only the parts you use load. The example here is a minimal starter layout, to show how they fit together; see Composing for layouts of your own and the hooks.

import Viewer from "@nulib/clover";
import { Default } from "@nulib/clover/templates";
import "@nulib/clover/styles.css";
 
<Viewer
  iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
  template={}
/>;
<clover-viewer
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
  template=>
</clover-viewer>

Next