Switch branches/tags
abtest/resume-gsuite-upsell-discount-test add/activity-loading-filterbar add/activity-log-aggregate-events add/add-g-suite-first-user-field-prepopulate add/address-block add/atomic-transfer-data-layer add/billing-info-to-checkout add/bulk-module-management add/call-endpoint-on-nudge-click add/checklist-tests add/color-studio-package add/color-theme-for-devdocs-examples add/community-events add/concierge-session-in-purchases add/connect-site-topic-redux-state add/contact-form-tranform-from add/contact-info add/ebanx-installments add/ecommerce-signup-updates add/error-no-noticeid add/eslint-packages add/export-media add/facebook-profile-connection-failure-events add/feature-flag-for-laser-black add/fetch-language-revision-map add/fix-filterbar-return-to-first-page add/form-fields-comprehensive-validation-examples add/google-ads-gtag-cleanup add/google-photos-date-filter add/google-photos-folder-dropdown add/gsuite-business add/gutenberg-contextual-help-actions add/gutenberg-e2e add/gutenberg-simple-payments-block-media-library-integration add/happychat-client-events add/happychat-client-to-mobile add/happychat-panel add/i18n-repo-take-two add/import-signup-auto-continue add/import-url-to-ays add/inline-help-first-task add/is-ecommerce-plan-user-selector add/jetpack-asset-CDN-setting-toggle add/jetpack-importing add/jetpack-module-override add/jetpack-setup-skeleton add/krackenreboot327-abtest add/let-jetpack-use-geolocation add/localized-support-urls-inline-contextual-help add/manage-u2f-keys add/mobile-app-attribution-links add/nested-sidebar add/oct-promo-email-nudge-and-banner add/onboarding-site-style-step add/onboarding-step-site-information-component add/onboarding-step-site-information add/package-photon add/payment-type-sofort add/pending-payment-blocker add/personality-to-signup-color add/personality-to-signup-layout add/personality-to-signup-testimonials add/personality-to-signup add/phone-block add/phone-to-concierge add/plans-page-add-renewing-upsell-banner add/query-component add/recipes-block add/remembered-posts add/return-site-event add/rewind-partial-restores add/rewind/clone-site-events add/section-name-to-body add/select-dropdown-add-disabled-state add/separate-login add/settings-sub-sidebar add/signup-import-landing-handler--pass-url-to-import-section--skip-unhydrated add/signup-import-landing-handler--validation--confirmation-step add/signup-import-new-site-param add/site-impoter-engine-6 add/small-badge add/smallipop-popups-to-reader add/stats/abtest/builder-referral add/store-referrers-2nd-try add/store-return-shipping-labels add/store-stats-referrer-conv-widget add/store-tracking-number-copy-to-clipboard add/subscription-block-customization-options add/tiled-grid-package add/tracks-event-for-removed-action add/tracks-events-for-email-task-in-onboarding-checklist add/u2f-login-ui add/user-purchases-data-layer add/view-site-happychat-updates add/wcs-shipping-classes-field add/with-woo-commerce-site add/woocommerce-shipping-classes-ui atavist/add-hello-test atavist/all-blocks atavist/baseline atavist/block-structure atavist/chart-block atavist/map-block-api-key-integration atavist/map-block-center-point atavist/map-block-themepicker-v2 atavist/map-block-v2 atavist/map-block atavist/navigation-flag atavist/simplified-structure atavist/starter-block atavist/title-design contact-form-change-submit-text earn-section enable/happychat-client-panel enhance/remove-page-refresh-after-changing-language experiment/add-dummy-redux-counter feature/blogger-plan/block-domain-transfer feature/blogger-plan/cancel-purchase-form feature/blogger-plan/constants feature/blogger-plan/domain-search-p2 feature/blogger-plan/domain-search feature/blogger-plan/prepare-plans-pages feature/color-refresh-2019 feature/monthly-business-plan-implement feature/monthly-business-plan-tests feature/monthly-business-plan fix/activity-log-double-ellipsis fix/calypsoify-plugin-link fix/change-store-theme fix/checklist/disable-guided-tour-for-gutenberg fix/checkout-tests-warnings fix/current-plan-error fix/editor-scroll-jump fix/editor-slug-invalid-chars-ays fix/emergent-wpcom-error-handling fix/external-media-limits fix/google-apps-card-error-and-add-user-style fix/google-my-business-fetch-services fix/google-photos-recent-limit fix/gutenlypso-page-template-on-page-attributes-panel fix/i18n-schedule-concierge-session fix/imorter-wix-site-preview-flicker fix/improve-plans-features-header-performance-in-signup fix/inline-articles-buttons-on-small-screens fix/jetpack-double-cta fix/libuser/checkout-thank-you fix/map-persisted-map-center fix/media-library-disable-video-icon fix/nan-check-in-simple-payments fix/postschedule-select-button-22966 fix/reader/poll-fm-polls fix/reader/update-post-normalizer-polls fix/rewind/awaiting-credentials fix/route-mismatch fix/signup-import-site-validation fix/signup-logo-animation fix/simple-payments-reusable fix/site-importer-console-errors fix/site-info-gradient-overflow fix/translation-function-typo fix/videos-poster-data-warning fix/wcs-1274-order-tracking-settings fix/wrong-pathname fix/1170-handle-failed-downloads fix/7969-meta-description-notice fix/20250/simple-payments-dialog-upgrade-nudge fix/26051-purchase-confirmation-widow fix/27051-acitivity-log-doc-links fix/28818-g7g-simplepay-edit-currencyformat fix/29550-gutenlypso-seo-preview gb/sketch-a-doodle gutenpack-subscription improve/chart-component-performance-2 improve/chart-component-performance-3 improve/google-my-business-chart-tooltip-screentext improve/language-js-as-utf8 jblz-patch-1 login_url mailchimp-gutenberg-block mailchimp master nudge-a-palooza/wrap-up-landing-pages nudge-a-palooza/wrap-up-sidebar-banner-test nudge-a-palooza/wrap-up-themes-nudges-updates packages/extract-http-data perf/move-cart-store-out-of-build-chunk prettify/account-recovery publish/try-again refactor/async-load-charts refactor/stats-chart-request-parallelization-redo refactor/stats-chart-tabs-derived-state refactor/stats-chart-tabs refactor/stats-post-summary remove/accent-in-reader remove/aol-tracking-pixel remove/boot-empty-layout remove/dispatch-converter-2 remove/document-head-unread-count remove/domains-step remove/ecommerce-prod remove/global-notice-block remove/gpack-relatedposts-center-content remove/happychat-current-message remove/happychat-redux-minimize remove/happychat-timeline remove/jetpack-plugin-on-pages remove/popover-menu-item-compact-style rename/preset-o2-to-p2 renovate/babel-monorepo renovate/creditcards-3.x renovate/css-loader-2.x renovate/d3-array-2.x renovate/enzyme-3.x renovate/enzyme-to-json-3.x renovate/husky-1.x renovate/immutability-helper-2.x renovate/major-calypso-packages renovate/node-10.x renovate/react-redux-6.x renovate/react-transition-group-2.x renovate/redux-form-8.x renovate/resize-observer-polyfill-1.x renovate/sinon-7.x renovate/socket.io-packages renovate/striptags-3.x renovate/superagent-4.x renovate/tinymce-4.x renovate/webpack-4.x revert-27174-revert-26006-fix/stats-referrers-layout revert-28603-update/login-signup-redirect-for-crowdsignal revert-28620-remove/private-by-default revert-28752-update/blocks-svg-accessibility revert/remote-login stash/tax-on-plans-screen subscription-color-picker-redo test/full-suite-reruns testing/signup-and-hash-branches testing/webpack-build-timestamping-desktop-tests testing/webpack-build-versioning tests/add-editor-path-tests try/add-new-site-popover try/allow-facebook-profile-publish try/async-load-inline-help try/async-load-so-many-things try/async-payments try/babel-plugin-i18n-calypso try/chart try/circle-massive-parallel try/demonstrate-fileloader-encoding-problem try/desktop-improve-app-preferences-experience try/devdocs-example-embeds try/docker/explicity-copy try/e2e-worker-updates try/ebanx-fallback-to-paygate try/es-next-uglification try/flexible-bottom-right-buttons--bu try/flexible-bottom-right-buttons--env-badge try/flexible-bottom-right-buttons try/giphy-search-field-on-block try/giphy try/gutenberg-publish try/gutenblock-build-external-dependencies try/happychat-client try/hoist-lerna try/jetpack-business-hours-block try/jetpack-importing-through-wpcom try/jpc-request-site-action try/live-preview try/load-calypso-offline try/map-all+loader try/map-all try/map-block-mapbox-css try/map-block-mapbox try/map-key try/map try/marketing-checklist try/massiver-circleci try/material-hacky-checkbox try/memberships try/move-nps-survey-to-data-layer try/muriel-in-devdocs try/new-colors try/onboarding/save-last-known-flow-in-progress-items try/pbd-for-import-signup-flow try/portenblocks try/private-by-default try/pwa try/react-material-wrapper try/recovery-lookup-handlers try/redux-cart try/replace-gutencomponents-with-calypsomponents try/replace-oauth-login-for-desktop try/rewind-staging try/sdk-mini-css try/show-loading-signup try/signup-business-site-setup try/simple-payment-block try/simple-site-topic try/simplify-add-new-site try/slideshow try/split-builds-by-ua try/split-posts-pages-section try/store-services-visual-box-packing-steps try/store_clone_destination try/suggestion-search-limit try/table-driven-cart-total try/unified-importer-example try/updated-signup-steps try/user-first-signup-test try/wp-data-calypso-plugin try/wp-data-calypso-rewrite try/wp-data-dynamic-state tweak/webpack-build-timestamping update/activity-log-fetches-plugin-updates update/activity-upgrade-nudge update/activitylog-filterbar-in-production update/add-button-disabled-props-to-action-card update/add-plugin-link update/add-site-id-to-request-concierge-initial update/always-set-locale-in-login-route update/analytics-environment-super-props update/async-loader-iteration update/blogger-plan-cosmetic-updates update/blogger-plan/domain-icon update/bring-hint-data-to-site-topic update/browser-support update/calypso-cart-unrecognized-payment-method-event update/calypsoify-rollout-50 update/card-name-labels update/checklist-redux-janitorial update/circle-parallelism update/classic-bright/button update/clear-cart-before-url-add update/comments-bulk-status update/concierge-session-messaging update/conclude-showPlanCreditsApplied update/conditionally-register-publicize-plugin update/consolidate-site-topic-submission update/contact-form-block-email-placeholder update/coupon-field-more-visible update/credit-card-list-item-into-reusable-component update/credit-card-lists-to-use-credit-card-component update/data-layer-site-settings update/datalayer/mute-conversation update/datalayer/posts-comments-write-reply update/datalayer/request-recommended-sites-fromApi update/desktop-user update/domain-mapping-price-formatting update/domain-transfer-price-formatting update/ebanx-prevent-0-street-number update/ecommerce-in-components update/ecommerce-thank-you update/email-support-desc update/enable-checklist-all-envs update/enable-nudge-a-palooza-in-wp-calypso update/extract-happychat-connection update/fix-jetpack-connect-nux-css update/fix-plan-preview-nudge-underline update/fix-subscription-length-picker update/form-block-icon-color update/g7g-tg-consistent-layout update/give-options-when-customer-has-1-1-appointment update/gsuite-availability update/gsuite-country-blocks update/gutenber-block-with-jetpack-prefix update/gutenberg-jetpack-shortlinks-copy-button update/gutenberg-packages update/gutenberg-publicize-use-dashicon update/gutenberg-simplepay-tofromapi update/gutenpack-simplepayments-filters update/hide-checklist-on-secondary-views update/holiday-support-closures update/i18n-calypso-cleanup update/i18n-support-click-through update/i18n-use-babel-plugins-for-string-extraction update/import-done-link-to-checklist update/import-flow--do-import update/importer-store-redux--make-actions-hybrid-2 update/importer-store-redux--make-actions-hybrid update/importer-store-redux update/imports-use-ui-state-to-show-selected-pane--remove-local-id update/imports-use-ui-state-to-show-selected-pane--x--x update/improve-infinite-list-perf update/improve-uploading-plugin-notice update/inline-help-extra-UI update/inline-help/add-support-articles update/inline-help/use-happychat-client update/jetpack-blocks-68 update/jetpack-connect-page-localization update/jetpack-preset-block.json update/jetpack-thank-you-card update/jetpack-wp-data update/jpc-sso-shared-error update/jpc-user-already-connected-error-use-middleware update/mailchimp-choose-none update/main-scss update/map-block-fix-visibility update/map-block-use-local-date-in-view update/map-cleanup update/me-purchases-data-layer update/me/billing-history/add-tax update/me/purchases/add-tax update/media-library-accessibility update/media-library-list-loading-placeholders update/media-library-moving-to-redux update/memberships-one-time-payment update/migrate-media-styles update/migrate-users-store-2 update/minor-fixes-on-concierge-upsell-page update/move-importers-upload-state-to-redux update/move-krackenm327-from-domains-add-to-domains-start update/no-anchored-sdk-paths update/no-hardcoded-free-sites-selector update/no-hardcoded-site-id-selector update/no-more-jazzy-orange update/no-site-dep-purchase__backup update/notifications-2-1-10 update/onboarding-dev-plan-copy update/onboarding-dev-site-info-copy update/onboarding-dev-site-topic-copy update/onboarding-dev-site-type-copy update/onboarding-dev-user-copy update/onboarding-redirect-to-preview update/pass-nux-data-to-happy-chat update/phone-validation update/plans-domain-credit-wording update/plans-features-taglines update/plans-features update/popular-plan update/post-editor-styles update/post-item-form-checkbox update/prettier-notifications update/private-by-defauly update/query-user-purchases update/reader-streams-refactor-pending-items update/recent-post-views-data update/refactor-notifications-toggle-state--redux update/remove-domains-step-from-onboarding-flow update/remove-ecommerce-plan update/replace-anchors-with-buttons-on-transfer-screen update/root-deps-to-dev-deps update/sass-formatting update/sdk-add-date-to-bundles update/sdk-gutenberg-use-editor-again update/set-default-plans-tab update/shallow-gp-checkout update/show-discount-separately-in-checkout update/show-taxes-on-checkout-cart update/show-usd-symbol update/signup-dependencies update/signup-header-class update/signup/plans-tabs-copy update/signup/plans-tabs-split update/simple-payments-block-formik update/site-indicator-links-to-activity-log update/site-mockup update/site-topic-step-to-use-verticals-api update/site-type update/stats-list-styles update/store-email-settings-data-layer update/store-product-reviews-api update/subscription-length-picker-manual-renew update/test-to-send-users-to-concierge-upsell-page-2 update/tiled-gallery-margins update/tiled-gallery-remove-dead-code update/todo-block-fixes update/traffic-settings-subsection-redirect update/upgrade-credits-copy update/upsell-page-design update/use-flow-destination update/video-press-card-copy update/vr-block-make-editable-take-2 update/woocomerce-shipping-zones-selectors update/28202-general-changes-primary-domain-explanation web-payment-fix-country-zip wip/guided-tours-refactor
Nothing to show
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
accordion
action-card
action-panel
animate
async-gridicons
async-load
auto-direction
back-button
badge
banner
bulk-select
button-group
button
card-heading
card
chart
checklist
clipboard-button-input
close-on-escape
community-translator
count
credit-card-form-fields
credit-card
d3-base
data
date-picker
dialog
diff-viewer
domains
draggable
drop-zone
ellipsis-menu
email-verification
embed-container
emojify
empty-component
empty-content
environment-badge
external-link
faq
feature-example
file-picker
first-view
focusable
foldable-card
formatted-date
formatted-header
forms
gallery-shortcode
gauge
global-notices
gravatar-caterpillar
gravatar
happiness-support
happychat
head
header-button
header-cake
hr-with-text
image-preloader
image
infinite-list
infinite-scroll
info-popover
inline-support-link
input-chrono
jetpack-colophon
jetpack-header
jetpack-logo
keyed-suggestions
language-picker
legend-item
line-chart
list-end
locale-suggestions
logged-out-form
main
marked-lines
marketing-survey/cancel-purchase-form
mini-site-preview
mobile-back-to-sidebar
notes-formatted-block
notice
null-component
pagination
payment-country-select
payment-logo
phone-input
pie-chart
plans
podcast-indicator
popover
post-excerpt
post-schedule
progress-bar
pulsing-dot
purchase-detail
rating
readme-viewer
redirect-when-logged-in
redux-forms
related-posts
remove-button
resizable-iframe
rewind-credentials-form
ribbon
root-child
screen-reader-text
search-card
search-sites
search
section-header
section-nav
segmented-control
select-dropdown
select/docs
seo-preview-pane
seo
share-button
share
sidebar-navigation
signup-site-title
site-selector-modal
site-selector
site-title-example
site-title
site-users-fetcher
sites-dropdown
sites-popover
social-buttons
social-icons
sorted-grid
spinner-button
spinner-line
spinner
split-button
stat-update-indicator
sticky-panel
sub-masterbar-nav
suggestion-search
suggestions
support-info
text-diff
textarea-autosize
thank-you-card
theme
themes-list
tile-grid
time-since
timezone
tinymce
title-format-editor
token-field
tooltip
track-input-changes
translatable
translator-invite
upgrades
user
version
vertical-menu
vertical-nav
virtual-list
web-preview
webpack-build-monitor
with-localized-moment
wizard-progress-bar
wizard
wordpress-logo
wordpress-wordmark
wpadmin-auto-login
README.md

README.md

Components

Components are React components used for composing the UI of Calypso.

They come with their own styles defined according to our guidelines, and manually loaded from the styles assets folder. Structuring the user interface with these building blocks has several benefits — like allowing to quickly construct a view that is visually consistent with the rest of Calypso, and easier to iterate on.

Many of these components can be seen in action in our DevDocs: UI Components section.

Read documentation on components for more in-depth information.