--- title: "Get started" description: "A quick start with Clover, in React or with web components: the Viewer or the parts it is built from, and installing it." url: https://clover.iiif.library.northwestern.edu/docs version: "4" --- # 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. \[x]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. **React** ### Install the package ```bash 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. \[x]Start with the Viewer One component for any IIIF resource, with its panel, keyboard and languages built in. See [Viewer](https://clover.iiif.library.northwestern.edu/docs/viewer) for its templates and props. \[ ]Compose with its parts Place them anywhere inside a `Root` (web components: ``), 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](https://clover.iiif.library.northwestern.edu/docs/composing) for layouts of your own and the hooks. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx import Viewer from "@nulib/clover"; import { Default } from "@nulib/clover/templates"; import "@nulib/clover/styles.css"; ; ``` **Web components** ```html ``` **Web components** ### Install the package ```bash 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. ```js import "@nulib/clover/web-components"; ``` ### Add it to a page How would you like to start? Pick one to see it here. \[x]Start with the Viewer One component for any IIIF resource, with its panel, keyboard and languages built in. See [Viewer](https://clover.iiif.library.northwestern.edu/docs/viewer) for its templates and props. \[ ]Compose with its parts Place them anywhere inside a `Root` (web components: ``), 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](https://clover.iiif.library.northwestern.edu/docs/composing) for layouts of your own and the hooks. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx import Viewer from "@nulib/clover"; import { Default } from "@nulib/clover/templates"; import "@nulib/clover/styles.css"; ; ``` **Web components** ```html ``` **Web components** ### Load the script In the page’s ``. The elements bring their own styles, so there is no stylesheet to add. ```html ``` ### Add it to a page How would you like to start? Pick one to see it here. \[x]Start with the Viewer One component for any IIIF resource, with its panel, keyboard and languages built in. See [Viewer](https://clover.iiif.library.northwestern.edu/docs/viewer) for its templates and props. \[ ]Compose with its parts Place them anywhere inside a `Root` (web components: ``), 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](https://clover.iiif.library.northwestern.edu/docs/composing) for layouts of your own and the hooks. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx import Viewer from "@nulib/clover"; import { Default } from "@nulib/clover/templates"; import "@nulib/clover/styles.css"; ; ``` **Web components** ```html ``` ## Next - [Viewer Its templates, and every prop.](https://clover.iiif.library.northwestern.edu/docs/viewer) - [Composing Layouts of your own, from the parts and hooks.](https://clover.iiif.library.northwestern.edu/docs/composing) - [Styling Colors, sizes and classes.](https://clover.iiif.library.northwestern.edu/docs/styling) - [Root components A page for each part, from Body to the Primitives.](https://clover.iiif.library.northwestern.edu/docs/body) - [Technical overview Entry points, events, types and what each loads, and coming from Clover 3.x.](https://clover.iiif.library.northwestern.edu/docs/technical)