Add "Customizing using className" sections to the component pages on the Paragon docs site

Description

We are considering introducing component-level documentation for all Paragon components that support the className prop. This would include dedicated sections with usage examples and best practices for customizing styling via className.

Support documentation

This list includes Paragon components that support the className prop, along with multiple usage examples for each. Each section is organized by component name and contains links to some usage instances across Open edX repositories.

ActionRow

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/sub-header/SubHeader.jsx#L26
• https://github.com/openedx/frontend-app-authn/blob/b97f777b6fe926ada4163df710e14edc0ecb63e5/src/login/ChangePasswordPrompt.jsx#L57
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx#L49

Alert

• https://github.com/openedx/frontend-app-account/blob/0af0935e865298e74253816a27d4b89540b23bad/src/account-settings/delete-account/ConfirmationModal.jsx#L49
• https://github.com/openedx/frontend-app-learner-dashboard/blob/5345d2eef2138ead84b8a18f6cbbd7700134111a/src/components/Banner.jsx#L10
• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/discussions/common/AlertBanner.jsx#L43

AlertModal

• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/ConfirmModal.jsx#L16
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/files-and-videos/generic/DeleteConfirmationModal.jsx#L66

Avatar

• https://github.com/openedx/frontend-component-header/blob/1ff9ecaf15f55424e171e79def259c77a6b42a3b/src/studio-header/UserMenu.tsx#L27
• https://github.com/openedx/frontend-app-learner-portal-programs/blob/eabfc97c21f2dc48d0805e7aaaaa4237b67fbde6/src/components/site-header/DesktopHeader.jsx#L72
• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/discussions/post-comments/comments/comment/CommentHeader.jsx#L36

Badge

• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/EditCoursePage/CourseSkills.jsx#L29
• https://github.com/openedx/frontend-enterprise/blob/6bef7547ece2f783895e4ba942ce411ce0c74e2c/packages/catalog-search/src/FacetItem.jsx#L27
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/StatusBadge.jsx#L33

Breadcrumb

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/course-libraries/ReviewTabContent.tsx#L112

Bubble

• https://github.com/openedx/frontend-app-admin-portal/blob/1067f26c2d23d6d48bddfc9a6c8615f6106e6ab2/src/components/Sidebar/IconLink.jsx#L52
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/progress-category-bubbles/ProgressCategoryBubbles.jsx#L7
• https://github.com/openedx/frontend-plugin-notifications/blob/2ac5c155aa268f06d87ce97241f29faa3cbaa3f3/src/Notification/index.jsx#L197

Button

• https://github.com/openedx/frontend-app-profile/blob/10bb6e1b3e83f607974c20c966c13087b8873f04/src/profile/forms/elements/EditButton.jsx#L22
• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/components/SearchInfo.jsx#L24
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/academies/GoToAcademy.jsx#L19

ButtonGroup

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx#L40
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.jsx#L63

Card

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/course-unit/sidebar/index.tsx#L5
• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/PeopleManagement/OrgMemberCard.jsx#L19
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/FilePreview/FileCard.jsx#L14

Chip

• https://github.com/openedx/frontend-app-support-tools/blob/4e29750d0075c547156eb031e1cc017f77229a4a/src/Configuration/Customers/CustomerDetailView/SubscriptionPlanCard.jsx#L49
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/my-career/LevelBars.jsx#L19
• https://github.com/openedx/frontend-app-learner-dashboard/blob/5345d2eef2138ead84b8a18f6cbbd7700134111a/src/containers/MasqueradeBar/index.jsx#L47

Collapsible

• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/Collapsible/index.jsx#L32
• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/FloatingCollapsible/index.tsx#L40
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/CollapsableEditor.jsx#L19

Container

