Storybook

Storybook has a live, interactive example of every Neighborhood component. You can switch brands, change content and settings, check screen sizes and copy the code, all without setting up a project. Each component page in these docs also embeds its stories in the Preview section.

Open Storybook (opens in new tab)

Who it’s for

• Designers: see exactly how a component looks and behaves on your brand, at every breakpoint.
• Product and content teams: try your own headlines and copy in a component before anything is built.
• Developers: copy working HTML or JSX for the exact setup you need.

Docs pages and stories

Pick a component from the Components section of the sidebar. It opens on its Docs page, which shows every story on one page, a Show code button under each preview, and a table of the component’s properties and controls. Select a single story in the sidebar to work with it on its own, with its controls beside it.

The toolbar

The toolbar above the preview changes how every story renders:

• Framework: switch between Web Component and React. Both render the same component, so the preview, controls and code stay in step.
• Brand: load a brand theme (CFG, FBIN, House of Rohl, Larson, Master Lock or Moen) or the Unbranded tokens.
• Viewport: preview at Neighborhood’s breakpoints, from XS (mobile) to XXL (desktop).
• Playground: choose how much of the playground frame to show: On (the full frame), Minimal (only the surface and width) or Off (the component on its own).

The panels

• Controls: change settings and content live. Props holds the component’s settings, Content fills its slots with text and media, and Playground changes the scene around it.
• Code: copy-ready code for the story as it is right now: HTML for Web Components, or JSX with imports for React. It updates as you change controls.
• Accessibility: automated accessibility checks for the current story.

The playground

Many stories show their component inside a playground: a framed area that shows the component on a surface, the way it sits on a real page. Playground controls, such as playgroundSurface, only change that frame; they aren’t part of the component. Use the Playground option in the toolbar to trim the frame to its surface or turn it off.

In the Web Component code, the playground appears as an outer <nbhd-playground> element. Copy only what’s inside it. In your project, set surface on a real component such as nbhd-container instead; see Surfaces and color.

Share what you see

The browser address always points to the story you’re on, including your brand and control changes. Copy it to share exactly what you’re looking at, in a review or a bug report.