@nulib/clover

A viewer as distinctive as your collections. Design a user experience rooted in IIIF.

Clover builds accessible viewers for IIIF Manifests and Collections, in React or as web components: a ready-made Viewer, and the parts it is made of, to compose your own. It is a project of Northwestern University Libraries.

Documentation · Repository · Issues

Install

npm install @nulib/clover

React 18 and 19 are supported. The package is ES modules only.

In React

The Viewer, with its Default template:

import Viewer from "@nulib/clover";
import "@nulib/clover/styles.css";

export default function Item() {
  return (
    <Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif" />
  );
}

Another template, with its styles:

import Viewer from "@nulib/clover";
import { Document } from "@nulib/clover/templates";
import "@nulib/clover/styles.css";
import "@nulib/clover/templates.css";

<Viewer iiifContent={url} template={Document} />;

Or a layout of your own, from the parts the templates are made of:

import * as Clover from "@nulib/clover";
import "@nulib/clover/styles.css";

<Clover.Root iiifContent={url}>
  <Clover.Label />
  <Clover.Body />
  <Clover.Items />
</Clover.Root>;

As web components

For a page without React. The elements bring their own styles, so there is no stylesheet to add. With a bundler, import them once:

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

Or load them from a CDN, in the page's <head>:

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

Then place the Viewer, or the parts:

<clover-viewer
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/works/3510cac2-1439-49f0-b30a-09ae19a0643d?as=iiif"
></clover-viewer>

<clover-root iiif-content="https://example.org/manifest.json">
  <clover-label></clover-label>
  <clover-body></clover-body>
  <clover-items></clover-items>
</clover-root>

If you serve Clover's files yourself, copy the whole dist/web-components folder.

Entry points

| Import | What it is | | ------------------------------------- | ------------------------------------------------------------------------------------- | | @nulib/clover | The Viewer (the default export), and every part, hook and helper (named). | | @nulib/clover/templates | The templates: Default, Document and Gallery. | | @nulib/clover/map | Map and its helpers, as @nulib/clover exports them (Clover.Map). | | @nulib/clover/three | registerThreeEngine, to draw a Scene with three.js, which you install. | | @nulib/clover/web-components | <clover-viewer>, and every part as an element. | | @nulib/clover/web-components/viewer | <clover-viewer> alone, for a page that shows a Viewer and nothing else of Clover's. | | @nulib/clover/web-components/three | three.js for the elements' Scene, bundled. | | @nulib/clover/styles.css | Every part's styles, and the Default template's. | | @nulib/clover/templates.css | The other templates' styles. | | @nulib/clover/base.css | For a look of your own, in place of both: the structure of every part and template. | | @nulib/clover/spacing.css | Clover's margins, paddings and gaps, after base.css. |

Learn more

• Get started: a quick start, either way.
• Viewer: its templates, and every prop.
• Composing layouts: layouts of your own, from the parts and hooks.
• Styling: colors, sizes and classes.
• Glossary: every component and helper, and the package's structure.

Clover 3.x, @samvera/clover-iiif, is deprecated and no longer maintained. Its docs are kept on the same site, under Clover 3.x.

License

MIT, © 2026 Northwestern University Libraries. See LICENSE.