• https://github.com/openedx/frontend-platform/blob/00251d1c54d1666db15753a23f833a21bce9a85b/src/react/ErrorPage.jsx#L39
• https://github.com/openedx/frontend-component-header/blob/1ff9ecaf15f55424e171e79def259c77a6b42a3b/src/studio-header/HeaderBody.tsx#L58
• https://github.com/openedx/frontend-app-learner-record/blob/403098c53969e725b56f6f0d910bbd100d0ce314/src/components/ProgramRecord/ProgramRecord.jsx#L209

DataTable

• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx#L47
• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/TableComponent/index.jsx#L94
• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/BulkOperationDetailsPage/BulkOperationDetails.jsx#L105

Dropdown

• https://github.com/openedx/frontend-base/blob/0c486617372dd39214a2ac33665bc815abee6c17/shell/header/AuthenticatedMenu.tsx#L28

Dropzone

• https://github.com/openedx/studio-frontend/blob/59d2a371f7819fe8baf2635d2df56fbafafa36e2/src/components/AssetsDropZone/index.jsx#L53

Form

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/FormikControl.tsx#L33
• https://github.com/openedx/frontend-app-support-tools/blob/4e29750d0075c547156eb031e1cc017f77229a4a/src/users/UserSearch.jsx#L19
• https://github.com/openedx/frontend-app-authn/blob/b97f777b6fe926ada4163df710e14edc0ecb63e5/src/common-components/FormGroup.jsx#L24

Form.Checkbox

• https://github.com/openedx/frontend-app-authn/blob/b97f777b6fe926ada4163df710e14edc0ecb63e5/src/field-renderer/FieldRenderer.jsx#L102
• https://github.com/openedx/frontend-app-account/blob/0af0935e865298e74253816a27d4b89540b23bad/src/account-settings/certificate-preference/CertificatePreference.jsx#L95
• https://github.com/openedx/frontend-app-authn/blob/b97f777b6fe926ada4163df710e14edc0ecb63e5/src/register/RegistrationFields/HonorCodeField/HonorCode.jsx#L60

Form.Control

• https://github.com/openedx/frontend-app-communications/blob/51b8d7bac140dd814ce6c8ca4cebead022679da3/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx#L284
• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/discussions/posts/post-editor/PostEditor.jsx#L327
• https://github.com/openedx/frontend-app-support-tools/blob/4e29750d0075c547156eb031e1cc017f77229a4a/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx#L101

Form.Control.Feedback

• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/containers/Rubric/RubricFeedback.jsx#L58
• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/CriterionContainer/CriterionFeedback.jsx#L48
• https://github.com/openedx/frontend-app-communications/blob/51b8d7bac140dd814ce6c8ca4cebead022679da3/src/components/bulk-email-tool/bulk-email-form/ScheduleEmailForm.jsx#L69

Form.Group

• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/RenderField/index.jsx#L19
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/FormikControl.tsx#L33
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx#L58

Form.Label

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/FormSwitchGroup.jsx#L30
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/containers/CriterionContainer/ReviewCriterion.jsx#L19
• https://github.com/openedx/frontend-app-enterprise-public-catalog/blob/0be0cc820efb33ddba6282f00d55b57e80e8a1b9/src/components/aiCuration/xpertResultCard/XpertResultCard.jsx#L148

Form.Radio

• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/discussions/learners/learner/LearnerFilterBar.jsx#L34
• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/CriterionContainer/RadioCriterion.jsx#L32
• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/learner-credit-management/invite-modal/InviteModalContent.jsx#L132

Form.Switch

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/editors/sharedComponents/SelectionModal/SearchSort.jsx#L105
• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/SidePanes/CatalogInclusionPane.jsx#L61
• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/learner-credit-management/members-tab/MembersTableSwitchFilter.jsx#L12

FullscreenModal

• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/BulkOperationDetailsPage/BulkOperationDetails.jsx#L130
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/pages-and-resources/discussions/DiscussionsSettings.jsx#L65
• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/PeopleManagement/CreateGroupModal.tsx#L133

Hyperlink

