Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

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
Press Delete or Backspace to remove. Press Enter to toggle selection.
VoiceComplete
Maria Ardovini
Tri O'Hara
Imani Nakai
</Theme.Provider>
npm install @twilio-paste/core @twilio-paste/icons

Helpful links

Icons list
edit iconshow iconbuild iconcustom icon
expand iconfeed iconfile image icontranslation icon
share icontip icontime icondata line chart icon
Tokens list
  • color-text-success
    $color-text-success
  • color-text
    $color-text
  • color-data-visualization
    $color-data-visualization-10
  • color-background-primary
    $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
Gibby Radki · 3:47pm
Contact Owl Corp

We're hiring a Product Designer! Apply here

external link

Read more about our latest release

internal link

Check out our roadmap

internal link
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
component and primitive builder

Built with your favorite technologies, Typescript + React + Figma

For Twilio customers

Some blurb here that’s basically a quick setup guide for customers.Eng quick start Customization overview Figma Community file

Explore our templates

Page templates bring a collection of components and patterns together into full-page layouts to drive cohesion across our platforms.Get inspired by these examples of Paste templates in use, and start building your customer experiences today.Check out our templates
templates carousel
Design efficiency

Built by designers, for designers

1-to-1 code and design libraries means production-ready design prototypes, too.

With our libraries, you can swap themes easily with Figma variable modes, and prep design files for efficient design and engineering collaboration.Find us on Figma Community external linkicons icons icons icons icons

Join our community of builders

13k buildersWeekly npm downloads
70kComponents in production
1.1MFigma components inserted
30Monthly Github Discussions

We do the thinking so you don't have to

Creating seamless and accessible user experiences can be a tough task. But we help you simplify the journey.

Paste handles the research, design, testing, and engineering of the core building blocks. This frees up your energy to tackle customer challenges instead of UI issues.

Accessibility standards
User research
Competitive analysis
Product requirements
Design & API review
Usage guidelines
Built-in constraints
Dos and Dont's
Performance
Accessibility

What we talk about when we talk about accessibility

Accessibility is more than just color contrast. We believe in designing for each user, not just “all users”. We build with these considerations in mind:

  • Screen magnification, voice dictation, color blindness, and those who require help with fine motor control.
  • Semantic HTML to better communicate with assistive technologies.
  • UI controls that are designed to be instantly recognizable and easy to see.
  • Keyboard navigation and focus management to allow task completion through a variety of input devices.

Learn more in our Inclusive Design Guide
Focus managementScreen reader supportKeyboard support