Getting Started

Everything you need to install Neighborhood and start building.

Neighborhood is used by designers, developers and the product and content teams who plan brand sites. Start with the path that fits your role.

Designers

Design with the same components, tokens and names the sites are built from.

Designing with Neighborhood: design from the coded components, with Storybook as the source of truth.
Working with tokens: spec designs with token names instead of fixed values.
Surfaces and color: choose backgrounds that keep text readable on every brand.
Content model: the slots and settings of every component.
Storybook: try every component live, on any brand.
Figma plugin (beta): pull the tokens and components into a Figma file.
AI tools (MCP): have Claude build mockups and pages with the real components.

Developers

Install the packages, load a brand and build your first page.

Installation: the package token, the packages and the brand stylesheet.
Quick start: a working branded page in a few minutes.
React: props, slots, events, refs and forms with the React components.
Platform setup: Next.js, Vue, Svelte, Angular, static sites, Shopify and Bloomreach.
AI tools (MCP): connect your AI assistant to the components, setup and migration guides.
Styling: customize components without overriding them.
Loading and performance: avoid layout shift and keep pages fast.
Troubleshooting: fixes for common problems.
Components: properties, slots, events and examples for every component.

Product and content teams

See what's available, what's ready, and how to ask for what's missing.

For product and content teams: what you can change, how to plan and where Neighborhood runs.
Content and media: writing headlines and calls to action, and preparing images and video.
Component Status: which components are ready for production.
Storybook: preview components with your brand's look and your own content.
Requests and support: report a bug or request a change or a new component.
Glossary: the terms designers, developers and business teams share.

In this section

About What Neighborhood is, what ships with it and how one system serves every brand. How it fits together How tokens, brand themes and components combine into a brand site, and where each kind of change happens. Designing with Neighborhood Design brand pages from the coded components, the tokens and Storybook. For product and content teams What Neighborhood means for planning brand sites, what you can change and how to ask for more. Installation Add Neighborhood to a project, load a brand theme and register components. Quick start Build a working, branded Neighborhood page from scratch in a few minutes. React Use the React package: client components, props, slots, events, refs and forms. Platform setup Set up Neighborhood on Next.js, Vite, Vue, Svelte, Angular, static sites, Shopify and Bloomreach. Neighborhood CSS Tailwind CSS utilities and plain CSS classes built from Neighborhood tokens. Storybook Try every component live, on any brand, with your own content. Figma plugin Pull Neighborhood tokens and components into a Figma file as variables, styles and components. AI tools (MCP) Connect Claude, Copilot or Cursor to the Neighborhood MCP server so your AI assistant builds with the real components. Troubleshooting Fixes for common problems: installing, unstyled components, fonts, styling, events, forms and upgrades. Requests and support Report a bug, request a change or a new component, and get access to the packages. Glossary The terms used across Neighborhood, from attribute to Web Component.