**Source URL:** https://general.veevavault.dev/regulatory/custom-pages/guides/ui-libraries.md
# UI Library Integration
This page provides guidance on working with common external libraries to build Custom Pages in Vault.
## Styled Components {#styled-components}
Use [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager) to inject styles.
The following code uses [styled-components](https://styled-components.com/) to create a style root and use StyleSheetManager:
```
import { definePage } from '@veeva/vault';
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { StyleSheetManager } from 'styled-components'
export default definePage(({ element }) => {
const stylesRoot = document.createElement('div');
const reactRoot = document.createElement('div');
element.appendChild(stylesRoot);
element.appendChild(reactRoot);
const root = createRoot(reactRoot);
root.render(
);
})
```
## Emotion-Based Libraries {#emotion-based-libraries}
Emotion-based libraries such as [Material UI](https://mui.com/material-ui/) require a specific setup when defining your Custom Page in order for their CSS to work in Custom Pages.
The following example defines a Custom Page using Material UI and configures the Emotion cache for style injection:
```
import { definePage } from '@veeva/vault';
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
export default definePage(({ element }) => {
const myCache = createCache({
key: 'material-ui-emotion-cache',
container: element
});
const root = createRoot(element);
root.render(
);
})
```
## HTML Attributes for Styling {#html-attributes-for-styling}
Some libraries that use Emotion for styling rely on attributes set on the `` tag to render styles correctly. However, when UI code is placed within the shadow DOM, it isn't wrapped in an `` tag. This can lead to visual and CSS issues due to the absence of necessary attributes.
To address these issues, we recommend wrapping your UI code in a `
` or a similar container and applying the necessary attributes to ensure proper styling. For example, [Chakra UI](https://www.chakra-ui.com/) requires the following attributes for correct CSS rendering:
```
```
You should add these attributes to a container element that encapsulates the entire UI. Different attributes might be necessary when using other UI libraries.