Note that the Kolibri Design System is not intended to be used as a dependency outside of Kolibri products.

If you are building a Kolibri plugin you should not add the design system as a dependency because it will be made available as a dependency of Kolibri itself.

design-system.learningequality.org is a resource for designers and developers who are building Kolibri products. It includes the design system patterns and the library of UI components.

Refer to design-system.learningequality.org to learn about the design system patterns and components, as well as the detailed technical documentation and guidance for the library components that are available for usage in Kolibri products.

For the latest (not yet released) version, visit the design system website built from the develop branch at develop--kolibri-design-system.netlify.app/.

The component library is a node package hosted on GitHub. It contains front-end components, utilities, and style definitions supporting the Kolibri Design System and used in Kolibri products.

To add a particular pinned version to a project using yarn, for example v1.0.1, run:

yarn add https://github.com/learningequality/kolibri-design-system#v1.0.1

Components and utilities will be accessible under the lib path. For example:

import KButton from 'kolibri-design-system/lib/KButton';

The library is provided as source code, rather than a pre-built distribution. A project using it needs to supply both build and runtime dependencies.

Contact us at the Kolibri Design System GitHub Discussions.

If you have found a bug, you can create a Github issue following the instructions in the issue template.

1. 💻 Follow the Getting started to set up your development server. At the bottom of that page, you will also find links that will take you to guidelines for the most common tasks.
2. 🔍 Search for issues tagged as help wanted or good first issue.
3. 🗣️ Ask us for an assignment in the comments of an issue you've chosen.

Note that in times of increased contributions activity, it may take us a few days to reply. If you don't hear from us within a week, please reach out via Kolibri Design System GitHub Discussions.

❓ Where to ask questions

• For anything development related, refer to the developer documentation at first. Some answers may already be there.
• For questions related to a specific issue or assignment requests, use the corresponding issue's comments section.
• Visit Kolibri Design System GitHub Discussions to ask about anything related to contributing to Kolibri Design System, troubleshoot development server issues, or connect with other contributors.

Thank you for your interest in contributing to Kolibri Design System! The Kolibri project was founded by volunteers dedicated to helping make educational materials more accessible to those in need, and every contribution makes a difference.