diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
index 2994f676375..fc37648ee87 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
@@ -2,6 +2,7 @@ import type { CommerceCheckoutResource } from '@clerk/types';
 
 import { useCheckoutContext } from '../../contexts';
 import { Box, Button, Col, Flex, Icon, Text } from '../../customizables';
+import { LineItems } from '../../elements';
 import { Check } from '../../icons';
 import type { ThemableCssProp } from '../../styledSystem';
 
@@ -49,45 +50,33 @@ export const CheckoutComplete = ({ checkout, sx }: { checkout: CommerceCheckoutR
           borderTopColor: t.colors.$neutralAlpha100,
         })}
       >
-        <Flex
-          align='baseline'
-          justify='between'
-          gap={2}
-        >
-          <Text sx={t => ({ fontWeight: t.fontWeights.$medium })}>Total paid</Text>
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
-            {checkout.invoice
-              ? `${checkout.invoice.totals.grandTotal.currencySymbol}${checkout.invoice.totals.grandTotal.amountFormatted}`
-              : '–'}
-          </Text>
-        </Flex>
-        <Flex
-          align='baseline'
-          justify='between'
-          gap={2}
-        >
-          <Text sx={t => ({ fontWeight: t.fontWeights.$medium })}>Payment method</Text>
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
-            {checkout.paymentSource ? `${checkout.paymentSource.cardType} ⋯ ${checkout.paymentSource.last4}` : '–'}
-          </Text>
-        </Flex>
-        <Flex
-          align='baseline'
-          justify='between'
-          gap={2}
-        >
-          <Text sx={t => ({ fontWeight: t.fontWeights.$medium })}>Invoice ID</Text>
-          <Text
-            colorScheme='secondary'
-            sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}
-          >
-            {checkout.invoice ? checkout.invoice.id : '–'}
-          </Text>
-        </Flex>
+        <LineItems.Root>
+          <LineItems.Group variant='secondary'>
+            <LineItems.Title>Total paid</LineItems.Title>
+            <LineItems.Description>
+              {checkout.invoice
+                ? `${checkout.invoice.totals.grandTotal.currencySymbol}${checkout.invoice.totals.grandTotal.amountFormatted}`
+                : '–'}
+            </LineItems.Description>
+          </LineItems.Group>
+          <LineItems.Group variant='secondary'>
+            <LineItems.Title>Payment method</LineItems.Title>
+            <LineItems.Description>
+              {checkout.invoice
+                ? `${checkout.invoice.totals.grandTotal.currencySymbol}${checkout.invoice.totals.grandTotal.amountFormatted}`
+                : '–'}
+            </LineItems.Description>
+          </LineItems.Group>
+          <LineItems.Group variant='tertiary'>
+            <LineItems.Title>Invoice ID</LineItems.Title>
+            <LineItems.Description>{checkout.invoice ? checkout.invoice.id : '–'}</LineItems.Description>
+          </LineItems.Group>
+        </LineItems.Root>
         <Button
-          colorScheme={'light'}
-          size='sm'
+          colorScheme='secondary'
+          variant='bordered'
           hasArrow
+          size='sm'
           textVariant={'buttonSmall'}
           sx={t => ({
             width: '100%',
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
index 940d9ab14fb..485e0d04331 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
@@ -5,7 +5,8 @@ import { loadStripe } from '@stripe/stripe-js';
 import { useEffect, useRef } from 'react';
 
 import { useCheckoutContext } from '../../contexts';
-import { Alert, Box, Button, Col, Flex, Heading, Icon, Spinner, Text } from '../../customizables';
+import { Alert, Box, Button, Col, Flex, Heading, Icon, Spinner } from '../../customizables';
+import { LineItems } from '../../elements';
 import { useCheckout } from '../../hooks';
 import { Close } from '../../icons';
 import { CheckoutComplete } from './CheckoutComplete';
@@ -77,8 +78,8 @@ export const CheckoutPage = (props: __experimental_CheckoutProps) => {
             <CheckoutPlanRows
               plan={checkout.plan}
               planPeriod={checkout.planPeriod}
+              totals={checkout.totals}
             />
-            <CheckoutTotalsRows totals={checkout.totals} />
           </Col>
 
           <Elements
@@ -130,95 +131,49 @@ const CheckoutHeader = ({ title }: { title: string }) => {
   );
 };
 
-const CheckoutPlanRows = ({ plan, planPeriod }: { plan: CommercePlanResource; planPeriod: string }) => {
+const CheckoutPlanRows = ({
+  plan,
+  planPeriod,
+  totals,
+}: {
+  plan: CommercePlanResource;
+  planPeriod: string;
+  totals: CommerceTotals;
+}) => {
   return (
-    <Col
-      gap={3}
-      align='stretch'
-      sx={t => ({
-        paddingBlockEnd: t.space.$3,
-        borderBottomWidth: t.borderWidths.$normal,
-        borderBottomStyle: t.borderStyles.$solid,
-        borderBottomColor: t.colors.$neutralAlpha100,
-      })}
-    >
-      <Flex
-        align='baseline'
-        justify='between'
-        gap={2}
-      >
-        <Box>
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>{plan.name}</Text>
-        </Box>
-        <Col align='end'>
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
-            {plan.currencySymbol}
-            {planPeriod === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}
-          </Text>
-          <Text
-            colorScheme='secondary'
-            variant='caption'
-            sx={t => ({ lineHeight: t.lineHeights.$normal })}
-          >
-            per month{planPeriod === 'annual' ? ', times 12 months' : ''}
-          </Text>
-        </Col>
-      </Flex>
-    </Col>
-  );
-};
-
-const CheckoutTotalsRows = ({ totals }: { totals: CommerceTotals }) => {
-  return (
-    <>
-      <Col
-        gap={3}
-        align='stretch'
-        sx={t => ({
-          paddingBlockEnd: t.space.$3,
-          borderBottomWidth: t.borderWidths.$normal,
-          borderBottomStyle: t.borderStyles.$solid,
-          borderBottomColor: t.colors.$neutralAlpha100,
-          color: t.colors.$colorTextSecondary,
-        })}
-      >
-        <Flex
-          align='baseline'
-          justify='between'
-          gap={2}
-        >
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>Subtotal</Text>
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
-            {totals.subtotal.currencySymbol}
-            {totals.subtotal.amountFormatted}
-          </Text>
-        </Flex>
-        <Flex
-          align='baseline'
-          justify='between'
-          gap={2}
-        >
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>Tax</Text>
-          <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
-            {totals.taxTotal.currencySymbol}
-            {totals.taxTotal.amountFormatted}
-          </Text>
-        </Flex>
-      </Col>
-      <Flex
-        align='baseline'
-        justify='between'
-        gap={2}
+    <LineItems.Root>
+      <LineItems.Group>
+        <LineItems.Title>{plan.name}</LineItems.Title>
+        <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}>
+          {plan.currencySymbol}
+          {planPeriod === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}
+        </LineItems.Description>
+      </LineItems.Group>
+      <LineItems.Group
+        borderTop
+        variant='tertiary'
       >
-        <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
-          Total{totals.totalDueNow ? ' Due Today' : ''}
-        </Text>
-        <Text sx={t => ({ fontSize: '0.875rem', fontWeight: t.fontWeights.$medium })}>
+        <LineItems.Title>Subtotal</LineItems.Title>
+        <LineItems.Description>
+          {totals.subtotal.currencySymbol}
+          {totals.subtotal.amountFormatted}
+        </LineItems.Description>
+      </LineItems.Group>
+      <LineItems.Group variant='tertiary'>
+        <LineItems.Title>Tax</LineItems.Title>
+        <LineItems.Description>
+          {totals.taxTotal.currencySymbol}
+          {totals.taxTotal.amountFormatted}
+        </LineItems.Description>
+      </LineItems.Group>
+      <LineItems.Group borderTop>
+        <LineItems.Title>Total{totals.totalDueNow ? ' Due Today' : ''}</LineItems.Title>
+        <LineItems.Description>
           {totals.totalDueNow
             ? `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`
             : `${totals.grandTotal.currencySymbol}${totals.grandTotal.amountFormatted}`}
-        </Text>
-      </Flex>
-    </>
+        </LineItems.Description>
+      </LineItems.Group>
+    </LineItems.Root>
   );
 };
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 66c5087fea6..a109052d87a 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -32,6 +32,17 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'disclosureContentInner',
   'disclosureContent',
 
+  'lineItemsRoot',
+  'lineItemsDivider',
+  'lineItemsGroup',
+  'lineItemsTitle',
+  'lineItemsTitleDescription',
+  'lineItemsDescription',
+  'lineItemsDescriptionInner',
+  'lineItemsDescriptionSuffix',
+  'lineItemsDescriptionPrefix',
+  'lineItemsDescriptionText',
+
   'actionCard',
 
   'logoBox',
diff --git a/packages/clerk-js/src/ui/customizables/index.ts b/packages/clerk-js/src/ui/customizables/index.ts
index 9398fc998d5..acd5ad0fc55 100644
--- a/packages/clerk-js/src/ui/customizables/index.ts
+++ b/packages/clerk-js/src/ui/customizables/index.ts
@@ -61,4 +61,8 @@ export const Tr = makeCustomizable(sanitizeDomProps(Primitives.Tr));
 export const Th = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Th)));
 export const Td = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Td)));
 
+export const Dl = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Dl)));
+export const Dd = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Dd)));
+export const Dt = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Dt)));
+
 export const Span = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Span)));
diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
new file mode 100644
index 00000000000..9f6e6263ec5
--- /dev/null
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -0,0 +1,198 @@
+import * as React from 'react';
+
+import { Box, Dd, descriptors, Dl, Dt, Span } from '../customizables';
+import { common } from '../styledSystem';
+
+/* -------------------------------------------------------------------------------------------------
+ * LineItems.Root
+ * -----------------------------------------------------------------------------------------------*/
+
+interface RootProps {
+  children: React.ReactNode;
+}
+
+function Root({ children }: RootProps) {
+  return (
+    <Dl
+      elementDescriptor={descriptors.lineItemsRoot}
+      sx={t => ({
+        display: 'grid',
+        gridRowGap: t.space.$2,
+      })}
+    >
+      {children}
+    </Dl>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * LineItems.Group
+ * -----------------------------------------------------------------------------------------------*/
+
+type GroupVariant = 'primary' | 'secondary' | 'tertiary';
+
+interface GroupContextValue {
+  variant: GroupVariant;
+}
+
+const GroupContext = React.createContext<GroupContextValue | undefined>(undefined);
+
+interface GroupProps {
+  children: React.ReactNode;
+  /**
+   * @default `false`
+   */
+  borderTop?: boolean;
+  variant?: GroupVariant;
+}
+
+function Group({ children, borderTop = false, variant = 'primary' }: GroupProps) {
+  return (
+    <GroupContext.Provider value={{ variant }}>
+      <Box
+        elementDescriptor={descriptors.lineItemsGroup}
+        elementId={descriptors.lineItemsGroup.setId(variant)}
+        sx={t => ({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+          ...(borderTop
+            ? {
+                borderTopWidth: t.borderWidths.$normal,
+                borderTopStyle: t.borderStyles.$solid,
+                borderTopColor: t.colors.$neutralAlpha100,
+                paddingTop: t.space.$2,
+              }
+            : {}),
+        })}
+      >
+        {children}
+      </Box>
+    </GroupContext.Provider>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * LineItems.Title
+ * -----------------------------------------------------------------------------------------------*/
+
+interface TitleProps {
+  children: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+function Title({ children, description }: TitleProps) {
+  const context = React.useContext(GroupContext);
+  if (!context) {
+    throw new Error('LineItems.Title must be used within LineItems.Group');
+  }
+  const { variant } = context;
+  const textVariant = variant === 'primary' ? 'subtitle' : 'caption';
+  return (
+    <Dt
+      elementDescriptor={descriptors.lineItemsTitle}
+      elementId={descriptors.lineItemsTitle.setId(variant)}
+      sx={t => ({
+        display: 'grid',
+        color: variant === 'primary' ? t.colors.$colorText : t.colors.$colorTextSecondary,
+        marginTop: variant !== 'primary' ? t.space.$0x25 : undefined,
+        ...common.textVariants(t)[textVariant],
+      })}
+    >
+      {children}
+      {description ? (
+        <Span
+          elementDescriptor={descriptors.lineItemsTitleDescription}
+          sx={t => ({
+            fontSize: t.fontSizes.$sm,
+            color: t.colors.$colorTextSecondary,
+          })}
+        >
+          {description}
+        </Span>
+      ) : null}
+    </Dt>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * LineItems.Description
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DescriptionProps {
+  children: React.ReactNode;
+  /**
+   * Render a piece of text before the description text.
+   */
+  prefix?: React.ReactNode;
+  /**
+   * Render a note below the description text.
+   */
+  suffix?: React.ReactNode;
+}
+
+function Description({ children, prefix, suffix }: DescriptionProps) {
+  const context = React.useContext(GroupContext);
+  if (!context) {
+    throw new Error('LineItems.Description must be used within LineItems.Group');
+  }
+  const { variant } = context;
+  return (
+    <Dd
+      elementDescriptor={descriptors.lineItemsDescription}
+      elementId={descriptors.lineItemsDescription.setId(variant)}
+      sx={t => ({
+        display: 'grid',
+        justifyContent: 'end',
+        color: variant === 'tertiary' ? t.colors.$colorTextSecondary : t.colors.$colorText,
+      })}
+    >
+      <Span
+        elementDescriptor={descriptors.lineItemsDescriptionInner}
+        sx={t => ({
+          display: 'inline-flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+          gap: t.space.$1,
+        })}
+      >
+        {prefix ? (
+          <Span
+            elementDescriptor={descriptors.lineItemsDescriptionPrefix}
+            sx={t => ({
+              color: t.colors.$colorTextSecondary,
+              ...common.textVariants(t).caption,
+            })}
+          >
+            {prefix}
+          </Span>
+        ) : null}
+        <Span
+          elementDescriptor={descriptors.lineItemsDescriptionText}
+          sx={t => ({
+            ...common.textVariants(t).body,
+          })}
+        >
+          {children}
+        </Span>
+      </Span>
+      {suffix ? (
+        <Span
+          elementDescriptor={descriptors.lineItemsDescriptionSuffix}
+          sx={t => ({
+            color: t.colors.$colorTextSecondary,
+            ...common.textVariants(t).caption,
+          })}
+        >
+          {suffix}
+        </Span>
+      ) : null}
+    </Dd>
+  );
+}
+
+export const LineItems = {
+  Root,
+  Group,
+  Title,
+  Description,
+};
diff --git a/packages/clerk-js/src/ui/elements/index.ts b/packages/clerk-js/src/ui/elements/index.ts
index 01a67ba4a4e..6810df6281d 100644
--- a/packages/clerk-js/src/ui/elements/index.ts
+++ b/packages/clerk-js/src/ui/elements/index.ts
@@ -29,6 +29,7 @@ export * from './InformationBox';
 export * from './InputWithIcon';
 export * from './InvisibleRootBox';
 export * from './LegalConsentCheckbox';
+export * from './LineItems';
 export * from './LoadingCard';
 export * from './Menu';
 export * from './Modal';
diff --git a/packages/clerk-js/src/ui/primitives/Dd.tsx b/packages/clerk-js/src/ui/primitives/Dd.tsx
new file mode 100644
index 00000000000..fa6d06e8f4a
--- /dev/null
+++ b/packages/clerk-js/src/ui/primitives/Dd.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Dd = React.forwardRef<
+  HTMLDListElement,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>
+>((props, ref) => {
+  return (
+    <dd
+      {...props}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui/primitives/Dl.tsx b/packages/clerk-js/src/ui/primitives/Dl.tsx
new file mode 100644
index 00000000000..be90dbf1b79
--- /dev/null
+++ b/packages/clerk-js/src/ui/primitives/Dl.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Dl = React.forwardRef<
+  HTMLDListElement,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>
+>((props, ref) => {
+  return (
+    <dl
+      {...props}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui/primitives/Dt.tsx b/packages/clerk-js/src/ui/primitives/Dt.tsx
new file mode 100644
index 00000000000..ebe0ec18fde
--- /dev/null
+++ b/packages/clerk-js/src/ui/primitives/Dt.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Dt = React.forwardRef<
+  HTMLDListElement,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>
+>((props, ref) => {
+  return (
+    <dt
+      {...props}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui/primitives/index.ts b/packages/clerk-js/src/ui/primitives/index.ts
index 4e0697a3357..94622d54c9c 100644
--- a/packages/clerk-js/src/ui/primitives/index.ts
+++ b/packages/clerk-js/src/ui/primitives/index.ts
@@ -3,6 +3,9 @@ export * from './AlertIcon';
 export * from './Badge';
 export * from './Box';
 export * from './Button';
+export * from './Dl';
+export * from './Dd';
+export * from './Dt';
 export * from './Flex';
 export * from './Form';
 export * from './FormErrorText';
diff --git a/packages/clerk-js/src/ui/styledSystem/types.ts b/packages/clerk-js/src/ui/styledSystem/types.ts
index d07889b7d23..27c7984f1ab 100644
--- a/packages/clerk-js/src/ui/styledSystem/types.ts
+++ b/packages/clerk-js/src/ui/styledSystem/types.ts
@@ -31,6 +31,9 @@ type ElementProps = {
   th: React.JSX.IntrinsicElements['th'];
   tr: React.JSX.IntrinsicElements['tr'];
   td: React.JSX.IntrinsicElements['td'];
+  dl: React.JSX.IntrinsicElements['dl'];
+  dt: React.JSX.IntrinsicElements['dt'];
+  dd: React.JSX.IntrinsicElements['dd'];
 };
 
 /**
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index bd8fda2d855..83ba7ab1775 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -152,6 +152,17 @@ export type ElementsConfig = {
   disclosureContentInner: WithOptions;
   disclosureContent: WithOptions;
 
+  lineItemsRoot: WithOptions;
+  lineItemsDivider: WithOptions;
+  lineItemsGroup: WithOptions<'primary' | 'secondary' | 'tertiary'>;
+  lineItemsTitle: WithOptions<'primary' | 'secondary' | 'tertiary'>;
+  lineItemsTitleDescription: WithOptions;
+  lineItemsDescription: WithOptions<'primary' | 'secondary' | 'tertiary'>;
+  lineItemsDescriptionInner: WithOptions;
+  lineItemsDescriptionText: WithOptions;
+  lineItemsDescriptionSuffix: WithOptions;
+  lineItemsDescriptionPrefix: WithOptions;
+
   logoBox: WithOptions;
   logoImage: WithOptions;