v3.14.0

Build interfaces for IIIF content from a suite of UI components.

Accessible, composable, open source — created at Northwestern University Libraries.

Component
Appearance
Color

Clover easily and automatically uses the fonts and colors of your web app.

Generated code

import Viewer from "@samvera/clover-iiif/viewer";

<Viewer
  iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif"
  options={{
    informationPanel: {
      open: true,
      renderCanvasSummary: false
    },
    showTitle: true,
    showIIIFBadge: true,
    showDownload: true,
    canvasHeight: "500px"
  }}
/>

Why Clover

Built for IIIF Presentation 3.0, from the primitives up.

Read the docs →

Accessible

WAI-ARIA design patterns

Keyboard navigation, focus, and motion preferences ship with every component.

Composable

Primitives, not just a viewer

Take the whole Viewer, or build your own from the primitives.

Themeable

Uses your design tokens

Every component reads CSS custom properties. Set one on any ancestor; it cascades.

Portable

React, or a script tag

ESM, CJS, and a UMD web component. Drop it into a framework or plain HTML.

Install

npm install @samvera/clover-iiifGet started