Getting started

Installation

It's easy to get started!

Get the package

Install the @eightshift/ui-components package with your package manager of choice.

Import the styles

At the minimum you have to import the main styles, which come in 3 flavors:

1. For generic usage

@import '~@eightshift/ui-components/dist/assets/style.css';

Uses cascade layers to separate styles, includes the default CSS reset.

2. For the WP Gutenberg editor

@import '~@eightshift/ui-components/dist/assets/style-editor.css';

Cascade layers are not used, CSS reset is included.

3. For the WP admin area

@import '~@eightshift/ui-components/dist/assets/style-admin.css';

Cascade layers are not used, CSS reset is opt-in using the es:css-reset class.

Extras

To expand the font coverage to the Block editor (even the Gutenberg components), import:

@import '~@eightshift/ui-components/dist/assets/wp-font-enhancements.css';

Optionally, import the WordPress UI enhancements, which correct some of the inconsistencies in the default components.

@import '~@eightshift/ui-components/dist/assets/wp-ui-enhancements.css';

Caution

If using Frontend libs version 12 or older, skip the WordPress UI enhancements, as they will conflict with the styles included there.

Recommended WordPress setup

application-blocks-editor.css

@import '~@eightshift/ui-components/dist/assets/wp-font-enhancements.css';
@import '~@eightshift/ui-components/dist/assets/wp-ui-enhancements.css';
@import '~@eightshift/ui-components/dist/assets/style-editor.css';

application-admin.css

@import '~@eightshift/ui-components/dist/assets/style-admin.css';

Enjoy!

That's all! You are ready to use Eightshift UI components in your project.