Only show these results:

Contact List Component

Use Contact List to display your Contacts in a sortable, interactive list. Without needing to write a line of code, Contact List comes with:

  • Display picture
  • Contact Email
  • Last date emailed
  • Sortable list
  • Customization
Nylas Contact List

Install Contact List

  1. In your application, run npm i @nylas/components-contact-list.


That's it! Let's learn how to use Contact List.

Use Contact List

You'll learn how to use your Nylas accounts with the Contact List Component.


  • Create a new application or use an existing application with at least 1 account added.
  • An application to add the Component to.
  • A domain for the application to run at. For example localhost.

Create the Contact List Component

  1. Log in to your Nylas dashboard.
  2. Click Components > Contact List
  3. Name your Component and select the account.
  4. Use an existing access token or generate a new one. To quickly start testing your Component select Enable for a single account.
    1. To learn how to enable components for multiple accounts see Authorizing Components
  5. Enter the domain the component will run on. Without the domains, the component will not run.
  6. Save your new Component.
  7. On the Edit page, you can configure your component behavior and appearance.

Generate an Access Token

Generating a new access token will not replace your existing access token; it will create a second access token with the same scopes as the previous token. You can revoke access tokens at any time.

Nylas Contact Create

Add the Component To Your Application

  1. On the Edit page, there are instructions for installing the new Component.
  2. If you haven't installed the Contact List Component already, open a terminal and run npm i @nylas/components-contact-list.
  3. Then add your Nylas Component. Copy and paste your component code into your application.
Nylas Contact NPM
  1. You should refresh your application if needed. Any customization options set on the editing page will apply to your Component.

If you want to get started without installing the components in your application, fork this CodeSandbox and replace the ID with your Contact List ID.

Contact List CodeSandbox

The application uses demo data. Create a new Component so you can use your data.

Authorizing Components

With components, you can authorize them to work with a single account or multiple accounts.

Enable for a Single Account

A single account is a way to get started quickly. If you use this method in production, you'll have to authenticate each account from the dashboard one by one.

Enable components single account

Enable for All Accounts

To enable all accounts, you'll need to pass in a user's access token as a property of the component. One way to achieve this is to create a login screen, capture the access token and pass it into the component. You can pass in access_tokens directly in the Component.

<nylas-agenda id="COMPONENT-ID" access_token="USER-ACCESS-TOKEN"/>

Make sure to keep access_tokens hidden and never expose them online.

Enable Components for all accounts

Dashboard Preview

Dashboard previews do not work when enabling for all accounts.


Name Description
click_action email or select Set the behavior when clicking on contacts. If email is selected, when a contact is clicked, it will attempt to open the email program.
sort_by last_emailed or name
contacts_to_load Display either, 10, 50 or 100 contacts
theme Set the theme.

Allowed Domains

You can restrict the domains that your Component works on. Use glob patterns to enable or disable domains.

Some examples of glob patterns:

  • will only match
  • will match
  • * will match and
  • * will match any domain

Domain restriction only applies to the domain name. URL paths (/sub-path) or protocols (HTTPS) can not be restricted.

How Properties Are Handled

Nylas Components follow an order of operations to decide if the dashboard or code takes precedence.

  1. If the property is passed directly to the Component, use that first.
  2. If the property is not passed directly in the Component, use the dashboard settings.
  3. If there are no properties set in the Component or the dashboard, use the Component defaults.

Contact List Data

The Contact List Component pulls from the /contact endpoint. It displays:

  • Name
  • Photo if available. If there is no photo available, it defaults to showing the contact initials.
  • Last Emailed Date
  • Email

Demo Apps

Fork our demo to get started.

What's Next?