From de5d15beab5f8199d84ed94dbbeb2ca54e7de6ac Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 10 Aug 2026 09:58:30 -0400 Subject: [PATCH] docs(develop): add section for configuring css --- .../patternfly-docs/content/get-started/develop.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/develop.md b/packages/documentation-site/patternfly-docs/content/get-started/develop.md index 974c18ecfb..c2e5a895ab 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/develop.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/develop.md @@ -86,6 +86,16 @@ import { RhUiArrowRightIcon } from '@patternfly/react-icons'; For additional guidance and implementation examples, refer to the [icon component](/components/icon) and the [iconography](/foundations-and-styles/iconography) foundations pages. +### Importing Patternfly styles + +PatternFly uses the [`@patternfly/react-styles` package](https://www.npmjs.com/package/@patternfly/react-styles) as a translation layer to reference the styles contained in the PatternFly HTML/CSS library. When developing with Patternfly React, include the following import at the base level of your application to pull in PatternFly's styling: + +``` +import '@patternfly/react-core/dist/styles/base.css'; +``` + +Importing css directly from the PatternFly HTML/CSS library while using PatternFly React may result in duplicated stylesheets in the browser as PatternFly React already pulls in styles internally via `@patternfly/react-styles`. + ## Develop with HTML/CSS The PatternFly HTML/CSS library contains a collection of code samples that you can use to build interfaces with consistent PatternFly markup and styling.