CB Navbar DLS

CB Navbar DLS is a public React package for the Chargebee-style navigation bar.

This repository is publish-only. Source code, tests, and the production build live in /Users/cb-jayaraj/work/chargebee-ui-v2/packages/navbar. This package repository keeps npm metadata and the built dist folder that is published to npm.

For future releases, see Publishing Guide.

Install

npm install cb-navbar-dls cb-sting-dls react@18 react-dom@18

Usage

Import the navbar package, the Sting stylesheet, and the navbar stylesheet once in your app.

import CBNavbar from "cb-navbar-dls";
import "cb-sting-dls/sting-react.css";
import "cb-navbar-dls/cb-navbar.css";

export function App() {
  return (
    <div style={{ height: "100vh" }}>
      <CBNavbar collapsed={false}>
        <CBNavbar.Header />
        <CBNavbar.Body />
        <CBNavbar.Footer />
      </CBNavbar>
    </div>
  );
}

Sync The Build

Build the source package first:

cd /Users/cb-jayaraj/work/chargebee-ui-v2
pnpm --filter @chargebee/cb-navbar build

Then sync the built files into this publish-only repo:

cd /Users/cb-jayaraj/Documents/2026/cb-navbar-dls
npm run sync:dist

If the source repo is somewhere else, pass the built folder explicitly:

NAVBAR_DIST_PATH=/absolute/path/to/navbar/dist npm run sync:dist

The sync step requires these files to exist:

• dist/cb-navbar.es.js
• dist/cb-navbar.umd.js
• dist/index.d.ts
• dist/cb-navbar.css

The sync step also rewrites built imports from @chargebee/sting-react to the public package cb-sting-dls.

Publish

Preview package contents:

npm pack --dry-run

Publish to npm:

npm publish

Unscoped npm packages are public by default.