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 | In progress | |
| 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 | In progress |
| 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 |