GitLab Marketing Design System
Slippers is the open-source GitLab Marketing Web Design System. It was created in the spirit of "everyone can contribute".
- Storybook: https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/.
- Figma: https://www.figma.com/file/nWIOpmuMp7RZXmfTj6ujAF/Slippers_foundations.
- GitLab project: https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.
- Further documentation: https://about.gitlab.com/handbook/marketing/digital-experience/slippers-design-system/.
Slippers uses Storybook to enable component exploration.
pnpm is the preferred package manager.
Running Storybook locally:
1. Clone the Slippers project.
2. Install dependencies using Node 24.12.0 (from .tool-versions) - pnpm install.
3. Run Storybook - pnpm storybook build to build for production, pnpm storybook dev for local development.
4. Storybook should now be running at: http://localhost:6009/.
Updating the slippers-ui NPM package
1. Make changes to slippers-ui.
2. If needed, create/update .stories so Storybook is upto date.
3. Increment the version number in package.json.
4. If needed, add component into install.js (this adds components into the build).
5. Build /dist folder - pnpm build.
6. Publish to NPM - pnpm publish.
7. You can optionally publish using sh scripts/publish.sh. Note that you must have jq installed. This attempts to run Step 5 and 6 and validate all of this process for you.
8. Merge changes into origin/main.
9. Once the package has been published it's now ready to be updated in the consuming repositories (Example: Buyer Experience, be-navigation, etc.).
Importing slippers-ui into your project:
- With pnpm pnpm add slippers-ui, npm npm install slippers-ui, or yarn yarn add slippers-ui
- Slippers main entry point is /dist/slippers-core.umd.min.js, example usage. To import the styling for the above components, the compiled css file can be found at: /dist/slippers-core.css.