Passage React Element UI Customization
Learn how to style the Passage React Elements
Customizing the Passage React Elements is done the same way as the standard Passage Elements, but props are named as per React convention. Learn more about UI customization.
PassageLightTheme
The PassageTheme component can customize the look and feel of the Passage Element to match your brand.
import React from 'react';
import { PassageAuth, PassageTheme } from '@passageidentity/passage-react';
export const RegisterPage: React.FC = () => {
return (
<>
<h1>Example Register Page</h1>
<PassageTheme primaryColor="#ff0000" />
<PassageRegister />
</>
);
};Props
| Name | Required | Type | Default Value |
|---|---|---|---|
| bodyFontFamily | No | string | 'Helvetica', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif |
| headerFontFamily | No | string | 'Helvetica', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif |
| containerBackgroundColor | No | string | #fff |
| containerMaxWidth | No | string | 300px |
| containerMargin | No | string | auto |
| containerPadding | No | string | 30px 30px 20px |
| errorColor | No | string | #dd0031 |
| bodyFontSize | No | string | 14px |
| bodyFontWeight | No | string | 400 |
| bodyTextColor | No | string | #000 |
| headerFontSize | No | string | 24px |
| headerFontWeight | No | string | 700 |
| headerTextColor | No | string | #000 |
| anchorTextColor | No | string | #000 |
| anchorHoverColor | No | string | #4d4d4d |
| anchorActiveColor | No | string | #6b6b6b |
| otpInputBackgroundColor | No | string | #d7d7d7 |
| inputTextColor | No | string | #000 |
| inputBoxBackgroundColor | No | string | #fff |
| inputBoxBorderRadius | No | string | 5px |
| checkboxBackgroundColor | No | string | #000 |
| checkboxTextColor | No | string | #fff |
| controlBorderRadius | No | string | 5px |
| controlBorderColor | No | string | #d7d7d7 |
| controlBorderActiveColor | No | string | #000 |
| buttonFontSize | No | string | 16px |
| buttonFontWeight | No | string | 400 |
| buttonWidth | No | string | 50% |
| primaryButtonBackgroundColor | No | string | #000 |
| primaryButtonTextColor | No | string | #fff |
| primaryButtonBorderRadius | No | string | 5px |
| primaryButtonBorderColor | No | string | #000 |
| primaryButtonBorderWidth | No | string | 0px |
| primaryButtonBorderHoverColor | No | string | #000 |
| primaryButtonTextHoverColor | No | string | #fff |
| primaryButtonBackgroundHoverColor | No | string | #4d4d4d |
| primaryButtonTextActiveColor | No | string | #fff |
| primaryButtonBackgroundActiveColor | No | string | #6b6b6b |
| primaryButtonBorderActiveColor | No | string | #000 |
| secondaryButtonBackgroundColor | No | string | #fff |
| secondaryButtonTextColor | No | string | #000 |
| secondaryButtonBorderRadius | No | string | 5px |
| secondaryButtonBorderColor | No | string | #000 |
| secondaryButtonBorderWidth | No | string | 0px |
| secondaryButtonBorderHoverColor | No | string | #4d4d4d |
| secondaryButtonTextHoverColor | No | string | #000 |
| secondaryButtonBackgroundHoverColor | No | string | #d7d7d7 |
| secondaryButtonTextActiveColor | No | string | #000 |
| secondaryButtonBackgroundActiveColor | No | string | #e0e0e0 |
| secondaryButtonBorderActiveColor | No | string | #6b6b6b |
| tableHeaderBorderColor | No | string | #d7d7d7 |
| tableRowHoverColor | No | string | #e0e0e0 |
| tableRowBorderColor | No | string | #e8e8e8 |
| tablePaginatorSelectedColor | No | string | #d7d7d7 |
| tablePaginatorHoverColor | No | string | #e8e8e8 |
PassageDarkTheme
The PassageTheme component can customize the look and feel of the Passage Element to match your brand.
import React from 'react';
import { PassageAuth, PassageTheme } from '@passageidentity/passage-react';
export const RegisterPage: React.FC = () => {
return (
<>
<h1>Example Register Page</h1>
<PassageTheme primaryColor="#ff0000" />
<PassageRegister />
</>
);
};Props
| Name | Required | Type | Default Value |
|---|---|---|---|
| bodyFontFamily | No | string | 'Helvetica', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif |
| headerFontFamily | No | string | 'Helvetica', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif |
| containerBackgroundColor | No | string | #fff |
| containerMaxWidth | No | string | 300px |
| containerMargin | No | string | auto |
| containerPadding | No | string | 30px 30px 20px |
| errorColor | No | string | #dd0031 |
| bodyFontSize | No | string | 14px |
| bodyFontWeight | No | string | 400 |
| bodyTextColor | No | string | #000 |
| headerFontSize | No | string | 24px |
| headerFontWeight | No | string | 700 |
| headerTextColor | No | string | #000 |
| anchorTextColor | No | string | #000 |
| anchorHoverColor | No | string | #4d4d4d |
| anchorActiveColor | No | string | #6b6b6b |
| otpInputBackgroundColor | No | string | #d7d7d7 |
| inputTextColor | No | string | #000 |
| inputBoxBackgroundColor | No | string | #fff |
| inputBoxBorderRadius | No | string | 5px |
| checkboxBackgroundColor | No | string | #000 |
| checkboxTextColor | No | string | #fff |
| controlBorderRadius | No | string | 5px |
| controlBorderColor | No | string | #d7d7d7 |
| controlBorderActiveColor | No | string | #000 |
| buttonFontSize | No | string | 16px |
| buttonFontWeight | No | string | 400 |
| buttonWidth | No | string | 50% |
| primaryButtonBackgroundColor | No | string | #000 |
| primaryButtonTextColor | No | string | #fff |
| primaryButtonBorderRadius | No | string | 5px |
| primaryButtonBorderColor | No | string | #000 |
| primaryButtonBorderWidth | No | string | 0px |
| primaryButtonBorderHoverColor | No | string | #000 |
| primaryButtonTextHoverColor | No | string | #fff |
| primaryButtonBackgroundHoverColor | No | string | #4d4d4d |
| primaryButtonTextActiveColor | No | string | #fff |
| primaryButtonBackgroundActiveColor | No | string | #6b6b6b |
| primaryButtonBorderActiveColor | No | string | #000 |
| secondaryButtonBackgroundColor | No | string | #fff |
| secondaryButtonTextColor | No | string | #000 |
| secondaryButtonBorderRadius | No | string | 5px |
| secondaryButtonBorderColor | No | string | #000 |
| secondaryButtonBorderWidth | No | string | 0px |
| secondaryButtonBorderHoverColor | No | string | #4d4d4d |
| secondaryButtonTextHoverColor | No | string | #000 |
| secondaryButtonBackgroundHoverColor | No | string | #d7d7d7 |
| secondaryButtonTextActiveColor | No | string | #000 |
| secondaryButtonBackgroundActiveColor | No | string | #e0e0e0 |
| secondaryButtonBorderActiveColor | No | string | #6b6b6b |
| tableHeaderBorderColor | No | string | #d7d7d7 |
| tableRowHoverColor | No | string | #e0e0e0 |
| tableRowBorderColor | No | string | #e8e8e8 |
| tablePaginatorSelectedColor | No | string | #d7d7d7 |
| tablePaginatorHoverColor | No | string | #e8e8e8 |
PassageTheme (Deprecated)
Note: PassageTheme has been deprecated. Use the PassageLightTheme or PassageDarkTheme components instead. PassageTheme will now apply a Light theme.
The PassageTheme component can customize the look and feel of the Passage Element to match your brand.
import React from 'react';
import { PassageAuth, PassageTheme } from '@passageidentity/passage-react';
export const RegisterPage: React.FC = () => {
return (
<>
<h1>Example Register Page</h1>
<PassageTheme primaryColor="#ff0000">
<PassageRegister />
</PassageTheme>
</>
);
};Props
| Name | Required | Type | Default Value |
|---|---|---|---|
| bodyFontFamily | No | string | 'Helvetica', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif |
| headerFontFamily | No | string | 'Helvetica', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif |
| containerBackgroundColor | No | string | #fff |
| containerMaxWidth | No | string | 300px |
| containerMargin | No | string | auto |
| containerPadding | No | string | 30px 30px 20px |
| errorColor | No | string | #dd0031 |
| bodyFontSize | No | string | 14px |
| bodyFontWeight | No | string | 400 |
| bodyTextColor | No | string | #000 |
| headerFontSize | No | string | 24px |
| headerFontWeight | No | string | 700 |
| headerTextColor | No | string | #000 |
| anchorTextColor | No | string | #000 |
| anchorHoverColor | No | string | #4d4d4d |
| anchorActiveColor | No | string | #6b6b6b |
| otpInputBackgroundColor | No | string | #fff |
| inputTextColor | No | string | #000 |
| inputBoxBackgroundColor | No | string | #fff |
| inputBoxBorderRadius | No | string | 5px |
| checkboxBackgroundColor | No | string | #000 |
| checkboxTextColor | No | string | #fff |
| controlBorderRadius | No | string | 5px |
| controlBorderColor | No | string | #d7d7d7 |
| controlBorderActiveColor | No | string | #000 |
| buttonFontSize | No | string | 16px |
| buttonFontWeight | No | string | 400 |
| buttonWidth | No | string | 50% |
| primaryButtonBackgroundColor | No | string | #000 |
| primaryButtonTextColor | No | string | #fff |
| primaryButtonBorderRadius | No | string | 5px |
| primaryButtonBorderColor | No | string | #000 |
| primaryButtonBorderWidth | No | string | 0px |
| primaryButtonBorderHoverColor | No | string | #000 |
| primaryButtonTextHoverColor | No | string | #fff |
| primaryButtonBackgroundHoverColor | No | string | #4d4d4d |
| primaryButtonTextActiveColor | No | string | #fff |
| primaryButtonBackgroundActiveColor | No | string | #6b6b6b |
| primaryButtonBorderActiveColor | No | string | #000 |
| secondaryButtonBackgroundColor | No | string | #fff |
| secondaryButtonTextColor | No | string | #000 |
| secondaryButtonBorderRadius | No | string | 5px |
| secondaryButtonBorderColor | No | string | #000 |
| secondaryButtonBorderWidth | No | string | 0px |
| secondaryButtonBorderHoverColor | No | string | #4d4d4d |
| secondaryButtonTextHoverColor | No | string | #000 |
| secondaryButtonBackgroundHoverColor | No | string | #d7d7d7 |
| secondaryButtonTextActiveColor | No | string | #000 |
| secondaryButtonBackgroundActiveColor | No | string | #e0e0e0 |
| secondaryButtonBorderActiveColor | No | string | #6b6b6b |
| tableHeaderBorderColor | No | string | #d7d7d7 |
| tableRowBorderColor | No | string | #e8e8e8 |
| tablePaginatorSelectedColor | No | string | #d7d7d7 |
| tablePaginatorHoverColor | No | string | #e8e8e8 |
| tableDeviceInfoColorDefault | No | string | #6b6b6b |
| tableDeviceIconColorDefault | No | string | #6b6b6b |
| tableActionIconHoverColorDefault | No | string | #6b6b6b |