How do I use Design Library as a developer?

Design Library contains specification and usage guidelines for a collection of common components. They are located under the Components & Patterns section in the main menu above.

Under the Components subsection you’ll find all the components grouped by category. You can also search for specific components using the search field on the start page or in the menu bar.

On a component page you can find out which repositories contain code for the component, read about the guidelines for that particular component, and find design specifications.

Using components

The recommended way to use components is through NPM. Most of the repositories listed on this website are published as public NPM packages under the @sebgroup namespace. So for example Vanilla can be installed by running $ npm i -D @sebgroup/vanilla and Bootstrap by running $ npm i -D @sebgroup/bootstrap

-D flag means it will install as a dev-dependency, which is usually what you want when developing an app or website.

The repositories which a component is available in is listed near the top of the component page, under “Available in”. Detailed installation and usage instructions are available in each repo, usually in the README.md file.

Contribute to Design Library

Everyone is welcome to contribute to our library of re-usable components! There are multiple ways you do this in:

• By improving or adding to Green or any of the other repositories connected to Design LIbrary
• By creating issue tickets in Github
• By getting in touch with us if you have any suggestions or feedback 

Contributing to a repository

All of our repositories are hosted in SEB:s public GitHub organistion. By convention, every repo should have a CONTRIBUTING.md file at the root of the repo. In that file you'll find detailed instructions for how to contribute to that particular repository.

For example:

• Green: https://github.com/sebgroup/green/blob/main/CONTRIBUTING.md
• Vanilla: https://github.com/sebgroup/vanilla-pattern-library/blob/master/CONTRIBUTING.md
• React: https://github.com/sebgroup/react-components/blob/develop/CONTRIBUTING.md

If the CONTRIBUTING.md file is missing, instructions might be in the repo wiki, or in the README.md file instead.

Feedback?

Contributions don't have to be code! If you have any ideas, suggestions or other feedback, we would love to hear it! Please get in touch with us at designlibrary@seb.se