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.
Feature | Description | Status |
---|---|---|
Card highlight variant | In progress | |
Design AI-related components for Chat Log | Design for components that enable new AI experiences at Twilio, mainly focused around chat. | In progress |
Figma AI UI kit | Components that enable new AI experiences at Twilio, mainly focused around generative AI and chat. | In progress |
Ordered List component, stylized variant | To do | |
Page Header component | Compositional examples of headings, breadcrumbs, and page level actions | Complete |
Paste Docs AI Chat | Chat GPT powered support bot for getting help with building and designing with Paste | In progress |
Summary Detail component | To do |
Feature | Description | Status |
---|---|---|
AI UI kit | Components that enable new AI experiences at Twilio, mainly focused around generative AI and chat. | To do |
Callout component, refined | A component that can be used to highlight important, inline information in long page content | To do |
Card Layout pattern | A collection of patterns related to creating Card based user interfaces and layouts | To do |
Complex filters pattern | 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 |
Elevation foundations | To do | |
Illustration foundations, refined | To do | |
UI size tokens | To do |
Feature | Description | Status |
---|---|---|
Interaction foundations | To do | |
Keyboard Shortcut component | A component use to represent a keyboard key | To do |
Loading pattern | Defines when to use Spinner, Skeleton Loader, and Progress Bar. | To do |
Menu component, refined | A menu presents a list of menu items that a user can choose to perform an action with. | To do |
Table of Contents component | 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 |
Feature | Description | Status |
---|---|---|
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 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 |
Alert dialog primitive component | An unstyled functional primitive used to build accessible alert dialogs | To do |
Blockquote component | A component used to display quotes | To do |
Breadcrumb component, refined | A component to show navigation hierarchy and provide a means to navigate to parent pages | To do |
Button Group, refined | A group of connected Buttons | To do |
Card actions pattern | 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 |
Chat Log components, refined | A Rich Text Editor used to compose chat messages in conversational UI | To do |
Checkbox Button and Checkbox Button Group components | A group of checkboxes that look like a Button Group | To do |
Code Block component, refined | Non-editable block of text, formatted in the code text style and with syntax highlighting. | To do |
Color Picker component | A component used to pick and select a color | To do |
Composite primitive component | An unstyled functional primitive used to build accessible grids and listboxes | 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 |
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 upload pattern | How to move a file or dataset out of Twilio | 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 |
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 |
Date Picker component, refined | A component that allows users to pick a single date from a calendar | To do |
Date Range Picker component | Allows users to pick a date range from a calendar | To do |
Description List component, refined | The classic Description List component. The pairing of a Term and a Description, often in a key, value pair | To do |
Detail Text component, refined | Component for creating supplementary UI text | To do |
Directional Modal component | To do | |
Disclosure component, refined | A Disclosure is a button like component that is used to progressively show content that it controls. | To do |
Disclosure of information pattern | To do | |
Display Heading component, refined | Typographic guidelines for large text meant to be used for marketing, storytelling, or attention-grabbing contexts, like displaying numbers on a dashboard layout. These typically fall outside of the normal use cases for the standard Heading component. | To do |
Drag and Drop Pattern | Patterns for creating Drag and Drop user interface experiences | To do |
Dropzone component | A component used as the visual target for a drag and drop interaction | To do |
Edit pattern | To do | |
Email pattern | To do | |
Emoji component | 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 |
File Picker component, refined | Input component used to upload or attach files | To do |
File Uploader component, refined | Component used to upload a collection of files to an application | To do |
Form fields connected 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 | |
Iconography foundations | To do | |
Icons, country flags | To do | |
Image component | To do | |
Inline Code component, refined | A component used to display important inline code snippets, such as SIDs, IDs and API keys | To do |
Inline Edit pattern | To do | |
Insights pattern | To do | |
Label, optional variant | To do | |
Live Region primitive | To do | |
Manage List pattern | To do | |
Media player pattern | To do | |
Minimizable Dialog component, refined | A small, minimizable non-modal dialog that is fixed or anchored to the bottom of the screen | To do |
Modal component, full screen variant | To do | |
Motion system | Adds standardized visual effects to a component | To do |
Nested / hierarchical data pattern | To do | |
Onboarding pattern | 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 |
Promotional messaging pattern | 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 |
RTL language support for i18n | 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 guideline | A pattern to help you decide when to use a Select, Menu or Combobox | To do |
Side Modal component, refined | Modal Dialog that covers one side of screen | To do |
Side panel component | 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 |
Status Badge component, refined | To do | |
Status Menu component, refined | To do | |
Switch component, refined | Used to toggle a feature on or off | To do |
Template list pattern | A page layout that lists templates for customers to choose from. | To do |
Time Picker component, refined | A component that allows users to pick a single time from a picker. | To do |
Timeline component | A component used to display a list of events that occurred in chronological order | To do |
Tokens for React Native | Provide React Native developers a way to use Paste Design Tokens | To do |
Toolbar Component | A component used to group related actions | To do |
Toolbar Primitive | To do | |
Tree component | A component to display, interact with and navigate hierarchical data | To do |
Tree Grid component | A component used to display, interact with and navigate hierarchical tabular data | To do |
Treeview primitive | Primitive for creating expandable sections that show hierarchical data | To do |
Truncated list pattern | To do | |
Unstyled list component | To do |