Paste

Build inclusive, delightful customer experiences with Twilio’s open-source design system.

Get to know our

100+

components, patterns, and templates

Get started for developersGet started for designers

Code sample languages

Press Delete or Backspace to remove. Press Enter to toggle selection.

VoiceComplete

View yearly data

</Theme.Provider>

npm install @twilio-paste/core @twilio-paste/icons

Volume

Helpful links

Icons list

Tokens list

$color-text-success
$color-text
$color-data-visualization-10
$color-background-primary

(information)

Auto recharge disabled

We recommend enabling auto recharge to keep your account active.

Yesterday

Chat Started ・ 3:34pm

Gibby Radki has joined the chat・3:43pm

I have shipped the item back, how long will it take to get the refund?

3:45pm

Hi Gibby

You should receive the refund within 10 days

Do you need help with anything else?

Gibby Radki · 3:47pm

Contact Owl Corp

Try out Paste Assistant, our AI-powered Design System chat bot

Read about our latest release

Check out our roadmap

Themeable and composable

Start from anywhere

With Paste, you can get production-ready experiences up in minutes with our 80+ styled components and pre-built themes.Or get complete control by bringing your own theme and creating custom components with our functional primitives.

Check out our templates

Build with styled componentsBuild with primitives

ACME production website

Active

Events+8%

301,422

Violations-5%

Entities

Component preview themeDefaultDarkTwilioCustom

<Card padding="space60" element="STYLED_COMPONENTS_CARD">
  <Box display="flex" flexDirection="column" rowGap="space50" alignItems="center" element="INSIDE_OF_WHITE_CARD">
    <Box display="flex" width="100%" columnGap="space40" element="TOP_ROW">
      <Avatar variant="entity" icon={BusinessIcon} size="sizeIcon20" name="entity-avatar" />
      <Box display="flex" justifyContent="space-between" width="size30" element="TWO_TEXTS">
        <Anchor href="">ACME production website</Anchor>
        <Box display="flex" columnGap="space20">
          <ConnectivityAvailableIcon decorative color="colorTextIconAvailable" size="sizeIcon30" />
          <Text as="span" display="flex" fontSize="fontSize30" lineHeight="lineHeight20">
            Active
          </Text>
        </Box>
      </Box>
    </Box>
    <Box width="100%" element="SEPARATOR">
      <Separator orientation="horizontal" verticalSpacing="space0" />
    </Box>
    <Box display="flex" alignItems="center" width="100%" justifyContent="space-between">
      <Box display="flex" columnGap="space30" alignItems="center">
        Events
        <Badge variant="neutral" as="span">
          +8%
        </Badge>
      </Box>
      301,422
    </Box>
    <Box display="flex" alignItems="center" width="100%" justifyContent="space-between">
      <Box display="flex" columnGap="space30" alignItems="center">
        Violations
        <Badge variant="neutral" as="span">
          -5%
        </Badge>
      </Box>
      0
    </Box>
    <Box display="flex" alignItems="center" width="100%" justifyContent="space-between">
      Entities
      <AvatarGroup variant="entity" size="sizeIcon30">
        <Avatar name="entity" src="/images/avatars/entity-avatar.png" />
        <Avatar name="entity" src="/images/avatars/entity-avatar.png" />
        <Avatar name="entity" src="/images/avatars/entity-avatar.png" />
      </AvatarGroup>
    </Box>
  </Box>
</Card>