Components
Platform-owned components. A theme places them and styles around them, but does not re-implement them — these are the pieces that must behave identically on every theme.
AddressBookclient
AddressBook()
list + add + edit + delete addresses for the signed-in customer.
packages/theme-sdk/src/components/AddressBook.tsx
CheckoutFormclient
CheckoutForm({ storeId, listingId, listingTitle, mode, scheduledAt, initialEmail = "", initialName = "", initialPhone = "", buildPendingUrl, themeColor, }: CheckoutFormProps)
drop-in checkout for themes that don't want to design their own checkout page.
packages/theme-sdk/src/components/CheckoutForm.tsx
EditableFieldclient
EditableField({ path, defaultValue, }: EditableFieldProps): JSX.Element
render an editable text value with live-preview support.
packages/theme-sdk/src/components/EditableField.tsx
EditableImageclient
EditableImage({ path, defaultSrc, alt, aspectRatio, width, height, className, style, ...rest }: EditableImageProps): JSX.Element
render an editable image with live-preview support.
packages/theme-sdk/src/components/EditableImage.tsx
EditableListclient
subscribe to a `list`-typed editable field and hand the live array to a render prop.
packages/theme-sdk/src/components/EditableList.tsx
EditableRichTextclient
EditableRichText({ path, defaultValue, className, style, }: EditableRichTextProps): JSX.Element
render an editable rich-text (HTML) value with live-preview support.
packages/theme-sdk/src/components/EditableRichText.tsx
LoginFormclient
LoginForm({ initialEmail = "", onSignedIn }: LoginFormProps)
email OTP sign-in via Supabase auth.
packages/theme-sdk/src/components/LoginForm.tsx
OrderListclient
OrderList({ buildOrderUrl = (n)
drop-in customer-orders listing.
packages/theme-sdk/src/components/OrderList.tsx
PreviewBridgeclient
PreviewBridge({ editorOrigin }: PreviewBridgeProps): null
postMessage bridge + read-only canvas guard for the editor host.
packages/theme-sdk/src/components/PreviewBridge.tsx
RazorpayPaymentclient
RazorpayPayment({ payload, prefill, buildPendingUrl, themeColor, recurring, onOpen, onDismiss, }: RazorpayPaymentProps): null
opens Razorpay's checkout modal with the config from `useCheckoutInit`.
packages/theme-sdk/src/components/RazorpayPayment.tsx
SubscriptionCardclient
SubscriptionCard({ subscription, onChange, }: SubscriptionCardProps)
one subscription with Skip + Cancel actions.
packages/theme-sdk/src/components/SubscriptionCard.tsx