Docs v1.6.0  /  React HTML5 Angular Vue.js Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack
OTHER
Settings panel Layout helpers

Instructions can vary depending on whatever you use theme settings panel or not. Please select the appropriate version.

react-starter directory structure

react-starter
public
vendor
Appwork's static assets
css
Compiled stylesheets
fonts
js
index.html
...
src
components
shared
Common components
layouts
App layouts
Layout1.js
Layout1Flex.js
...
Loader
Router loader component
NotFound
Not Found page
Router.js
Application router
store
Redux store
vendor
Appwork's sources
libs
React components
react-big-calendar
react-datepicker
...
styles
SCSS sources
_appwork
Appwork includes
_custom-variables
Custom variables
_theme
Theme includes
_uikit
UIKit includes
pages
Page styles
rtl
Styles with RTL support enabled
appwork.scss
appwork-material.scss
appwork-dark.scss
...
App.js
App.scss
index.js
Entry point
polyfills.js
routes.js
Application routes
...
gulpfile.js
package.json
...

Third-party components

The starter project by default includes all third-party components.
Optionally you can remove unwanted components to reduce bundle size and compile time:

  1. Remove unwanted packages from the dependencies section in the package.json file.
  2. Remove related directories within the src/vendor/libs directory.
  3. Remove related @imports and @includes in the src/vendor/styles/_theme/_libs.scss file.

For example, if you want to exclude react-select component, you will need to:

  1. Remove react-select dependency in the package.json file.
  2. Remove the src/vendor/libs/react-select directory.
  3. Remove @import '../../libs/react-select/mixins';, @include react-select-theme($background); and @include material-react-select-theme($background); lines in the src/vendor/styles/_theme/_libs.scss file.

Installation

Windows
  1. Download and install latest Node.js LTS: https://nodejs.org/en/.
  2. Download and install Git: https://git-scm.com/downloads.
  3. Logout from the system and login again.
  4. Launch cmd.exe as an administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
  5. Logout from the system and login again.
  6. Go to the react-starter directory and run command npm install.
Ubuntu
  1. Update system: sudo apt-get update && sudo apt-get upgrade.
  2. Install curl: sudo apt-get install curl.
  3. Install latest Node.js LTS and build tools: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages.
  4. Install Git: https://git-scm.com/download/linux.
  5. Go to the react-starter directory and run command npm install.
Mac OS X
  1. Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
  2. Download and install latest Node.js LTS: https://nodejs.org/en/.
  3. Download and install Git: https://git-scm.com/downloads.
  4. Go to the react-starter directory and run command npm install.

Page structure

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

public/index.html

public/index.html
<!DOCTYPE html>

<html lang="en" class="light-style">
<head>
  <title>React Starter</title>

  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

  <!-- Main font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" />

  <!-- Icons. Uncomment required icon fonts -->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/fontawesome.css" /> -->
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/ionicons.css" />
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/linearicons.css" /> -->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/open-iconic.css" /> -->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/pe-icon-7-stroke.css" /> -->

  <!-- Layout helpers -->
  <script src="%PUBLIC_URL%/vendor/js/layout-helpers.js"></script>

</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

  <div id="root"></div>
</body>
</html>
<!DOCTYPE html>

<html lang="en" class="light-style">
<head>
  <title>React Starter</title>

  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

  <!-- Main font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" />

  <!-- Icons. Uncomment required icon fonts -->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/fontawesome.css" /> -->
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/ionicons.css" />
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/linearicons.css" /> -->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/open-iconic.css" /> -->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/pe-icon-7-stroke.css" /> -->

  <!-- Core stylesheets -->
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/bootstrap.css" class="theme-settings-bootstrap-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/appwork.css" class="theme-settings-appwork-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/theme-corporate.css" class="theme-settings-theme-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/colors.css" class="theme-settings-colors-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/uikit.css" />

  <!-- Layout helpers -->
  <script src="%PUBLIC_URL%/vendor/js/layout-helpers.js"></script>

  <!-- Theme settings -->
  <script src="%PUBLIC_URL%/vendor/js/theme-settings.js"></script>
  <script>
    // Use settings panel generator to configure the plugin
    window.themeSettings = new ThemeSettings({
      cssPath: '%PUBLIC_URL%/vendor/css/',
      themesPath: '%PUBLIC_URL%/vendor/css/'
    });
  </script>

</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

  <div id="root"></div>
</body>
</html>

Layouts

