Widgets

Drop-in UI components for any Cobuntu community. Six widgets ship today:

Widget	Purpose	Mount selector
Cart	Persistent shopping cart + checkout button	`data-cobuntu-cart`
Auth	Sign-in / profile / member drawer	`data-cobuntu-auth`
Messages	Chat icon with unread badge	`data-cobuntu-messages`
Notifications	Bell icon with unread badge	`data-cobuntu-notifications`
Search	Search input + spotlight modal (Cmd/Ctrl+K)	`data-cobuntu-search`
Nav	Auto-gated nav items (members-only routes)	`data-cobuntu-nav`

Two distribution paths, one source

The widget source lives in one place. We ship it two ways:

Vanilla `<script>` (any HTML)

For landings in Squarespace, Webflow, Lovable, Framer, plain HTML — anywhere you can paste a <script> tag.

<script src="https://app.cobuntu.com/widgets/v1/cart.js" async></script>
<div data-cobuntu-cart></div>

Self-bootstrapping. The script discovers mount nodes via MutationObserver, so widgets render even if your framework injects the mount divs after page load.

npm package (React + bundler)

For React apps with a bundler (Next.js, Vite, CRA, etc.):

npm install @cobuntu/widgets

import { CobuntuCart, CobuntuAuth } from "@cobuntu/widgets";
 
export function Header() {
  return (
    <>
      <CobuntuCart />
      <CobuntuAuth variant="button" />
    </>
  );
}

react is an optional peer dependency — only required if you import the React wrappers.

Versioning

/widgets/v1/*.js URLs are frozen. Once a customer pastes a <script> tag, the contract (data-attributes, CSS variables, window.Cobuntu* API) cannot break. Refactors that change the contract ship under /widgets/v2/*.js; both versions coexist until customers migrate.

The npm package follows semver. See its CHANGELOG (opens in a new tab).

Next: Install →

Two consumption patterns Install