# @access-ci/ui

> User interface components for ACCESS CI

Latest version **0.22.0** (published 2026-08-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @access-ci/ui
pnpm add @access-ci/ui
yarn add @access-ci/ui
bun add @access-ci/ui
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.22.0 |
| Published | 2026-08-27 |
| First published | 2023-08-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Maintainers | rebeccaeve, yomatters |

## Links

- npm: https://www.npmjs.com/package/@access-ci/ui
- Repository: https://github.com/access-ci-org/access-ci-ui
- Homepage: https://github.com/access-ci-org/access-ci-ui#readme
- Issues: https://github.com/access-ci-org/access-ci-ui/issues
- npm.io page: https://npm.io/package/@access-ci/ui

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^18.0.0 || ^19.0.0
- [fuse.js](https://npm.io/package/fuse.js.md) ^7.0.0
- [chart.js](https://npm.io/package/chart.js.md) ^4.4.6
- [tippy.js](https://npm.io/package/tippy.js.md) ^6.3.7
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0 || ^19.0.0
- [react-router](https://npm.io/package/react-router.md) ^7.7.1
- [@glidejs/glide](https://npm.io/package/@glidejs/glide.md) ^3.6.1
- [react-chatbotify](https://npm.io/package/react-chatbotify.md) ^2.0.0
- [@snf/access-qa-bot](https://npm.io/package/@snf/access-qa-bot.md) ^3.9.0
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^6.0.0

## Recent versions

- 0.22.0 (latest) — 2026-08-27
- 0.19.0-beta6 (next) — 2026-03-10
- 0.21.0 — 2026-07-28
- 0.20.11 — 2026-07-28
- 0.20.10 — 2026-06-26
- 0.20.9 — 2026-06-01
- 0.20.8 — 2026-06-01
- 0.20.7 — 2026-06-01
- 0.20.6 — 2026-05-22
- 0.20.5 — 2026-05-19
- 0.20.4 — 2026-04-30
- 0.20.3 — 2026-04-27
- 0.20.2 — 2026-04-23
- 0.20.1 — 2026-04-22
- 0.20.0 — 2026-04-12
- … 50 more at https://npm.io/package/@access-ci/ui/versions

## README

# ACCESS CI User Interface Components

This library provides user interface components for [ACCESS CI](https://access-ci.org/)
websites. The components are rendered using the shadow DOM so that their styles are
isolated from the rest of the site.

## Prerequisites

Sites using ACCESS user interface components should include the Archivo font family:

```html
<link
  rel="stylesheet"
  id="google-font-archivo-css"
  href="https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,500;0,100,600;0,100,700;0,100,800;1,100,400&amp;display=swap"
  media="all"
/>
```

## Components

The library includes functions for rendering common ACCESS user interface components:

- `universalMenus`: Universal navigation menus
- `header`: Logo header
- `siteMenus`: Site-specific navigation menus
- `breadcrumbs`: Breadcrumb navigation
- `tableOfContents`: Page table of contents
- `footerMenus`: Site-specific navigation menus above the footer
- `footer`: Universal footer
- `resourceCatalog`: ACCESS resource catalog
- `qaBot`: Question/answer bot

## Example

```html
<div id="universal-menus"></div>
<div id="header"></div>
<div id="site-menus"></div>
<div id="breadcrumbs" data-page-title="Page Title"></div>
<div id="main" class="container">
  <div id="body">
    <h1>Page Title</h1>
    <h2>First Section</h2>
    <h2>Second Section</h2>
    <h2>Third Section</h2>
  </div>
  <div id="table-of-contents"></div>
</div>
<div id="footer-menus"></div>
<div id="footer"></div>
<div id="qa-bot"></div>
<script type="module">
  import {
    breadcrumbs,
    footer,
    footerMenus,
    header,
    qaBot,
    siteMenus,
    tableOfContents,
    universalMenuItems,
    universalMenus,
  } from "https://unpkg.com/@access-ci/ui@0.20.10/dist/access-ci-ui.js";

  const siteItems = [
    {
      name: "One",
      items: [
        {
          name: "Item A",
          href: "/one/a",
        },
        {
          name: "Item B",
          href: "/one/b",
        },
        {
          name: "Item C",
          href: "/one/c",
        },
      ],
    },
    {
      name: "Two",
      items: [
        {
          name: "Item A",
          href: "/two/a",
        },
        {
          name: "Item B",
          href: "/two/b",
        },
      ],
    },
    {
      name: "Three",
      href: "/three",
    },
  ];

  universalMenus({
    loginUrl: "/login",
    logoutUrl: "/logout",
    siteName: "Allocations",
    target: document.getElementById("universal-menus"),
  });

  header({
    siteName: "Allocations",
    target: document.getElementById("header"),
  });

  siteMenus({
    items: siteItems,
    siteName: "Allocations",
    target: document.getElementById("site-menus"),
  });

  // Breadcrumbs example — adapt items to your site's navigation structure
  const breadcrumbTarget = document.getElementById("breadcrumbs");
  const pageTitle = breadcrumbTarget.dataset.pageTitle;
  const breadcrumbItems = [
    { name: "Allocations", href: pageTitle ? "/" : null },
  ];
  if (pageTitle) breadcrumbItems.push({ name: pageTitle });
  breadcrumbs({
    items: breadcrumbItems,
    target: breadcrumbTarget,
  });

  tableOfContents({
    headings: document.querySelectorAll("#body h1, #body h2"),
    target: document.getElementById("table-of-contents"),
  });

  footerMenus({
    items: siteItems,
    siteName: "Allocations",
    target: document.getElementById("footer-menus"),
  });

  footer({ target: document.getElementById("footer") });

  // Detect login state via ACCESS SSO cookie
  const isLoggedIn = document.cookie.split("; ").includes("SESSaccesscisso=1")

  // User info is typically provided by your CMS, something like this:
  const { email, name, accessId } = window.cmsSettings?.currentUser || {};

  qaBot({
    target: document.getElementById("qa-bot"),
    apiKey: "my-api-key",
    isLoggedIn: isLoggedIn,
    userEmail: email,
    userName: name,
    accessId: accessId,
    loginUrl: "/login",
    // Optional: on a resource's documentation page, scope the bot to that
    // resource by passing its slug. The bot frames its answers around the
    // resource. Omit (as below) for the general ACCESS assistant.
    // resourceContext: "delta",
    onAnalyticsEvent: (event) => {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push(event);
    },
  });
</script>
```

---
_Source: https://npm.io/package/@access-ci/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._