mattermost/compass-design

Mattermost Compass design system monorepo: published @mattermost/compass-ui, unpublished @mattermost/compass-proto, guidelines site, and Storybook.

Prototype flows live in mattermost-proto-playground.

Packages

Package	Published	Role
@mattermost/compass-ui	Yes (alpha)	Foundations, primitives, props-driven web chrome
@mattermost/compass-proto	No	Mobile*, ChannelShell, Call* composites, demo fixtures

See docs/ROADMAP.md for the repo structure, ownership, and phase plan.

Setup

Requires Node.js 24.x and npm 11.x (see .nvmrc).

npm install
npm run dev

Open the URL shown in the terminal for the guidelines site.

Common commands

npm run dev              # docs app + package watch
npm run dev:all          # docs app + Storybook + package watch (all together)
npm run build            # production docs build

npm run storybook        # component catalog (compass-ui) only
npm run build-storybook  # static Storybook build (CI uses /storybook/)
npm run build:ui         # build @mattermost/compass-ui dist
npm run build:proto      # build @mattermost/compass-proto dist
npm run smoke-test:packages

Consumers

• Vite / docs: workspace packages (this repo)
• Proto playground: mattermost-proto-playground — npm @mattermost/compass-ui@alpha (subpath imports; 0.1.0-alpha.3+) + file: for @mattermost/compass-proto
• Mattermost webapp: file: or @mattermost/compass-ui@alpha — see packages/compass-ui/INTEGRATION.md
• Proto package: workspace or npm pack only; not for webapp product code

Docs hosting

GitHub Pages deploys from main via .github/workflows/deploy.yml (canonical Compass docs site). The same deploy builds Storybook into /storybook/ on that site.