Quick Start for Paste
Instructions to create a new Paste project.
The quickest way to get started with Paste is to bootstrap a new React app using one of our templates for popular React frameworks, Next.js and Create React App. Both approaches will create a new React app with Paste installed and ready for development.
You can use either Yarn or npm to bootstrap your project, but in these examples we will use Yarn.
Next.js is a framework for building React apps that use server-side rendering and create-next-app
is an easy way to bootstrap a new Next app with minimal configuration.
Paste has a pre-made template for create-next-app
that comes with @twilio-paste/core
and @twilio-paste/icons
as dependencies and uses TypeScript.
To create a new create-next-app
app using the Paste template execute the following commands:
yarn create next-app --example https://github.com/twilio-labs/paste/tree/main/packages/paste-nextjs-template my-paste-appcd my-paste-appyarn dev
This starts your project in development mode and it can be seen at http://localhost:3000
.
When you create the project, Paste is used in 2 files:
pages/_app.tsx
: creates aMyApp
component, which wraps all pages. This is where the Paste<Theme.Provider>
is added which enables any child component to use tokens.pages/index.tsx
: a sample page with Paste components.
yarn dev
: runs project in development mode, with hot reloadingyarn build
: creates a production build of the projectyarn start
: runs the project in production mode, need to runyarn build
first
To read more in depth about how create-next-app
works, check out their documentation.
create-react-app
initializes a new React project with minimal configuration.
Paste has a pre-made template for create-react-app
that comes with @twilio-paste/core
and @twilio-paste/icons
as dependencies and uses TypeScript.
To create a new create-react-app
app using the Paste template execute the following command:
yarn create react-app --template @twilio-paste my-paste-appcd my-paste-appyarn start
This starts your project in development mode and it can be seen at http://localhost:3000
.
When you create the project, Paste is used in a few places:
src/App.tsx
: creates anApp
component, which wraps all pages. This is where the Paste<Theme.Provider>
is added which enables any child component to use tokens.src/components
: a directory with 2 sample components that use Paste components.src/pages/
: a directory with 3 sample pages that use Paste components.
yarn start
: runs project in development mode, with hot reloadingyarn build
: creates a production build of the projectyarn test
: runs tests in watcher mode
To read more in depth about how create-react-app
works, check out their documentation.
You can use the Paste components anywhere that is wrapped by the Theme Provider.
import {Box} from '@twilio-paste/core/box';const Component = () => ( <Box margin="space20" backgroundColor="colorBackground"> Hello Paste! </Box>);
The Paste Icons package provides icon components. They can be used to enhance the appearance of a web interface and break up the monotony of text. Icons have to be imported individually.
import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon';const Component = () => ( <Button variant="secondary" size="small" onClick={() => {}}> <PlusIcon decorative={true} /> Add to cart </Button>);
For more information about our icon system, checkout our usage guide here.