How to contribute

Spor follows a monorepo structure, meaning it contains multiple packages and applications.

The /applications directory contains the applications used to run the design.vy.no application.

• designmanual-frontend – A Remix app for documentation and demos (this site).
• design-studio – The (new) Sanity Studio app for managing documentation.
• studio – The (old) Sanity Studio app for managing documentation (spor.vy.no/studioEkstern lenke).

The /packages directory contains all available Spor packages that can be imported and used across applications.

• @vygruppen/spor-react – The React component library.
• @vygruppen/spor-design-tokens – Design tokens (colors, typography, spacing, etc.).
• @vygruppen/spor-icon – SVG icons.
• @vygruppen/spor-icon-react – React components for icons.
• @vygruppen/spor-icon-react-native – React Native components for icons.
• @vygruppen/spor-loader - All Lottie loading animation data
• @vygruppen/spor-codemods - Code modification scripts

Before you begin, make sure you have:
✅ Node.js installed.
✅ Basic familiarity with Git for version control.

git clone https://github.com/nsbno/spor.git

Navigate to the project directory and install the required dependencies:

cd spor
pnpm install

Before running the project, some assets (like icons and design tokens) need to be built. Running the command below will generate a local dist folder, making them available.

pnpm run build

💡 Tip: Since Spor is a monorepo, running pnpm build from the repository root will build all applications and packages. This can take a while. To build only a specific application or package, navigate to its directory and run pnpm build from there.

Start the project in development mode:

pnpm run dev

Spor exists to help developers and designers build consistent, accessible, and high-quality interfaces.

While the core team maintains the system, most new development happens in product teams. That means:
💡 Need a new component? Build it and submit a pull request!
🐞 Found a bug? Fix it, or create a GitHub issue so others can help.
📚 Think the documentation is unclear? Update it or suggest improvements!

At Vy, everyone can and should contribute to Spor—so that the efforts of one benefit the entire organization. Have questions? Reach out in the #spor channel on Slack!

There are many ways to contribute, big or small! Here are some ideas:

🛠 Develop new components, features, or bug fixes.
🎨 Design new components and propose design improvements.
📝 Enhance documentation by adding examples or proofreading.
🔍 Increase test coverage by writing more tests.
🐛 Report bugs or suggest improvements via GitHub issues.
💬 Provide feedback on design and developer experience.
✅ Review pull requests and help maintain code quality.

Every contribution—no matter how small—makes a difference! 🚀

💡 Not sure where to start? Take a look at the GitHub issues in the repository!

Contributing to Spor follows a few required steps to ensure changes are reviewed, documented, and included in future releases.

1. Identify a problem or need.
2. Implement the solution by developing new functionality or modifying the existing code. See documentation on how to create a React Component,Ekstern lenke or React Native ComponentEkstern lenke.
3. Create a changeset describing your changes so they can be included in the next release. See documentation on releasing new versionEkstern lenke.
4. Open a pull request in the Spor repository and complete the required steps and checklist in the pull request template.
5. Wait for the pull request to be approved, then merge it into the main branch. If you get no response on the pull request, contact the Spor techlead or send a message in the Spor Slack-channel

Once your changes have been merged, they will be included in the next release published by the Spor Tech Lead.

If your change is urgent and needs to be released quickly, contact the Spor Tech Lead directly or post a message in the Spor Slack channel.

To make contributing easier, here are some step-by-step guides for common tasks:

1️⃣ Create or do changes to a React ComponentEkstern lenke
2️⃣ Create or do changes to aEkstern lenke React Native ComponentEkstern lenke
3️⃣ Add iconsEkstern lenke

If you're unsure where to start, check out GitHub issues labeled good first issue for beginner-friendly tasks.