@@ -104,9 +112,10 @@ export function TrustedBy(): JSX.Element {
className="h-10 w-10 text-slate-950 dark:text-white"
/>
+
+
+
+
+
+ Credits are the Nx Cloud currency allowing for usage-based pricing.
+ Prices do not include applicable taxes.
+
+
+
+ Get started now for free
+
+
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/faq.tsx b/nx-dev/ui-pricing/src/lib/faq.tsx
new file mode 100644
index 0000000000..eb4f422f44
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/faq.tsx
@@ -0,0 +1,150 @@
+'use client';
+import { Disclosure, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { cx } from '@nx/nx-dev/ui-primitives';
+import { FAQPageJsonLd } from 'next-seo';
+
+export function Faq(): JSX.Element {
+ const faqs = [
+ {
+ question: 'What are credits?',
+ answer:
+ 'Credits are the currency of Nx Cloud. A determined number of credits are included in each plan. These credits are used to pay for Nx Cloud platform usage in real time.',
+ },
+ {
+ question: 'Do credits expire?',
+ answer:
+ 'Credits expire at the end of the billing cycle and do not roll over.',
+ },
+ {
+ question: 'When does the billing cycle start and end?',
+ answer:
+ 'A new billing cycle starts on the first day of every month. If you go over the Hobby plan limit during a cycle your organization will be disabled. You will have to upgrade to our Pro plan or wait for the next billing cycle.',
+ },
+ {
+ question: 'What is a CI Pipeline Execution (CIPE)?',
+ answer:
+ 'By default, a CI pipeline execution is a 1:1 match to your CI provider of choice\'s concept of a "workflow".',
+ },
+ {
+ question: 'What is the concurrency connections limit?',
+ answer:
+ 'As you scale your usage of Nx Cloud, you may run into concurrency limits. Nx Cloud puts a limit on the number of CI machines in your workspace that are simultaneously connecting to Nx Cloud. This includes any machine running in CI - both the main CI pipeline machine and any agent machines.',
+ },
+ {
+ question: 'What is a contributor?',
+ answer:
+ "A contributor is a person who has committed to your repository. Your organization's contributor count is calculated from anonymized, monthly git histories across all the workspaces in your Nx Cloud organization.",
+ },
+ {
+ question: "What if I exceed my plan's contributor limit?",
+ answer:
+ 'If you exceed the contributor limit, your organization will be disabled until you upgrade to a plan that supports the number of contributors you have.',
+ },
+ {
+ question:
+ 'What happens if I consume all my credits while on the Hobby plan?',
+ answer:
+ 'The Hobby plan allows you to configure and run a small project at no cost. If you consume all the credits, your organization will be disabled until you upgrade to Pro or wait for the next billing cycle.',
+ },
+ {
+ question: 'Can I upgrade my Hobby plan to the Pro plan?',
+ answer:
+ 'Yes, you can upgrade your Hobby plan to the Pro plan at any time.',
+ },
+ {
+ question: 'Is there a plan for open source projects?',
+ answer:
+ 'Yes, we are happy to collaborate with open source projects. Please complete this form, and we will review your request and get back to you: https://nx.app/pricing/special-offer',
+ },
+ {
+ question: 'What payment methods do you accept?',
+ answer:
+ 'We accept Visa, Mastercard, American Express, and Discover from customers worldwide.',
+ },
+ {
+ question: 'Do I need a credit card to create an account?',
+ answer:
+ 'No, you can set up a workspace with Nx Cloud completely for free, without entering any billing information.',
+ },
+ ];
+
+ return (
+
+
+
+
+
({
+ questionName: faq.question,
+ acceptedAnswerText: faq.answer,
+ }))}
+ />
+
+
+ {faqs.map((faq) => (
+
+ {({ open }) => (
+ <>
+ -
+
+
+ {faq.question}
+
+
+
+
+
+
+
+
+
+ {faq.answer}
+
+
+
+
+ )}
+
+ ))}
+
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/oss.tsx b/nx-dev/ui-pricing/src/lib/oss.tsx
new file mode 100644
index 0000000000..d727938177
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/oss.tsx
@@ -0,0 +1,52 @@
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+
+export function Oss(): JSX.Element {
+ return (
+
+
+
+
+ Open Source maintainers and authors?
+
+
+ We provide a $0 /month plan for
+ open-source projects.
+
+
+
+ Apply for free access
+
+
+
+
+
+ Free
+ credits every month
+
+
+
+ Max 3 admin users
+
+
+ {' '}
+ Powerful analytics
+
+
+ Basic
+ support
+
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
new file mode 100644
index 0000000000..9a8d93c569
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
@@ -0,0 +1,70 @@
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+
+const features = [
+ 'White glove onboarding',
+ 'Work hand-in-hand with the Nx team for continual improvement',
+ 'Run on the Nx Cloud servers in any region or run fully self-contained, on-prem',
+ 'Premium Support and SLAs available',
+ 'SSO / SAML Login',
+];
+
+export function EnterprisePlan({
+ cta = 'Learn more',
+ url,
+}: {
+ cta?: string;
+ url: string;
+}) {
+ return (
+
+
+ Available as an on-prem solution
+
+
+
+ The ultimate Nx toolchain, tailored to your needs of speed.
+
+
+
+
+ {cta}
+
+
+
+ Volume discounts on credits available.
+
+
+ -
+ The complete Nx toolchain tailored to your needs:
+
+ {features.map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx
new file mode 100644
index 0000000000..660f14dea5
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx
@@ -0,0 +1,127 @@
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+import Link from 'next/link';
+
+const features = [
+ '50k credits included',
+ 'Max 5 contributors',
+ 'Distributed Task Execution (DTE)',
+ 'Nx run detailed reports',
+ 'Structured log visualization',
+ 'GitHub PR with Nx Cloud live status',
+ 'Unlimited users per workspace',
+ 'Basic support',
+];
+
+export function HobbyPlan({
+ cta = 'Get started now',
+ url,
+}: {
+ cta?: string;
+ url: string;
+}) {
+ return (
+
+
+ Start here
+
+
+
+ Get started quickly, upgrade when ready.
+
+
+
+ $0
+
+ /month
+
+
+
+ {cta}
+
+
+
+ No credit card required.
+
+
+ -
+
+
+
+ Nx Replay
+
+ : remote caching{' '}
+
+
+ -
+
+
+
+ Nx Agents
+
+ : native task distribution solution for CI{' '}
+
+
+ -
+
+
+
+ Nx Workflows
+
+ : full CI replacement{' '}
+ (Coming Soon)
+
+
+ {features.map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
new file mode 100644
index 0000000000..5e7501d362
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
@@ -0,0 +1,1203 @@
+'use client';
+import { Popover, Transition } from '@headlessui/react';
+
+import {
+ CheckIcon,
+ InformationCircleIcon,
+ QuestionMarkCircleIcon,
+ XMarkIcon,
+} from '@heroicons/react/24/outline';
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+import { Fragment } from 'react';
+
+export function PlanTable(): JSX.Element {
+ return (
+
+
+
+
+ |
+ Available plans
+ |
+
+
+
+ Hobby
+
+
+ Get started quickly, upgrade when ready.
+
+
+
+ $0
+
+ / month
+
+
+ |
+
+
+
+ Pro
+
+
+ Scales with your needs.
+
+
+
+ $249
+
+ / month
+
+
+ |
+
+
+
+ Enterprise
+
+
+ The ultimate Nx toolchain, tailored to your needs of speed.
+
+
+ |
+
+
+
+
+ |
+
+
+ Get started now
+
+ |
+
+
+ Get started
+
+ |
+
+
+ Learn more
+
+ |
+
+
+ |
+ Usages
+ |
+ |
+ |
+ |
+
+
+ |
+ Credits included
+ |
+
+ 50k credits per month
+ |
+
+ 300k credits per month
+ |
+
+ Custom
+ |
+
+
+ |
+ Exclusive benefits
+ |
+
+
+ no
+ |
+
+
+
+
+ 14-day free trial, no credit card required
+
+
+
+
+
+ Your organization will be deactivated upon reaching any
+ Pro plan limit unless a credit card is set up in your
+ account.
+
+
+
+
+ |
+
+
+ Volume discounts on credits available.
+
+ |
+
+
+ |
+ Can buy extra credits
+ |
+
+
+ no
+ |
+
+ $5.50 per 10,000 credits
+ |
+
+ $5.00 per 10,000 credits
+ |
+
+
+ |
+
+
+ CI Pipeline Executions (CIPE)
+
+
+
+
+
+
+ By default, a CI pipeline execution is a 1:1 match to your
+ CI provider of choice's concept of a "workflow".
+
+
+
+
+ |
+
+ 500 credits per CIPE
+ |
+
+ 500 credits per CIPE
+ |
+
+ 500 credits per CIPE
+ |
+
+
+ |
+
+
+ Concurrent CI connections{' '}
+
+
+
+
+
+
+ The number of agents capable of doing work at the same
+ time.
+
+
+
+
+ |
+
+ Max 10
+ |
+
+ Max 70
+ |
+
+ Custom
+ |
+
+
+ |
+
+
+ Contributors{' '}
+
+
+
+
+
+
+ A contributor is a person having access to the repository
+ and able to trigger a CI Pipeline Execution. Usually,
+ contributors are developers on the project.
+
+
+
+
+ |
+
+ Max 5 contributors
+ |
+
+ Max 70 contributors
+ |
+
+ Custom
+ |
+
+
+ |
+
+
+ Nx Runs
+
+
+
+
+
+
+ Each time Nx is executes a batch of tasks it is considered
+ an Nx Run.
+
+
+
+
+ |
+
+ Max 50k
+ |
+
+ Max 1m
+ |
+
+ Unlimited
+ |
+
+
+ |
+ Workspace per organization
+ |
+
+ Unlimited
+ |
+
+ Unlimited
+ |
+
+ Custom
+ |
+
+
+ |
+ Workspace visibility
+ |
+
+ Private/Public
+ |
+
+ Private/Public
+ |
+
+ Private/Public
+ |
+
+
+ |
+ Connect to GitHub repository
+ |
+
+ Private/Public
+ |
+
+ Private/Public
+ |
+
+ Private/Public
+ |
+
+
+ |
+ App users
+ |
+
+ Unlimited
+ |
+
+ Unlimited
+ |
+
+ Unlimited
+ |
+
+
+ |
+ Admin accounts
+ |
+
+ Unlimited
+ |
+
+ Unlimited
+ |
+
+ Unlimited
+ |
+
+
+ |
+ Features
+ |
+ |
+ |
+ |
+
+
+ |
+
+ Nx Agents
+
+ : native task distribution solution for CI{' '}
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+
+ Nx Workflows
+
+ : full CI replacement{' '}
+ (Coming Soon)
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+
+ Nx Replay
+
+ : Remote Caching
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Distributed Task Execution
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+
+
+ Nx Run detailed reports
+
+
+
+
+
+
+ Get a detailed report of each Nx Run with machine specs,
+ tasks statuses, logs statistics and share the result to
+ your team.
+
+
+
+
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Structured log visualization
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+
+
+ GitHub PR with Nx Cloud live status
+
+
+
+
+
+
+ We provide a GitHub application allowing you to see what
+ tasks are being executed on the related CI pipeline from
+ your PR. See easily what failed and succeeded, with direct
+ link to full status report.
+
+
+
+
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Analytics
+ |
+
+ Basic (7 days)
+ |
+
+ Advanced (30 days)
+ |
+
+ Advanced (30 days)
+ |
+
+
+ |
+
+
+ Allowed Email Domains{' '}
+
+
+
+
+
+
+ Give member access to anyone with an email belonging to a
+ specific domain.
+
+
+
+
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Server location
+ |
+
+ US
+ |
+
+ US
+ |
+
+ Custom
+ |
+
+
+ |
+ SSO/SAML Login
+ |
+
+
+ no
+ |
+
+
+ no
+ |
+
+
+ yes
+ |
+
+
+ |
+ Payment options
+ |
+
+
+ no
+ |
+
+ Credit card
+ |
+
+ Credit card, Invoicing, Prepaid
+ |
+
+
+ |
+ Resource classes for Nx Agents
+ |
+ |
+ |
+ |
+
+
+ |
+ Extra credits
+ |
+
+
+ no
+ |
+
+ $5.50 per 10,000 credits
+ |
+
+ $5.00 per 10,000 credits
+ |
+
+
+ |
+ Docker / Linux AMD64
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Small
+ 1 vCPU, 2GB RAM
+ |
+
+ 5 credits/min
+ |
+
+ 5 credits/min
+ |
+
+ 5 credits/min
+ |
+
+
+ |
+ Medium
+ 2 vCPU, 4GB RAM
+ |
+
+ 10 credits/min
+ |
+
+ 10 credits/min
+ |
+
+ 10 credits/min
+ |
+
+
+ |
+ Medium Plus
+ 3 vCPU, 6GB RAM
+ |
+
+ 15 credits/min
+ |
+
+ 15 credits/min
+ |
+
+ 15 credits/min
+ |
+
+
+ |
+ Large
+ 4 vCPU, 8GB RAM
+ |
+
+ 20 credits/min
+ |
+
+ 20 credits/min
+ |
+
+ 20 credits/min
+ |
+
+
+ |
+ Large Plus
+ 4 vCPU, 10GB RAM
+ |
+
+ 30 credits/min
+ |
+
+ 30 credits/min
+ |
+
+ 30 credits/min
+ |
+
+
+ |
+ Extra Large
+ 8 vCPU, 16GB RAM
+ |
+
+ 40 credits/min
+ |
+
+ 40 credits/min
+ |
+
+ 40 credits/min
+ |
+
+
+ |
+ Extra Large Plus
+ 10 vCPU, 20GB RAM
+ |
+
+ 60 credits/min
+ |
+
+ 60 credits/min
+ |
+
+ 60 credits/min
+ |
+
+
+
+ |
+ Docker / Linux ARM64
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Medium
+ 2 vCPU, 8GB RAM
+ |
+
+ 13 credits/min
+ |
+
+ 13 credits/min
+ |
+
+ 13 credits/min
+ |
+
+
+
+ |
+ Large
+ 4 vCPU, 16GB RAM
+ |
+
+ 26 credits/min
+ |
+
+ 26 credits/min
+ |
+
+ 26 credits/min
+ |
+
+
+
+ |
+ Extra Large
+ 8 vCPU, 32GB RAM
+ |
+
+ 52 credits/min
+ |
+
+ 52 credits/min
+ |
+
+ 52 credits/min
+ |
+
+
+
+ |
+ Docker / Windows
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ yes
+ |
+
+
+ |
+ Medium
+ 3 vCPU, 6GB RAM
+ |
+
+ 40 credits/min
+ |
+
+ 40 credits/min
+ |
+
+ 40 credits/min
+ |
+
+
+
+ |
+ Support
+ |
+ |
+ |
+ |
+
+
+ |
+ Support type
+ |
+
+ Basic support
+ |
+
+ High-priority support
+ |
+
+ Enterprise-grade support, SLA available
+ |
+
+
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx
new file mode 100644
index 0000000000..c1017db078
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx
@@ -0,0 +1,99 @@
+'use client';
+import { Popover, Transition } from '@headlessui/react';
+import { CheckIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+import { Fragment } from 'react';
+
+const features = [
+ '300k credits included',
+ 'Max 1m runs per month',
+ 'Max 70 concurrent CI connections',
+ 'Max 70 contributors',
+ 'Unlimited private workspaces per organization',
+ 'High-priority support',
+];
+
+export function ProPlan({
+ cta = 'Get started now',
+ url,
+}: {
+ cta?: string;
+ url: string;
+}) {
+ return (
+
+
+
+ Scales with your needs.
+
+
+
+ $249
+
+ /month
+
+
+
+ {cta}
+
+
+
+
+ 14-day free trial
+
+ No credit card required{' '}
+
+
+
+
+
+
+
+ Your organization will be deactivated upon reaching any Pro plan
+ limit unless a credit card is set up in your account.
+
+
+
+
+
+ -
+ Everything from the Hobby plan plus:
+
+ {features.map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/src/lib/standard-plans.tsx b/nx-dev/ui-pricing/src/lib/standard-plans.tsx
new file mode 100644
index 0000000000..8184981909
--- /dev/null
+++ b/nx-dev/ui-pricing/src/lib/standard-plans.tsx
@@ -0,0 +1,56 @@
+import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
+
+import { EnterprisePlan } from './plans/enterprise-plan';
+import { HobbyPlan } from './plans/hobby-plan';
+import { ProPlan } from './plans/pro-plan';
+
+export function StandardPlans() {
+ return (
+
+
+
+ Start with everything,
+
scale when you need
+
+
+ Level up your CI with Nx Cloud
+
+
+
+
+ {/* Plans */}
+
+ {/* */}
+
+
+ Credits are the Nx Cloud currency allowing for usage based pricing.
+ Prices do not include applicable taxes.
+
+
+
+
+ Compare all plans options and benefits
+
+
+
+ );
+}
diff --git a/nx-dev/ui-pricing/tsconfig.json b/nx-dev/ui-pricing/tsconfig.json
new file mode 100644
index 0000000000..95cfeb243d
--- /dev/null
+++ b/nx-dev/ui-pricing/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "allowJs": false,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ }
+ ],
+ "extends": "../../tsconfig.base.json"
+}
diff --git a/nx-dev/ui-pricing/tsconfig.lib.json b/nx-dev/ui-pricing/tsconfig.lib.json
new file mode 100644
index 0000000000..578a3fb7dd
--- /dev/null
+++ b/nx-dev/ui-pricing/tsconfig.lib.json
@@ -0,0 +1,23 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "types": [
+ "node",
+ "@nx/react/typings/cssmodule.d.ts",
+ "@nx/react/typings/image.d.ts"
+ ]
+ },
+ "exclude": [
+ "jest.config.ts",
+ "src/**/*.spec.ts",
+ "src/**/*.test.ts",
+ "src/**/*.spec.tsx",
+ "src/**/*.test.tsx",
+ "src/**/*.spec.js",
+ "src/**/*.test.js",
+ "src/**/*.spec.jsx",
+ "src/**/*.test.jsx"
+ ],
+ "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index de81812c74..0c95341a1f 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -107,6 +107,7 @@
"@nx/nx-dev/ui-icons": ["nx-dev/ui-icons/src/index.ts"],
"@nx/nx-dev/ui-markdoc": ["nx-dev/ui-markdoc/src/index.ts"],
"@nx/nx-dev/ui-member-card": ["nx-dev/ui-member-card/src/index.ts"],
+ "@nx/nx-dev/ui-pricing": ["nx-dev/ui-pricing/src/index.ts"],
"@nx/nx-dev/ui-primitives": ["nx-dev/ui-primitives/src/index.ts"],
"@nx/nx-dev/ui-references": ["nx-dev/ui-references/src/index.ts"],
"@nx/nx-dev/ui-sponsor-card": ["nx-dev/ui-sponsor-card/src/index.ts"],