NgBracket examples

New to NgBracket? It's a set of Angular component packs built to support WCAG 2.2 AA. See ngbracket.com.

Angular apps, close to real-world ones, that install the published NgBracket component packs from the private registry. They show the packages working in real apps, and you can clone one as a starter template.

All data is hardcoded. There's no backend or API to run.

App	Port	Packs used	What it is
admin	4301	dashboard · data-table · board · forms · form-kit · guide · auth	A SaaS back-office: KPI dashboard with a product tour, customers table, support-ticket work board, settings forms with an autosaved team list
storefront	4302	marketing · commerce · auth · forms	A DTC shop: marketing landing page, product catalogue, cart & checkout
booking	4303	scheduler · forms · form-kit · auth	An appointments app: booking wizard (with an optional guest), calendar views, availability
editor	4304	navigation	A document editor built on the navigation toolbar and menus
overlays	4306	overlays	Project settings built from overlays: dialogs, confirm, toasts, drawer, tooltips, popover, banners
kb	4305	navigation · structure · editor · forms · primitives · form-kit	Almanac, a knowledge base: article tree, rich-text/markdown editors, tag chips, draft autosave, editable grid, Signal Form (formRoot + submit)

Built with Angular 22 (standalone, zoneless, signals).

Prerequisites

• Node 22.23.4+ (CI/dev uses 24.22.1).
• An NgBracket access token (ngbr_…). You get one with any pack purchase. See your account page. It is read from the NGBRACKET_TOKEN environment variable at install time.

Getting started

# 1. Point npm at your NgBracket token (never commit this).
export NGBRACKET_TOKEN=ngbr_your_token_here

# 2. Install. This pulls @ngbracket/* from registry.ngbracket.com.
npm install

# 3. Run an app (pick one):
npm run start:admin       # http://localhost:4301
npm run start:storefront  # http://localhost:4302
npm run start:booking     # http://localhost:4303
npm run start:editor      # http://localhost:4304
npm run start:overlays    # http://localhost:4306
npm run start:kb          # http://localhost:4305

The committed .npmrc only references ${NGBRACKET_TOKEN}. No token is stored in this repo. Without the variable set, npm install will fail with a 401 on the @ngbracket/* packages.

Apps with a route-by-route README: admin · storefront · booking · editor · kb.

How the packs are wired

• Every app shares projects/shared, a small library with a ThemeService (light/dark), a ThemeToggle button, and the global design-token stylesheet (projects/shared/src/styles/theme.scss) that themes every pack via the --ngbr-* CSS custom properties.
• Each app imports pack components directly, e.g. import { NgbrDataTable } from '@ngbracket/data-table';.

Accessibility and theming

• Every app has a light/dark toggle in its chrome. Theme tokens are defined once in projects/shared/src/styles/theme.scss; the pack components and the app shells both read the --ngbr-* variables, so dark mode applies across every pack.
• The NgBracket components are built to support WCAG 2.2 AA. The example app chrome (shells, nav, custom cells) is built to the same level: semantic landmarks, visible focus rings, aria-pressed and aria-label on toggles, and AA contrast in both themes.

Building

npm run build            # builds every app
npm run build:admin      # or one at a time

Deploy (Cloudflare)

Each app deploys as a static-assets Cloudflare Worker (SPA fallback) to its own subdomain:

App	URL
admin	https://admin.ngbracket.com
storefront	https://storefront.ngbracket.com
booking	https://booking.ngbracket.com
editor	https://editor.ngbracket.com
overlays	https://overlays.ngbracket.com
kb	https://kb.ngbracket.com
a11y-demo (admin, development build with a11y-devtools)	https://a11y-demo.ngbracket.com/a11y-demo

Config lives in wrangler.<app>.jsonc. With Cloudflare credentials in the environment (CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID):

npm run deploy            # build + deploy every app (incl. a11y-demo)
npm run deploy:admin      # or one at a time

(Builds use the already-installed packages, so deploying doesn't need the NGBRACKET_TOKEN.)

Licence

MIT. See LICENSE. The @ngbracket/* packages themselves are commercial and require a valid licence/token.