Installation#

Currently, every package is standalone in the paste project. While this means you only get what you need, it makes it a little more tedious to get started. We hope to address this in the near future, but for now you can run:

External dependencies#

yarn add react react-dom @emotion/core @emotion/styled styled-system @styled-system/theme-get react-uid

System packages#

yarn add @twilio-paste/types @twilio-paste/style-props @twilio-paste/design-tokens @twilio-paste/theme-tokens @twilio-paste/theme @twilio-paste/icons @twilio-paste/core

8 minute video walkthrough#

Be gentle :P - this was recorded in one take on zoom.

Usage#

import {Theme} from '@twilio-paste/theme';
// Wrap your root component with the Theme.Provider like so:
<Theme.Provider theme="default">
    // other stuff here
</Theme.Provider>

Now you can use our themed and tokenized components anywhere in your app:

import {Box} from '@twilio-paste/box';
<Box margin="space20" backgroundColor="colorBackground">
    Hello Paste!
</Box>

Our tokens are readily available on our components and typescript typings are provided.

Sandbox#