What is Paste?
Paste is more than just a component library—it’s a complete design system that includes:- React Components: A comprehensive library of production-ready UI components
- Design Tokens: Centralized design decisions for colors, spacing, typography, and more
- Theming System: Built-in themes and customization capabilities
- Accessibility: WCAG 2.1 AA compliant components with keyboard navigation and screen reader support
- Documentation: Extensive guides and examples for every component
Key Features
Production-Ready Components
Paste provides over 100 production-ready React components, from basic elements like buttons and inputs to complex components like data grids and chat interfaces. All components are:- Built with TypeScript for type safety
- Fully tested and production-ready
- Optimized for performance
- Regularly updated and maintained
Accessibility First
Every Paste component is built with accessibility in mind:- WCAG 2.1 AA compliant
- Keyboard navigation support
- Screen reader optimized
- Proper ARIA attributes
- Color contrast validated
Flexible Theming
Paste includes multiple built-in themes:- Default: The standard Paste theme
- Dark: Dark mode support
- Twilio: Twilio-branded theme
- Twilio Dark: Dark variant of Twilio theme
- SendGrid: SendGrid-branded theme
- Evergreen: Evergreen theme variant
Design Tokens
Design tokens provide a single source of truth for design decisions:- Colors and color schemes
- Spacing and sizing scales
- Typography scales
- Border radius and shadows
- Z-index layers
Who Should Use Paste?
Paste is ideal for:- Twilio Product Teams: Building customer-facing Twilio products
- Internal Tools: Creating consistent internal applications
- Customer Applications: Building on Twilio’s platform with a professional UI
- Design Systems Teams: Learning from or extending a production design system
Benefits of Using Paste
Paste helps teams ship faster by providing pre-built, tested components that follow Twilio’s design standards.
- Faster Development: Skip building basic components from scratch
- Consistency: Maintain a consistent look and feel across products
- Accessibility: Built-in WCAG compliance without extra effort
- Best Practices: Components follow React and web development best practices
- Active Maintenance: Regular updates, bug fixes, and new features
- TypeScript Support: Full type definitions for better developer experience
Core Packages
Paste is distributed as a monorepo with several core packages:- @twilio-paste/core: Complete bundle of all components
- @twilio-paste/design-tokens: Design tokens in multiple formats
- @twilio-paste/theme: Theme provider and theming utilities
- @twilio-paste/customization: Customization provider for theme overrides
- @twilio-paste/icons: Comprehensive icon library
Getting Started
Ready to start building with Paste? Check out our Getting Started guide to learn how to install and set up Paste in your project.Learn More
Explore the core concepts of Paste:- Design Tokens: Understanding Paste’s design token system
- Theming: Working with themes and the Theme Provider
- Customization: Customizing components and tokens
- Accessibility: Accessibility features and best practices