TypeScript icon, indicating that this package has built-in type declarations

0.0.15 • Public • Published

Neighbourhoods Design System Components

npm version

The Neighbourhoods Design System Components package provides a set of extensible web components that are styled according to the Neighbourhoods Design System. This package offers components for different UI libraries, making it easy to incorporate the Neighbourhoods design system into your projects.


npm install neighbourhoods-design-system-components


The package provides the following base components:

  • NHComponent: The base component that adds the Neighbourhoods Design System variables. Use this component to create your custom components with Neighbourhoods styling.

  • NHComponentShoelace: Extends NHComponent and includes CSS variable overrides to use Shoelace UI components.

  • NHComponentMaterial: Extends NHComponent and includes CSS variable overrides to use Material UI web components.

Look for a list of available CSS variables for Neighbourhoods Style Tokens here:

Here's an example of how to create a custom component using NHComponent:

import { css, CSSResult, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { NHComponent } from 'neighbourhoods-design-system-components/dist/components/base';

export class NHCard extends NHComponent {
  heading!: string;

  static styles: CSSResult[] = [
    super.styles as CSSResult,
      .container {
        background-color: var(--nh-theme-bg-subtle);

        /* your component styles go here... use CSS variables from the variables.css file */

  render() {
    return html`
      <div class="container">

Note: The NHCard component is provided as an example of creating a custom component. It is not exported directly from this package.

Customize the component as needed and enjoy the benefits of the Neighbourhoods Design System in your projects!

Package Sidebar


npm i neighbourhoods-design-system-components

Weekly Downloads






Unpacked Size

243 kB

Total Files


Last publish


  • nickstebb