Next generation UI components

Learn how to use the next generation of UI components.

The Stripe Apps SDK version 9.2.0 and later supports a secondary entry point ( @the relevant part of the product) that gives you early access to the next generation of UI components. These components represent updates that will eventually ship in the next major SDK release.

Note

Although the name next refers to the next major version of the SDK, you don’t need to install anything because both ui and ui/next ship in the same @stripe/ui-extension-sdk package.

Motivation

Our main motivation for releasing updates in this manner is to avoid breaking changes. Although we don’t have an immediate plan for a major release, some UI components (for example, BarChart and LineChart) need their API redesigned to support new capabilities. Releasing components with an updated API under the same import path ( @the relevant part of the product) would be a breaking change.

Instead of holding back improvements or forcing a major version release, we added the @the relevant part of the product entry point. Providing a separate entry point enables you to adopt new components incrementally without breaking your existing code or having to resolve naming collisions.

Stability

ui/next components are production-ready, which means they receive bug fixes. Their APIs are frozen within the current major version and won’t change in minor SDK releases.

These components aren’t “experimental” in nature. The next label means these components are candidates for the next major release, not that they’re unstable.

What happens at the next major release

When the next major SDK release happens and you upgrade your app to use, for example, SDK v10 instead of v9, import {BarChart} from '@the relevant part of the product' returns what @the relevant part of the product returned during v9. The ui/next entry point itself is repopulated with the next batch of changes – it no longer points to the same components as it did before the upgrade.

A major SDK release means:

1. Code that was never migrated from the old ui versions breaks.
2. Code that imports UI components from ui/next needs to update its import path to ui . Replace @the relevant part of the product with @the relevant part of the product to update the import path. You don’t need to make any prop or usage changes.