Nighttime Peanut Migrations
    Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    5.0.2 • Public • Published


    The Paste ThemeProvider leverages React's Context to provide the theme object to any descendant components in the tree. For that reason, we recommend wrapping your application at the root level with the Paste ThemeProvider. This allows all sub-components to retrieve the correct token value for the supplied theme.

    import {Theme} from '@twilio-paste/theme';
    <Theme.Provider theme="console">
      <App />

    Using tokens in custom components

    Sometimes you will need to create something custom that is not available in Paste but you need that component to still look like it's from Paste. The use of Paste Tokens in your styles is the way that you can access global design properties used in all Paste Components.

    Styled Component

    By using the Theme.Provider, when you create a custom component using Styling-Library, the theme object is available on props via context. You can access those via the css utility or props object directly.

    This is the preferred method.

    import {styled, css} from '@twilio-paste/styling-library';
    const custom = styled.div(
        backgroundColor: 'colorBackgroundPrimary',
        padding: 'spacing20',

    Paste ThemeConsumer

    Paste Theme provides a React Context Consumer for the theme called Theme.Consumer. The Theme.Consumer takes a function as a child, which provides the theme object as an argument.

    import {Theme} from '@twilio-paste/theme';
      {({theme}) => {
        return <p>What is the default text color {theme.textColors.colorText}</p>;

    Paste useTheme Hook

    Paste Theme provides a React Hook called useTheme which returns the theme object from the React Context via the Theme Provider.

    import React from 'react';
    import {useTheme} from '@twilio-paste/theme';
    const HookExampleComponent = (): React.ReactElement => {
      const theme = useTheme();
      return <p>What is the default text color {theme.textColors.colorText}</p>;

    Higher Order Component (HoC)

    Paste also provides a HoC to be able to access the theme object.

    import React from 'react';
    import {withTheme} from '@twilio-paste/theme';
    const ExampleComponent = ({theme}) => <p>What is the default text color {theme.textColors.colorText}</p>;
    // Provides this component with the theme object as a prop
    const ExampleComponentwithTheme = withTheme(ExampleComponent);




    npm i @twilio-paste/theme

    DownloadsWeekly Downloads






    Unpacked Size

    294 kB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar