diff --git a/.changeset/public-files-throw.md b/.changeset/public-files-throw.md
new file mode 100644
index 00000000000..346097e247d
--- /dev/null
+++ b/.changeset/public-files-throw.md
@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Add `` component to the SDK. Learn more about it in the [Clerk Billing guide](https://clerk.com/docs/billing/overview).
diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts
index 8b48e960265..49ec2d7d480 100644
--- a/integration/presets/longRunningApps.ts
+++ b/integration/presets/longRunningApps.ts
@@ -46,6 +46,7 @@ export const createLongRunningApps = () => {
{ id: 'withBilling.next.appRouter', config: next.appRouter, env: envs.withBilling },
{ id: 'withBillingStaging.vue.vite', config: vue.vite, env: envs.withBillingStaging },
{ id: 'withBilling.vue.vite', config: vue.vite, env: envs.withBilling },
+ { id: 'withBilling.astro.node', config: astro.node, env: envs.withBilling },
// { id: 'withBillingStaging.nuxt.node', config: nuxt.node, env: envs.withBillingStaging },
// { id: 'withBilling.nuxt.node', config: nuxt.node, env: envs.withBilling },
{
diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro
new file mode 100644
index 00000000000..8fac1771897
--- /dev/null
+++ b/integration/templates/astro-node/src/pages/pricing-table.astro
@@ -0,0 +1,10 @@
+---
+import { PricingTable } from "@clerk/astro/components";
+import Layout from "../layouts/Layout.astro";
+---
+
+
+
+
diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts
index 67be6d14e38..1fc085e0f70 100644
--- a/packages/astro/src/astro-components/index.ts
+++ b/packages/astro/src/astro-components/index.ts
@@ -25,3 +25,4 @@ export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
export { default as OrganizationList } from './interactive/OrganizationList.astro';
export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';
export { default as Waitlist } from './interactive/Waitlist.astro';
+export { default as PricingTable } from './interactive/PricingTable.astro';
diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
index 51da54a4c58..ebb01fb09b7 100644
--- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
@@ -11,7 +11,8 @@ interface Props {
| 'user-button'
| 'user-profile'
| 'google-one-tap'
- | 'waitlist';
+ | 'waitlist'
+ | 'pricing-table';
}
import { generateSafeId } from '@clerk/astro/internal';
diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro
new file mode 100644
index 00000000000..ddb4b7ecdcb
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/PricingTable.astro
@@ -0,0 +1,8 @@
+---
+import type { PricingTableProps } from "@clerk/types";
+type Props = PricingTableProps
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+---
+
+
diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts
index 19786c45040..117551ad594 100644
--- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts
+++ b/packages/astro/src/internal/mount-clerk-astro-js-components.ts
@@ -14,6 +14,7 @@ const mountAllClerkAstroJSComponents = () => {
'sign-up': 'mountSignUp',
'google-one-tap': 'openGoogleOneTap',
waitlist: 'mountWaitlist',
+ 'pricing-table': 'mountPricingTable',
} as const;
Object.entries(mountFns).forEach(([category, mountFn]) => {
diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx
index 9b7ad219cbb..731081dbc95 100644
--- a/packages/astro/src/react/uiComponents.tsx
+++ b/packages/astro/src/react/uiComponents.tsx
@@ -3,6 +3,7 @@ import type {
OrganizationListProps,
OrganizationProfileProps,
OrganizationSwitcherProps,
+ PricingTableProps,
SignInProps,
SignUpProps,
UserButtonProps,
@@ -185,3 +186,13 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp
);
}, 'Waitlist');
+
+export const PricingTable = withClerk(({ clerk, ...props }: WithClerkProp) => {
+ return (
+
+ );
+}, 'PricingTable');