To define default layout, set DefaultLayout variable. To display page with another layout than the default, pass layout key to the route object.

You can find navbar, sidenav and footer components in the src/shared/layouts directory. 

src/routes.js
...

import Layout1 from './shared/layouts/Layout1'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = Layout1

...

export const routes = [
  { 
    // Page with default "Layout1" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import Layout1Flex from './shared/layouts/Layout1Flex'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = Layout1Flex

...

export const routes = [
  { 
    // Page with default "Layout1Flex" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import Layout2 from './shared/layouts/Layout2'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = Layout2

...

export const routes = [
  { 
    // Page with default "Layout2" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import Layout2Flex from './shared/layouts/Layout2Flex'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = Layout2Flex

...

export const routes = [
  { 
    // Page with default "Layout2Flex" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import LayoutWithoutNavbar from './shared/layouts/LayoutWithoutNavbar'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = LayoutWithoutNavbar

...

export const routes = [
  { 
    // Page with default "LayoutWithoutNavbar" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import LayoutWithoutNavbarFlex from './shared/layouts/LayoutWithoutNavbarFlex'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = LayoutWithoutNavbarFlex

...

export const routes = [
  { 
    // Page with default "LayoutWithoutNavbarFlex" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import LayoutWithoutSidenav from './shared/layouts/LayoutWithoutSidenav'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = LayoutWithoutSidenav

...

export const routes = [
  { 
    // Page with default "LayoutWithoutSidenav" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import LayoutHorizontalSidenav from './shared/layouts/LayoutHorizontalSidenav'
import LayoutBlank from './shared/layouts/LayoutBlank'

...

export const DefaultLayout = LayoutHorizontalSidenav

...

export const routes = [
  { 
    // Page with default "LayoutHorizontalSidenav" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: LayoutBlank
  }
]
src/routes.js
...

import LayoutBlank from './shared/layouts/LayoutBlank'
import Layout1 from './shared/layouts/Layout1'

...

export const DefaultLayout = LayoutBlank

...

export const routes = [
  { 
    // Page with default "LayoutBlank" layout
    path: '/page-1',
    component: lazy(() => import('./components/Page1'))
  }, { 
    // Page with custom layout
    path: '/page-2',
    component: lazy(() => import('./components/Page2')),
    layout: Layout1
  }
]

Appwork's stylesheets

To use settings panel open src/App.js file and remove all Appwork's SCSS imports (use the generator to see the example)

Theming

To enable a theme, import theme SCSS file in the src/App.js file. 

src/App.js
import './vendor/styles/theme-corporate.scss'

To enable a theme, include the required theme stylesheet from the %PUBLIC_URL%/css/vendor/ path.

public/index.html
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/theme-corporate.css" class="theme-settings-theme-css" />

Material styling

To enable material styling you need to:

  1. Set $enable-material-style variable to true.

    src/vendor/styles/_custom-variables/_features.scss
    ...
$enable-material-style: true;
...

  2. Set material-style class on the <html> element instead of light-style.

    public/index.html
    <html class="material-style">

  3. Add -material suffix to bootstrap.scss, appwork.scss, theme-*.scss and colors.scss imports in the src/App.js file. 

    src/App.js
    import './vendor/styles/bootstrap-material.scss'
import './vendor/styles/appwork-material.scss'
import './vendor/styles/theme-corporate-material.scss'
import './vendor/styles/colors-material.scss'

  4. Add -material suffix to bootstrap, appwork, theme-* and colors stylesheets. 

    public/index.html
    <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/bootstrap-material.css" class="theme-settings-bootstrap-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/appwork-material.css" class="theme-settings-appwork-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/theme-corporate-material.css" class="theme-settings-theme-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/colors-material.css" class="theme-settings-colors-css" />

  5. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function. 

    public/index.html
    <script src="%PUBLIC_URL%/vendor/js/material-ripple.js"></script>
<script>window.attachMaterialRippleOnLoad();</script>

  6. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section. 

    public/index.html
    <script src="%PUBLIC_URL%/vendor/js/material-ripple.js"></script>

Dark styling

To enable dark styling you need to:

  1. Set $enable-dark-style variable to true.

    src/vendor/styles/_custom-variables/_features.scss
    ...
$enable-dark-style: true;
...

  2. Set dark-style class on the <html> element instead of light-style.

    public/index.html
    <html class="dark-style">

  3. Add -dark suffix to bootstrap.scss, appwork.scss, theme-*.scss and colors.scss imports in the src/App.js file. 

    src/App.js
    import './vendor/styles/bootstrap-dark.scss'
import './vendor/styles/appwork-dark.scss'
import './vendor/styles/theme-corporate-dark.scss'
import './vendor/styles/colors-dark.scss'

  4. Add -dark suffix to bootstrap, appwork, theme-* and colors stylesheets. 

    public/index.html
    <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/bootstrap-dark.css" class="theme-settings-bootstrap-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/appwork-dark.css" class="theme-settings-appwork-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/theme-corporate-dark.css" class="theme-settings-theme-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/colors-dark.css" class="theme-settings-colors-css" />

RTL support

To enable RTL direction support, first of all, you need to set $enable-rtl-support variable to true.

src/vendor/styles/_custom-variables/_features.scss
$enable-rtl-support: true;
...

Then import Appwork's SCSS files from the ./vendor/styles/rtl/ directory instead of ./vendor/styles/. 

src/App.js
import './vendor/styles/rtl/bootstrap.scss'
import './vendor/styles/rtl/appwork.scss'
import './vendor/styles/rtl/theme-corporate.scss'
import './vendor/styles/rtl/colors.scss'
import './vendor/styles/rtl/uikit.scss'

Then open public/index.html file and edit paths to load Appwork's SCSS from the %PUBLIC_URL%/vendor/css/rtl/ directory instead of %PUBLIC_URL%/vendor/css/. 

public/index.html
...

<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/rtl/bootstrap.css" class="theme-settings-bootstrap-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/rtl/appwork.css" class="theme-settings-appwork-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/rtl/theme-corporate.css" class="theme-settings-theme-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/rtl/colors.css" class="theme-settings-colors-css" />
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/rtl/uikit.css" />

...

<script>
  // Use settings panel generator to configure the plugin
  window.themeSettings = new ThemeSettings({
    cssPath: '%PUBLIC_URL%/vendor/css/rtl/',
    themesPath: '%PUBLIC_URL%/vendor/css/rtl/'
  });
</script>

...

To enable RTL direction, add dir="rtl" attribute to the <html> element.

public/index.html
<html dir="rtl">

Layout options

You can configure the initial layout by setting control classes to the <html> element.

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc. 
public/index.html
<html class="layout-fixed layout-collapsed">

Generator

Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the react-starter directory.

Open in new tab

Available tasks

Open console/terminal, go to the react-starter directory and run npm run task_name.

Task Description
start Run dev server.
build Build for production.
test Run tests.
eject Eject Webpack config. Use this command with caution: https://create-react-app.dev/docs/available-scripts#npm-run-eject.
Task Description
start-all Build stylesheets and run dev server.
watch-all Build stylesheets and run dev server. Recompiles stylesheets and restarts the server on any change inside the src/vendor/styles/ directory.
build-all Build stylesheets and sources for production.
test Run tests.
eject Eject Webpack config. Use this command with caution: https://create-react-app.dev/docs/available-scripts#npm-run-eject.
Control class Description
.layout-reversed Reverse layout direction without markup change.
.layout-expanded Expand layout sidenav on small screens (< 992px).
.layout-collapsed Collapse layout sidenav on large screens (>= 992px).
.layout-offcanvas Make layout sidenav offcanvas.
.layout-fixed Set layout position to fixed.
.layout-fixed-offcanvas Set layout position to fixed with offcanvas sidenav.
.layout-navbar-fixed Set layout navbar position to fixed.
.layout-footer-fixed Set layout footer position to fixed.

Migration guide

Do not forget to commit changes or clone the project before performing migration steps.

  1. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

  2. Remove the next files and directories:

    src/vendor/libs/react-id-swiper/
src/vendor/libs/react-sortable-tree/

  3. Copy new files and directories:

    src/vendor/libs/rc-tree/
src/vendor/libs/swiper/

  4. Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:

    src/vendor/styles/*.scss
src/vendor/styles/rtl/*.scss

  5. Copy with replace changed files and directories:

    public/vendor/fonts/
public/vendor/js/
src/shared/layouts/helpers.js
src/vendor/styles/_theme/_libs.scss
src/vendor/styles/_appwork/
src/vendor/styles/_uikit/
src/vendor/libs/nouislider-react/
src/vendor/libs/plyr/
src/vendor/libs/react-big-calendar/
src/vendor/libs/react-bootstrap-typeahead/
src/vendor/libs/react-datepicker/
src/vendor/libs/react-mde/
src/vendor/libs/react-toastify/
src/vendor/libs/theme-settings/

  6. Update:

    package.json. Diff

    src/store/reducers/themeStore.js. Diff

  7. Remove node_modules directory and package-lock.json. Then execute npm install

Changes in third-party components:

  • Copy with replace the next files and directories:

    src/vendor/styles/_appwork/_functions.scss
react-demo/src/vendor/libs/plyr/
react-demo/src/vendor/libs/react-big-calendar/
react-demo/src/vendor/libs/react-bootstrap-typeahead/
react-demo/src/vendor/libs/react-contextmenu/
react-demo/src/vendor/libs/react-datepicker/
react-demo/src/vendor/libs/react-flatpickr/
react-demo/src/vendor/libs/react-select/
react-demo/src/vendor/libs/react-toastify/
react-demo/src/vendor/libs/sweetalert2/

  • Copy with replace the next file:

    src/vendor/libs/react-flatpickr/react-flatpickr.scss

  1. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

    Note: Yarn package manager is not reqired anymore.

  2. Remove the next files and directories:

    src/vendor/styles/migrate/
src/vendor/libs/react-table/

  3. Copy new files and directories:

    src/vendor/styles/_custom-variables/_appwork-dark.scss
src/vendor/styles/_custom-variables/_features.scss
src/vendor/libs/plyr/

  4. Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:

    src/vendor/styles/*.scss
src/vendor/styles/rtl/*.scss

  5. Copy with replace changed files and directories:

    public/vendor/fonts/fontawesome/
public/vendor/fonts/fontawesome.css
public/vendor/js/
src/polyfills.js
src/vendor/styles/_appwork/
src/vendor/styles/_theme/
src/vendor/styles/_uikit/
src/vendor/styles/pages/
src/vendor/libs/nouislider-react/
src/vendor/libs/rc-input-number/
src/vendor/libs/react-big-calendar/
src/vendor/libs/react-bootstrap-table2/
src/vendor/libs/react-bootstrap-typeahead/
src/vendor/libs/react-contextmenu/
src/vendor/libs/react-datepicker/
src/vendor/libs/react-flatpickr/
src/vendor/libs/react-id-swiper/
src/vendor/libs/react-mde/
src/vendor/libs/react-perfect-scrollbar/
src/vendor/libs/react-quill/
src/vendor/libs/react-select/
src/vendor/libs/react-sortable-tree/
src/vendor/libs/react-stepzilla/
src/vendor/libs/react-toastify/
src/vendor/libs/sidenav/
src/vendor/libs/spinkit/
src/vendor/libs/sweetalert2/
src/vendor/libs/theme-settings/

  6. Update:

    gulpfile.js. Diff

    package.json. Diff

    src/shared/Router.js. Diff

    src/shared/Loader/Loader.module.scss. Diff

    src/vendor/styles/_custom-variables/_libs.scss. Diff

    src/vendor/styles/_custom-variables/_pages.scss. Diff

    src/vendor/styles/_custom-variables/_uikit.scss. Diff

  7. Edit variables in the src/vendor/styles/_custom-variables/_features.scss file according your setup.

    Variable Feature
    $enable-rtl-support Set to true to enable RTL mode support, otherwise set to false.
    $enable-light-style Set to true to enable light (previously default) style support, otherwise set to false.
    $enable-material-style Set to true to enable material style support, otherwise set to false.
    $enable-dark-style Set to true to enable dark style support, otherwise set to false.

  8. Remove node_modules directory and then execute npm install

  • theme-default class is renamed to theme-light.

    [Before] public/index.html
    <html lang="en" class="default-style">
    [After] public/index.html
    <html lang="en" class="light-style">

  • ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.

  • ThemeSettings.setMaterial() method is removed.
    Added ThemeSettings.setStyle(), ThemeSettings.isLightStyle(), ThemeSettings.isMaterialStyle(), ThemeSettings.isDarkStyle() methods.
    See Settings panel docs.

  • New style-dependent utility classes, which change its color depending on the current active style:

    • .theme-text-white - White (light or material style) / dark (dark style) text.
    • .theme-text-dark - Dark (light or material style) / white (dark style) text.
    • .theme-bg-white - White (light or material style) / dark (dark style) background.
    • .theme-bg-dark - Dark (light or material style) / white (dark style) background.
    • .theme-border-white - White (light or material style) / dark (dark style) border.
    • .theme-border-dark - Dark (light or material style) / white (dark style) border.

Changes in third-party components: