# nylas-page-styling

Source: https://developer.nylas.com/docs/reference/ui/page-styling/

The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.
To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input
fields you want to display. The component will automatically update the appearance object when the input fields are changed.
Ensure that the input fields have the `name` attribute set to the key in the appearance object.

If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.
The fields that can be customized in the Nylas hosted scheduler page are:
- Primary color: (name: color)
- Company logo: (name: company_logo_url)
- Submit button label: (name: submit_button_label)
- Thank you message: (name: thank_you_message)

This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component.

## Overview

- **Tag**: `<nylas-page-styling>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-page-styling></nylas-page-styling>
```

### React

```jsx
import { NylasPageStyling } from '@nylas/react';

export default function Example() {
  return <NylasPageStyling />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `selectedConfiguration` | `selected-configuration` | Configuration \| undefined | - | No |  |
| `selectedLanguage` | `selected-language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined | - | No | The selected language. |
| `themeConfig` | `theme-config` | undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; } | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `bookingFormSubmitted` | void | This event is fired when the form is submitted in the parent component. |
| `valueChanged` | { value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) \| undefined; } | This event is fired when the email reminders change. |

## Slots

| Slot | Description |
| --- | --- |
| `custom-page-style-inputs` | This slot is used to pass a custom page style form to the Nylas Scheduler Editor component. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nps` | The nylas-page-styling container |
| `nps__body` | The body of the page styling section |
| `nps__color-picker` | The page styling color picker |
| `nps__color-picker-button` | The page styling color picker button |
| `nps__color-picker-button-label` | The page styling color input field label * |
| `nps__color-picker-button-selected-label` | The page styling color picker label denoting which color is selected |
| `nps__company-name-input-textfield` | The page styling company name input textfield |
| `nps__drawer-toggle--container` | The page styling drawer toggle container |
| `nps__header` | The header of the page styling section |
| `nps__input-image-url` | The page styling company logo input textfield |
| `nps__message-textarea` | The page styling thank you message textarea |
| `nps__submit-button-label-input-textfield` | The page styling submut button label input textfield |
| `nps__title-input-textfield` | The page styling page title input textfield |

## Dependencies

This component uses the following child components:

- [`<chevron-icon>`](/docs/reference/ui/chevron-icon/)
- [`<input-color-picker>`](/docs/reference/ui/input-color-picker/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs>`](/docs/reference/ui/editor-tabs/)
- [`<nylas-editor-tabs-group>`](/docs/reference/ui/editor-tabs-group/)