• https://github.com/openedx/frontend-base/blob/0c486617372dd39214a2ac33665bc815abee6c17/shell/Logo.tsx#L23
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/containers/ListView/ListViewBreadcrumb.jsx#L19
• https://github.com/openedx/studio-frontend/blob/59d2a371f7819fe8baf2635d2df56fbafafa36e2/src/components/CourseOutlineStatus/index.jsx#L150

Icon

• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/components/SearchInfo.jsx#L23
• https://github.com/openedx/frontend-app-gradebook/blob/4a221c9caa259664e40ec8efae9111c03d38a88d/src/components/GradesView/SpinnerIcon.jsx#L16
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/containers/ListView/ListViewBreadcrumb.jsx#L20

IconButton

• https://github.com/openedx/frontend-app-gradebook/blob/4a221c9caa259664e40ec8efae9111c03d38a88d/src/components/GradebookFilters/index.jsx#L32
• https://github.com/openedx/frontend-app-learner-record/blob/403098c53969e725b56f6f0d910bbd100d0ce314/src/components/ProgramRecord/ProgramRecordActions.jsx#L251
• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx#L49

Image

• https://github.com/openedx/frontend-app-enterprise-public-catalog/blob/0be0cc820efb33ddba6282f00d55b57e80e8a1b9/src/components/hero/Hero.jsx#L17
• https://github.com/openedx/frontend-app-authn/blob/b97f777b6fe926ada4163df710e14edc0ecb63e5/src/base-container/components/image-layout/SmallLayout.jsx#L18
• https://github.com/openedx/frontend-enterprise/blob/6bef7547ece2f783895e4ba942ce411ce0c74e2c/packages/catalog-search/src/PrequerySearchSuggestionItem.jsx#L15

Layout

• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/Rubric/index.jsx#L24

MailtoLink

• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/program-progress/CouponCodesWarningModal.jsx#L43
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/dashboard/sidebar/SupportInformation.jsx#L65
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/program-progress/SubscriptionExpiringWarningModal.jsx#L25

MarketingModal

• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.jsx#L20

Menu

• https://github.com/openedx/frontend-component-header/blob/1ff9ecaf15f55424e171e79def259c77a6b42a3b/src/mobile-header/MobileHeader.jsx#L59
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/search-manager/FilterByTags.tsx#L208
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/site-header/SiteHeader.jsx#L47

MenuItem

• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/learner-credit-management/FlexGroupDropdown.jsx#L17

ModalDialog

• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/courseware/course/sequence/Unit/ContentIFrame.jsx#L78
• https://github.com/openedx/frontend-app-support-tools/blob/4e29750d0075c547156eb031e1cc017f77229a4a/src/users/VerifiedName.jsx#L162
• https://github.com/openedx/frontend-app-enterprise-public-catalog/blob/0be0cc820efb33ddba6282f00d55b57e80e8a1b9/src/components/catalogInfoModal/CatalogInfoModal.jsx#L54

Nav

• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/discussions/navigation/navigation-bar/NavigationBar.jsx#L40

Navbar

• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/Header/index.jsx#L89
• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/ProgressBar/index.jsx#L80

Pagination

• https://github.com/openedx/frontend-app-learner-dashboard/blob/5345d2eef2138ead84b8a18f6cbbd7700134111a/src/containers/CoursesPanel/CourseList/index.jsx#L29
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/studio-home/tabs-section/courses-tab/index.tsx#L161
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/studio-home/tabs-section/libraries-v2-tab/index.tsx#L130

Popover

• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/FilePreview/FileInfo.jsx#L24
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/clipboard/paste-component/components/PopoverContent.tsx#L23
• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/InfoPopover/index.jsx#L30

ProgressBar

• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/ModalContainer.jsx#L51

Scrollable

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/library-authoring/generic/manage-collections/ManageCollections.tsx#L67

SearchField

• https://github.com/openedx/frontend-enterprise/blob/6bef7547ece2f783895e4ba942ce411ce0c74e2c/packages/catalog-search/src/SearchBox.jsx#L169
• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx#L15

SelectMenu

• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/BulkOperations/index.jsx#L132
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/editors/sharedComponents/SelectionModal/SearchSort.jsx#L60

SelectableBox

• https://github.com/openedx/frontend-app-admin-portal/blob/67c259bbb788856d760997ff3b841fd37ac0a50a/src/components/settings/SettingsLMSTab/LMSSelectorPage.tsx#L46
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx#L23

Skeleton

• https://github.com/openedx/frontend-app-authn/blob/b97f777b6fe926ada4163df710e14edc0ecb63e5/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx#L22
• https://github.com/openedx/frontend-app-ora/blob/aff22fb250bc0550b06fc84805343a0a4502729b/src/components/ModalActions/index.jsx#L29
• https://github.com/openedx/frontend-app-enterprise-public-catalog/blob/0be0cc820efb33ddba6282f00d55b57e80e8a1b9/src/components/catalogSearchResults/CatalogSearchResults.jsx#L388

Spinner

• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/LoadingSpinner/index.jsx#L10
• https://github.com/openedx/frontend-app-account/blob/0af0935e865298e74253816a27d4b89540b23bad/src/notification-preferences/NotificationPreferences.jsx#L69
• https://github.com/openedx/frontend-app-ora-grading/blob/266589bca60d9286fe8550e211ca263552b3565a/src/components/FilePreview/Banners/LoadingBanner.jsx#L7

Stack

• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/site-header/SiteHeaderLogos.jsx#L31
• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx#L25
• https://github.com/openedx/frontend-app-publisher/blob/973e014f6f4f15be2c9ef3f9bf58a196c2553f82/src/components/BulkOperationDetailsPage/BulkOperationDetails.jsx#L112

StatefulButton

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/search-modal/SearchResults.tsx#L36
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/my-career/SearchJobRole.jsx#L136
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/library-authoring/generic/manage-collections/ManageCollections.tsx#L101

Stepper

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/pages-and-resources/discussions/DiscussionsSettings.jsx#L99

Sticky

• https://github.com/openedx/frontend-plugin-aspects/blob/2c954021c4ba437fc6b8d7c3110ed283012e5105/src/components/AspectsSidebar/index.tsx#L92

Tabs

• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/course-tabs/CourseTabsNavigation.jsx#L22
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/library-authoring/collections/CollectionInfo.tsx#L68
• https://github.com/openedx/frontend-app-discussions/blob/3e1c95319a29a54b0628cc4f7c273a4f473a452d/src/components/NavigationBar/CourseTabsNavigation.jsx#L20

Toast

• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/generic/processing-notification/index.jsx#L11

Tooltip

• https://github.com/openedx/frontend-app-account/blob/0af0935e865298e74253816a27d4b89540b23bad/src/account-settings/EmailField.jsx#L167
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/microlearning/BetaBadge.jsx#L11
• https://github.com/openedx/frontend-app-authoring/blob/720b591add5da535c9ef4565e0d6f48795c607b2/src/optimizer-page/scan-results/CustomIcon.jsx#L22

TransitionReplace

• https://github.com/openedx/frontend-app-account/blob/0af0935e865298e74253816a27d4b89540b23bad/src/account-settings/SwitchContent.jsx#L44
• https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/e56f6c388b4107501e62422b03ebe7ea1cb0f48a/src/components/my-career/VisualizeCareer.jsx#L67
• https://github.com/openedx/frontend-app-learning/blob/c760bc479b97d987dd03c753920b73934676ad41/src/course-home/outline-tab/widgets/WelcomeMessage.jsx#L76

Additional context

• https://github.com/openedx/paragon/pull/3735#issuecomment-3276451489
• https://openedx.atlassian.net/wiki/spaces/BPL/pages/5160468519/2025-08-13+Meeting+notes

Start by reviewing the component pages on the Paragon docs site and the support-documentation list in this issue, then identify how existing usage sections are structured. Done means adding a "Customizing using className" section with examples and best practices to every listed component page that supports the prop.