The responsive layout is in early preview. Please report any bugs.

Roadmap

Here's a glimpse of what is coming up in future releases of Paste. Unless explicitly mentioned, all release candidates are tentative and subject to change.

2023.01.10

Feature	Description	Status
Conversations API UI Kit	Official launch of the Paste Conversations API UI kit	In progress
Design Form component	A group of components with sensible defaults used to quickly layout forms in a consistent manor	In progress
File Uploader	Component used to upload a collection of files to an application	In progress
One Twilio: Design language update in Figma	Launch of the new One Twilio Design Language update that will be available via Paste. A cohesive design language to unify Twilio, Segment and SendGrid products	In progress
Create Form component	A group of components with sensible defaults used to quickly layout forms in a consistent manor	To do
Create a Caption Text component	Component for creating supplementary UI text	To do
Description List component	The classic Description List component. The pairing of a Term and a Description, often in a key, value pair	To do
Listbox primitive	Component used to create accessible Listboxes that can be styled to create interactive, list based components	To do
One Twilio: Design language guidelines	Updating existing Design Guidelines to accompany the new One Twilio Design Language	To do
Page spacing and layout guidelines		To do

2023.02.21 Candidate

Feature	Description	Status
Menu component, refined	A menu presents a list of menu items that a user can choose to perform an action with.	To do
One Twilio: Design global navigation compositions	A collection of components that can be used to build shared, global navigation patterns for Twilio, Segment and SendGrid applications.	To do
Popover component, refined	A Popover is used to display some content on top of another. It is typically invoked by a click action.	To do
Send out H2 2022 CSAT survey	Check in with our internal customers to gauge our customer satisfaction	To do
Tabs component, refined	Tabs are used to separate content into different logical sections.	To do
Tokens for React Native	Provide React Native developers a way to use Paste Design Tokens	To do
Treeview primitive	Primitive for creating expandable sections that show hierarchical data	To do

2023.04.04 Candidate

Feature	Description	Status
Data Grid component, refined	Interactive data tables, that include selection, sorting, editing	To do
Drag and Drop Pattern	Patterns for creating Drag and Drop user interface experiences	To do
Navigation UI Kit	UI Kit to create cohesive and consistent application navigation	To do
Navigation UI Kit for Figma	UI kit used to design Twilio application navigation	To do
One Twilio: Global Navigation components	A collection of components that can be used to build shared, global navigation patterns for Twilio, Segment and SendGrid applications.	To do
Tooltip component, refined	A Tooltip is a small contextual overlay that allows you to give further clarification to text or UI controls.	To do

2023.05.16 Candidate

Feature	Description	Status
Alert Dialog component, refined	Used to confirm an action made by the user. Used to prevent exiting a form in a modal without saving changes	To do
Avatar component, refined	Avatar is a pictorial representation of a user or object 👩‍🎤. It can accept an image or initials.	To do
Breadcrumb component, refined	A component to show navigation hierarchy and provide a means to navigate to parent pages	To do
Checkbox Button Group component	A group of checkboxes that look like a Button Group	To do
Copy to Clipboard pattern	How to enable a user to copy a snippet of text, such as an API key or code block.	To do
Date Picker component, refined	A component that allows users to pick a single date from a calendar	To do
Time Picker component, refined	A component that allows users to pick a single time from a picker.	To do

2023.06.27 Candidate

Feature	Description	Status
Callout component, refined	A component that can be used to highlight important, inline information in long page content	To do
Code Block component, refined	Non-editable block of text, formatted in the code text style and with syntax highlighting.	To do
Disclosure component, refined	A Disclosure is a button like component that is used to progressively show content that it controls.	To do
Inline Code component, refined	A component used to display important inline code snippets, such as SIDs, IDs and API keys	To do
Skeleton Loader component, refined	A component that gives users a hint of what type of information will be loaded on a page and helps reduce the perceived time a page takes to load.	To do
Toggle Button component, refined	A Button that supports two states, pressed and unpressed similar to a like button	To do
Toggle Switch component, refined	Used to toggle a feature on or off	To do

Backlog

