Styling your Auth UI Components with CSS

You can easily customize the appearance of your Universal Auth UI components by targeting their CSS class names. All Universal components include class names starting with the universal- prefix to make styling simple and predictable.

How to Style Components Copied

1. Inspect the Element:

   In your browser, right-click the Auth UI component you want to style and select Inspect.

2. Find the Class Name:

   Look for a class name that starts with universal-.

3. Write Your Styles:

   In your CSS, target this class name and add your custom styles.

Example

To make cards in the Credentials Manager have square corners, add the following CSS:

.universal-ConnectorListItem-root {
  border-radius: 0;
}

That’s it! Your style will automatically apply to all instances of this component.