Quick start

This guide builds a small Moen page with a headline section and a button, using Vite (opens in new tab) . It takes a few minutes, and the same steps work in any project that has a bundler.

Before you start

• The package token. Neighborhood packages are private. Request the token first; Installation explains how.
• Node.js. Any current LTS release works with Vite.

Web Components

1. Create the project

npm create vite@latest my-neighborhood-site -- --template vanilla
cd my-neighborhood-site

2. Add the token and install

Create .npmrc in the project root with your token:

@fbin-web:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=[NBHD_TOKEN]

Then install the components and the brand themes:

npm install @fbin-web/neighborhood-core @fbin-web/neighborhood-brands

3. Load the brand and the components

Replace the contents of src/main.js with two imports: the Moen stylesheet, and every Neighborhood component.

import '@fbin-web/neighborhood-brands/dist/moen/neighborhood.moen.all.css';
import '@fbin-web/neighborhood-core';

4. Add the page

Replace the contents of index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Neighborhood page</title>
    <script type="module" src="/src/main.js"></script>
  </head>
  <body>
    <nbhd-headline-content surface="inverse">
      <nbhd-text slot="eyebrow" tag="div" variant="eyebrow">New collection</nbhd-text>
      <nbhd-text slot="title" tag="h1" variant="title">Faucets made for everyday</nbhd-text>
      <nbhd-text slot="content" tag="div">
        <p>Find the finish and style that fit your kitchen.</p>
      </nbhd-text>
      <nbhd-cta slot="cta" href="/faucets">Shop faucets</nbhd-cta>
    </nbhd-headline-content>

    <nbhd-container>
      <nbhd-text>Need help choosing? Our team can walk you through every option.</nbhd-text>
      <nbhd-button variant="secondary">Find a store</nbhd-button>
    </nbhd-container>
  </body>
</html>

Each slot attribute tells the component where that piece of content goes: the eyebrow, title, body copy and call to action. The content stays in your HTML, so it’s on the page before the components load.

5. Run it

npm run dev

Open the address Vite prints. You’ll see a Deep Blue headline section in Moen’s fonts, followed by a secondary button.

React

1. Create the project

npm create vite@latest my-neighborhood-site -- --template react
cd my-neighborhood-site

2. Add the token and install

Create .npmrc as in the Web Components steps above, then install:

npm install @fbin-web/neighborhood-core @fbin-web/neighborhood-react @fbin-web/neighborhood-brands

3. Remove the starter styles

In src/main.jsx, delete the import './index.css' line. The template’s starter CSS would otherwise compete with the brand theme.

4. Add the page

Replace the contents of src/App.jsx:

import '@fbin-web/neighborhood-brands/dist/moen/neighborhood.moen.all.css';
import {
  NbhdButton,
  NbhdContainer,
  NbhdCta,
  NbhdHeadlineContent,
  NbhdText,
} from '@fbin-web/neighborhood-react';

export default function App() {
  return (
    <>
      <NbhdHeadlineContent surface="inverse">
        <NbhdText slot="eyebrow" tag="div" variant="eyebrow">New collection</NbhdText>
        <NbhdText slot="title" tag="h1" variant="title">Faucets made for everyday</NbhdText>
        <NbhdText slot="content" tag="div">
          <p>Find the finish and style that fit your kitchen.</p>
        </NbhdText>
        <NbhdCta slot="cta" href="/faucets">Shop faucets</NbhdCta>
      </NbhdHeadlineContent>

      <NbhdContainer>
        <NbhdText>Need help choosing? Our team can walk you through every option.</NbhdText>
        <NbhdButton variant="secondary">Find a store</NbhdButton>
      </NbhdContainer>
    </>
  );
}

5. Run it

npm run dev

Try it on another brand

Change the stylesheet import to another brand, for example Master Lock:

import '@fbin-web/neighborhood-brands/dist/master-lock/neighborhood.master-lock.all.css';

Save, and the same markup takes on Master Lock’s colors, type and spacing. That’s the core idea of Neighborhood: you build the page once, and the brand theme decides how it looks.

Try another surface

Change surface="inverse" to surface="secondary". The section’s background changes, and its text and link colors change with it so they stay readable. Surfaces and color explains how this works.

Next steps

• Components: find the components for your page, with their slots and properties.
• Storybook: try components with your own content before you build.
• Working with tokens: style your own elements with the same tokens.