Feature	Description	Status
Layout guidelines		To do
Accordion component	Used to expand and collapse a collection of grouped sections of content	To do
Accordion primitive	An unstyled functional primitive that is used for the Accordion component, or to roll your own implementation.	To do
Address validation pattern	A pattern to handle address validation consistently	To do
Alert / Status primitive	A primitive component used to create Alerts or Status components	To do
Alert dialog primitive component	An unstyled functional primitive used to build accessible alert dialogs	To do
Badge, small variant	A Badge component variant for small, compact spaces	To do
Blockquote component	A component used to display quotes	To do
Build Design Foundations - Layout/Spacing		To do
Build Design Foundations - Typography		To do
Card Layout pattern	A collection of patterns related to creating Card based user interfaces and layouts	To do
Card actions group	Patterns to use when displaying actions that be placed upon a single or group of Cards	To do
Carousel component	A component used to display a collection of images or graphics	To do
Checkbox button	A checkbox that looks like a Button	To do
Code Editor / Code Editor theme	A component used to create editable, syntax highlighted blocks of code	To do
Color Picker component	A component used to pick and select a color	To do
Complex filters pattern		To do
Composite primitive component	An unstyled functional primitive used to build accessible grids and listboxes	To do
Corner ornament component	A component that can be used to decorate the corner of another element with a count or status	To do
Creation flow pattern		To do
Data Grid sort		To do
Data Grid table actions	A composition of components to use when wanting to perform an action on a single row	To do
Data Grid with fixed/locked column		To do
Data Visualization pattern	Patterns and guidelines around the types of charts, colors, and treatments that can be used when creating Data Visualizations	To do
Data Visualization, Maps pattern	A pattern surrounding the data visualization of geographic data	To do
Data upload pattern	How to move a file or dataset out of Twilio	To do
Date Range Picker component	Allows users to pick a date range from a calendar	To do
Date and Time Picker component	A component that allows users to pick a single date and time from a calendar	To do
Date and Time Range Picker component	A component that can be used to set a value that represents a range between two dates and times	To do
Design Foundations - Layout/Spacing	Create guidelines for using spacing and creating layouts within Twilio products.	To do
Design Foundations - Typography	Create guidelines for using typography and creating hierarchy within Twilio products.	To do
Design Toolbar Component	A component used to group related actions	To do
Directional Modal component		To do
Disclosure of information pattern		To do
Edit pattern		To do
Email pattern		To do
Emoji component		To do
Errors, error states and warning states pattern	Can be used in situations where data is empty error states	To do
Feed primitive		To do
Feedback widget component		To do
Field checkbox component		To do
Field combobox component		To do
Field input component	An input component with sensible defaults so you can use the component a with minimal effort	To do
Field radio component		To do
Field select component		To do
Field textarea component	A textarea component with sensible defaults	To do
Form fields connect component	Lays out connected, related form fields that make up a single, logical unit of entry	To do
Form fields, small		To do
Go to docs pattern		To do
Hyphenate component		To do
Icons, country flags		To do
Illustration component		To do
Image component		To do
Inline Edit pattern		To do
Insight page pattern		To do
Keyboard Shortcut component	A component use to represent a keyboard key	To do
Label, optional variant		To do
List view pattern		To do
Live Region primitive		To do
Loading pattern	Define Spinner vs. Skeleton Loader	To do
Media player pattern		To do
Meter component	A component used a to show a unit of measure between two defined values	To do
Modal component, full screen variant	Modal Dialog that covers then entire screen	To do
Motion system	Adds standardized visual effects to a component	To do
Nested / hierarchical data pattern		To do
Number Input component with stylized buttons	Input that limits data to number entry and has styled +/- buttons	To do
Onboarding pattern		To do
Ordered List component, stylized variant		To do
Page Header pattern	Compositional examples of headings, breadcrumbs, and page level actions	To do
Permissions pattern		To do
Portal component	A primitive component used to render transitory elements outside the main DOM hierarchy	To do
Positioner library	A utility library used to position floating elements on the screen in relation to the window and other elements that may have triggered its appearance	To do
Progress Bar component	Communicates task or loading completion	To do
Progress Stepper component	Labels and communicates steps and progression through a linear workflow	To do
Promotional messaging pattern		To do
RTL language support for i18n		To do
Radio vs. Toggle vs. Checkbox vs. Tabs vs. Select vs. Combobox guidelines	A pattern to help inform you how to choose between using a Radio, Toggle, Checkbox, Tab set, Select or Combobox	To do
Rich text editor component	Allows users to enter, style, and format freeform text	To do
Scroll to pattern	A pattern used to enable app users to quickly scroll back to the top of the page	To do
Search Pattern	Patterns that can used to create a variety of common search UIs	To do
Select vs. Menu vs. Combobox guidline	A pattern to help you decide when to use a Select, Menu or Combobox	To do
Side panel component		To do
Slider component	Draggable input over a range of numbers	To do
Summary Detail component		To do
Tabs, nested variant	A set of tabs that can be used inside of another tabset that can create distinct visual hierarchy of that tabbed content	To do
Timeline component	A component used to display a list of events that occurred in chronological order	To do
Toolbar Component	A component used to group related actions	To do
Toolbar Primitive		To do
Tree Grid component	A component used to display, interact with and navigate hierarchical tabular data	To do
Tree Grid primitive	A primitive to create a table with rows that can expand and show more rows	To do
Tree component	A component to display, interact with and navigate hierarchical data	To do
Truncated list pattern		To do
Unstyled list component		To do
Visual Picker component		To do
Wizard pattern	How to take a user through a multi-step flow.	To do