Skip to content
Docs
or

Scheduler components and elements overview

Nylas maintains the @nylas/react library, a set of pre-built web- and React-based components you can use to integrate Scheduler into your UI. Each component is built with clean internal styling, and they all support standard customization properties.

UI components versus elements

Section titled “UI components versus elements”

UI components are complete, ready-to-use UI components that provide full functionality.

You should use the UI components when you want a complete, working scheduling interface out of the box, you want to get started quickly, or you’re building a standard scheduling application.

Elements, meanwhile, are the building blocks that make up each UI component. You can use them on their own to make custom interfaces.

  • Scheduler elements: Individual parts used to create Booking Pages.
  • Scheduler Editor elements: Individual parts used to create configuration pages.

You should use these when you need to customize specific parts of the scheduling interface, you’re building a highly customized scheduling experience, or you want to integrate scheduling capabilities into your existing UI.

Build with UI elements

Section titled “Build with UI elements”

When you use individual elements to build a custom interface, you’ll need to…

  1. Import the element in your project.
  2. Configure the element’s properties. (Elements used within the UI components have these configured automatically.)
  3. Handle events to respond to user interactions.
  4. Apply styling using custom CSS properties or shadow parts.
  5. Manage states between elements to co-ordinate the overall experience.

Before you begin

Section titled “Before you begin”

Before you start, install the components package in your environment.