Starter Kit library

To help you build faster, we built a Starter Kit library that you can use throughout your projects.

What's included

This Starter Kit includes, but is not limited to:

typographies for headers, labels, footnotes, and body,
spacings for radiuses and containers,
brand and functional colors,
classes for buttons,
components, and
templates.

We regularly add and update the Starter Kit to help you build projects with a consistent look-and-feel, faster.

How to install it

In order to work with the WeWeb Starter Kit, you will need to:

duplicate the Starter Kit project template in your workspace
share that project library with the rest of your workspace
add that project library to the projects of your choice

These three steps are detailed in the sections that follow.

Duplicate Starter Kit

Before you can access the Starter Kit library, you will need to duplicate the Stater Kit project in your workspace:

Duplicate Starter Kit project

TIP

The Starter Kit project can be added to your workspace at no cost.

Before you can use the Starter Kit library in other projects, you will need to share it with the rest of your workspace:

open the Starter Kit project,
go to Libraries,
click on Share to workspace

Add to your projects

Once you have duplicated the Starter Kit project, and shared its library with the workspace, you'll be able to add the Starter Kit library to any or all projects in said workspace:

open a project,
go to Libraries > My libraries > Available,
select the library from the Starter Kit project,
click on Add library

Add Starter Kit library to a project

TIP

In the example above, the library is called My Starter Kit because that's the name we gave our project when we duplicated the Starter Kit template.

Use in your projects

Once you have added the Starter Kit library to a project, you'll be able to use it inside that project when adding and styling elements:

Use Starter Kit library in a project

In the example above, you can see we:

add a button component from the My Starter Kit we added above, and
bind the background color of that button to a color in our My Starter Kit library.

Learn more about creating and sharing libraries in WeWeb.