-
- CodeOwners for monorepos
-
-
- Define and manage ownership where it matters—
- at the project level. Common VCS providers require
- folder-based ownership definitions, though. Nx Powerpack CodeOwners
- bridges this gap by{' '}
-
- automatically tracking changes and syncing ownership data
- {' '}
- with GitHub, GitLab, or Bitbucket-specific CODEOWNERS files. This
- ensures clear responsibilities and enables efficient collaboration
- across large-scale projects.
-
-
-
- Scale more confidently with workspace conformance
-
-
- Ensuring consistent code quality and long-term maintainability across
- large teams is critical. Nx Powerpack allows you to{' '}
-
- define and run conformance rules throughout your workspace
-
- , leveraging built-in rules or{' '}
-
- creating your own to ensure compliance with organizational
- standards.
- {' '}
- With Nx Cloud Enterprise Edition, you can{' '}
-
- upload your custom rules to your Nx Cloud organization
- {' '}
- and automatically enforce them across multiple repositories and
- workspaces, regardless of the tech stack.
-
-
-
- Custom Remote Cache Storage
-
-
- Enjoy the{' '}
- flexibility of managing your remote cache location on
- S3 or custom network drives. With Nx Powerpack's custom remote caching
- feature, you can configure Nx to write cache data directly to your own
- AWS S3 buckets or network drives, whether your infrastructure is
- already in place or you need more control over your caching location.
-
-
-
- Learn more about Custom Cache Storage
-
-
-
-
- );
-}
diff --git a/nx-dev/ui-powerpack/src/lib/get-started.tsx b/nx-dev/ui-powerpack/src/lib/get-started.tsx
new file mode 100644
index 0000000000000..3ed69dd12eef5
--- /dev/null
+++ b/nx-dev/ui-powerpack/src/lib/get-started.tsx
@@ -0,0 +1,154 @@
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { ReactElement } from 'react';
+import { TerminalOutput } from '@nx/nx-dev/ui-fence';
+import { PowerpackPricing } from './powerpack-pricing';
+
+export function GetStarted(): ReactElement {
+ return (
+
+
+
+
+ Premium features, carefully crafted DX
+
+
+ Expand you capabilities with Nx Powerpack, a suite of
+ advanced tools designed for enterprises.
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ Buy an Nx Powerpack license
+
+
+ Select with type of license to subscribe to for your own needs
+ with monthly payments or pay once for the whole year.
+
+
+
+
+
+
+
+
+
+ 2
+
+
+
+
+ Activate Nx Powerpack right from your terminal
+
+
+ The setup is simple and straightforward. Run one command to
+ activate your license and start adding unique capabilities to
+ your workspace.
+
+
+
+
+
+
+
+
+
+ 3
+
+
+
+
+ Enjoy your enhanced setup
+
+
+ Use Nx Powerpack to enhance your development experience with
+ custom remote caching, Conformance, Workspace wide code
+ ownership and more premium official Nx Plugins.
+
+
+
+
+
+
+
+ );
+}
diff --git a/nx-dev/ui-powerpack/src/lib/hero.tsx b/nx-dev/ui-powerpack/src/lib/hero.tsx
index 3dcaf7ba6b13a..4fc71c6eb917b 100644
--- a/nx-dev/ui-powerpack/src/lib/hero.tsx
+++ b/nx-dev/ui-powerpack/src/lib/hero.tsx
@@ -1,40 +1,30 @@
'use client';
-import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
import { PowerpackPricing } from './powerpack-pricing';
+import { ReactElement } from 'react';
-export function Hero(): JSX.Element {
+export function Hero(): ReactElement {
return (
-
-
-
-
-
- Nx Powerpack
-
-
-
- Enterprise-grade features for your Nx workspace
-
-
+
+
+ Nx Powerpack
+
+
+ A suite of paid extensions for Nx specifically designed for
+ enterprises, built and supported by the Nx core team.
+
+
+
- Nx Powerpack is a suite of paid extensions for Nx specifically
- designed for enterprises. Built and supported by the Nx core team,
- Powerpack provides flexibility of choice with custom cache locations
- and features designed to enhance maintainability and scale
- development, ensuring your teams can operate efficiently at scale.
-
-
- );
-}
diff --git a/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx b/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
new file mode 100644
index 0000000000000..04552c196e6ce
--- /dev/null
+++ b/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
@@ -0,0 +1,256 @@
+'use client';
+import { forwardRef, ReactElement, ReactNode, useRef } from 'react';
+import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
+import { cx } from '@nx/nx-dev/ui-primitives';
+import { AnimatedBeam } from '@nx/nx-dev/ui-animations';
+import { ComputerDesktopIcon } from '@heroicons/react/24/outline';
+import { AmazonS3Icon, GitHubIcon, GitlabIcon } from '@nx/nx-dev/ui-icons';
+
+export function PowerpackFeatures(): ReactElement {
+ return (
+
+
+
+
+
+
+ Custom remote cache storage
+
+
+ Enjoy the{' '}
+
+ flexibility of managing your remote cache location
+ {' '}
+ on S3 or custom network drives. With Nx Powerpack's custom
+ remote caching feature, you can configure Nx to write cache data
+ directly to your own AWS S3 buckets or network drives, whether
+ your infrastructure is already in place or you need more control
+ over your caching location.
+
+
+
+ Learn more about Custom Cache Storage
+
+
+
+
+
+
+
+
+
+
+ CodeOwners: for monorepos
+
+
+ Define and manage ownership where it matters—
+ at the project level. Common VCS providers
+ require folder-based ownership definitions, though.
+
+
+ Nx Powerpack CodeOwners bridges this gap by{' '}
+
+ automatically tracking changes and syncing ownership data
+ {' '}
+ with GitHub, GitLab, or Bitbucket-specific CODEOWNERS files.
+ This ensures clear responsibilities and enables efficient
+ collaboration across large-scale projects.
+
+
+
+
+ Learn more about CodeOwners
+
+
+
+
+
+
+ Workspace conformance
+
+
+ Ensuring consistent code quality and long-term maintainability
+ across large teams is critical. Nx Powerpack allows you to{' '}
+
+ define and run conformance rules throughout your workspace
+
+ , leveraging built-in rules or{' '}
+
+ creating your own to ensure compliance with organizational
+ standards.
+
+
+
+ With Nx Cloud Enterprise Edition, you can{' '}
+
+ upload your custom rules to your Nx Cloud organization
+ {' '}
+ and automatically enforce them across multiple repositories and
+ workspaces, regardless of the tech stack.
+