diff --git a/nx-dev/nx-dev/pages/community.tsx b/nx-dev/nx-dev/pages/community.tsx
index 28102eca59..bb466e26c5 100644
--- a/nx-dev/nx-dev/pages/community.tsx
+++ b/nx-dev/nx-dev/pages/community.tsx
@@ -1,8 +1,14 @@
-import Image from 'next/image';
-import Link from 'next/link';
+import {
+  BeakerIcon,
+  ChatIcon,
+  ClipboardListIcon,
+  ShareIcon,
+} from '@heroicons/react/solid';
+import { Footer, Header } from '@nrwl/nx-dev/ui-common';
+import { ConnectWithUs, PluginDirectory } from '@nrwl/nx-dev/ui-community';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import { Footer, Header, PluginCard } from '@nrwl/nx-dev/ui-common';
+import CreateNxPlugin from '../../ui-community/src/lib/create-nx-plugin';
 
 declare const fetch: any;
 
@@ -55,256 +61,80 @@ export function Community(props: CommunityProps) {
       <Header useDarkBackground={false} showSearch={false} />
       <main>
         <div className="w-full">
-          {/*Intro component*/}
-          <div className="bg-gray-50">
-            <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
-              <div className="mt-40">
-                <h1 className="leading none mt-10 mb-8 text-4xl font-extrabold tracking-tight text-gray-900 sm:mt-14 sm:mb-10 sm:text-6xl lg:text-7xl">
-                  It's always better when we're together.
+          <article
+            id="getting-started"
+            className="relative bg-gray-50 pt-16 sm:pt-24 lg:pt-32"
+          >
+            <header className="mx-auto max-w-prose px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8">
+              <div>
+                <h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
+                  <span className="sr-only">Nx has </span> A strong and dynamic
+                  community
                 </h1>
-                <p className="mb-10 max-w-screen-lg text-lg font-medium sm:mb-11 sm:text-2xl sm:leading-10">
-                  There are many ways you can connect with the open-source Nx
-                  community. Below, you’ll find details about various connection
-                  points.
+                <p className="mt-2 text-4xl font-extrabold tracking-tight text-gray-800 sm:text-6xl">
+                  It's always better when we're together.
                 </p>
               </div>
-            </div>
-          </div>
-          {/*Community*/}
-          <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
-            <div className="mt-32 flex flex-col justify-center md:flex-row">
-              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pb-0">
-                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
-                  GitHub & Slack
-                </h2>
+            </header>
 
-                <p className="mb-6 sm:text-lg">
-                  At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>
-                  , you can file issues or contribute code back to the project.
-                </p>
-                <p className="mb-6 sm:text-lg">
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    title="Join the Nx Community Slack"
-                    href="https://go.nrwl.io/join-slack"
-                    rel="noreferrer"
-                  >
-                    Join the Nx Community Slack
-                  </a>{' '}
-                  to meet a friendly community of Nx users. This is a perfect
-                  place to ask clarifying questions or to talk through new ideas
-                  that you want to try with Nx. There's also a channel dedicated
-                  to sharing articles about Nx and most of the authors of
-                  community plugins can be reached there.
-                </p>
-
-                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
-                  Livestreams & Twitter
-                </h2>
-                <p className="mb-6 sm:text-lg">
-                  The Nx Show takes place every second and fourth Monday, from
-                  1:00 - 2:00 PM EST on the{' '}
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    href="https://www.youtube.com/nrwl_io"
-                    rel="noreferrer"
-                  >
-                    Nrwl YouTube channel
-                  </a>
-                  . Info about upcoming sessions is shared on the{' '}
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    href="https://twitter.com/NxDevTools"
-                    rel="noreferrer"
-                  >
-                    @NxDevTools
-                  </a>{' '}
-                  Twitter account and the Nrwl+Nx Newsletter. You can find past
-                  live-streams on the{' '}
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    rel="noreferrer"
-                    href="https://www.youtube.com/watch?v=JS3m1wIwRBg&list=PLakNactNC1dH8LCp2mvx5lbO6maNrlBVN"
-                  >
-                    'Nx Show' Youtube Playlist
-                  </a>
-                  .
-                </p>
-
-                <p className="mb-6 sm:text-lg">
-                  In each session, members of the Nx core team answer your
-                  questions, help get you up and running with Nx, and address
-                  particular challenges. If you have a question or topic you’d
-                  like to see covered during The Nx Show, you can{' '}
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    rel="noreferrer"
-                    aria-label="Nx Show Questions and Suggestions Form"
-                    title="Nx Show Questions and Suggestions Form"
-                    href="https://forms.gle/ehzCjzcF1xxNaviC7"
-                  >
-                    submit them here
-                  </a>
-                </p>
-
-                <p className="mb-6 sm:text-lg">
-                  For the latest news about Nx,{' '}
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    rel="noreferrer"
-                    href="https://twitter.com/NxDevTools"
-                  >
-                    follow @NxDevTools on Twitter
-                  </a>
-                  .
-                </p>
-
-                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
-                  We also have a newsletter
-                </h2>
-                <p className="mb-6 sm:text-lg">
-                  You can also{' '}
-                  <a
-                    className="cursor-pointer underline"
-                    target="_blank"
-                    rel="noreferrer"
-                    href="https://go.nrwl.io/nx-newsletter"
-                  >
-                    subscribe to the Nx Newsletter
-                  </a>
-                  : a monthly email digest from the Nx core team at Nrwl.
-                  Subscribers receive news about Nx releases, posts about new Nx
-                  features, details about new plugins, links to community
-                  resources, and additional Nx content.
-                </p>
-              </div>
-              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pl-16 md:pb-0">
-                <Image
-                  src="/images/community.svg"
-                  width={555}
-                  height={735}
-                  alt="community illustration"
-                />
-              </div>
-            </div>
-          </div>
-          {/*How to plugin*/}
-          <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
-            <div className="my-32 flex flex-col  items-start justify-center md:flex-row">
-              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pb-0 lg:w-2/5">
-                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
-                  Community plugin
-                </h2>
-                <p className="mb-6 sm:text-lg">
-                  Core Nx plugins are created and maintained by the Nx team at
-                  Nrwl and you can see all the available plugins when you run
-                  the{' '}
-                  <code className="rounded border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-sm leading-6 text-gray-600">
-                    nx list
-                  </code>{' '}
-                  command in your workspace.
-                </p>
-                <p className="mb-6 sm:text-lg">
-                  <b>The community plugins listed below</b> are created and
-                  maintained by members of the Nx community, will allow you to
-                  use the full power of the workspace while using different
-                  technologies!
-                </p>
-                <div className="mb-6">
-                  <a
-                    href="#community-plugin-list"
-                    className="cursor-pointer underline"
-                  >
-                    Check the community plugins right now!
+            <div className="mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <div className="hover:border-green-nx-base relative rounded-lg border-2 border-white bg-white p-5 shadow-sm transition">
+                  <ChatIcon className="text-green-nx-base mb-5 inline-block h-10 w-10" />
+                  <h4 className="mb-2 text-lg font-bold">Community</h4>
+                  <a className="focus:outline-none" href="#community">
+                    <span className="absolute inset-0" aria-hidden="true" />
+                    <p className="leading-relaxed text-gray-600">
+                      There are many ways you can connect with the open-source
+                      Nx community: Slack, Youtube, Twitter and email newletter
+                      are available to keep you on top of all the Nx things!
+                    </p>
                   </a>
                 </div>
-                <h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800">
-                  How to Install
-                </h3>
-                <p className="mb-6 sm:text-lg">
-                  Each of the plugins listed below have a yarn and an npm icon.
-                  Clicking on either of these copies the relevant command to
-                  install the dependency for your project.
-                </p>
-              </div>
-              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pl-16 lg:w-3/5">
-                <div className="w-full border border-gray-100 bg-gray-50 py-4 px-6">
-                  <h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
-                    How to Create Your Own
-                  </h3>
-                  <p className="mb-6 sm:text-lg">
-                    Get started with building your own plugin!
-                  </p>
-                  <iframe
-                    loading="lazy"
-                    width="560"
-                    height="315"
-                    title="YouTube video player"
-                    src="https://www.youtube.com/embed/XYO689PAhow"
-                    frameBorder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
-                    className="w-full"
-                  />
+                <div className="relative rounded-lg border-2 border-white bg-white p-5 shadow-sm transition hover:border-blue-500">
+                  <BeakerIcon className="mb-5 inline-block h-10 w-10 text-blue-500" />
+                  <h4 className="mb-2 text-lg font-bold">
+                    Create and Share your own{' '}
+                    <span className="sr-only">Nx plugin</span>
+                  </h4>
+                  <a className="focus:outline-none" href="#create-nx-plugin">
+                    <span className="absolute inset-0" aria-hidden="true" />
+                    <p className="leading-relaxed text-gray-600">
+                      Core Nx plugins are created and maintained by the Nx team
+                      at Nrwl but you can easily create your own! Follow our
+                      documentation on how to create your own plugin.
+                    </p>
+                  </a>
+                </div>
+                <div className="relative rounded-lg border-2 border-white bg-white p-5 shadow-sm transition hover:border-pink-500 sm:col-span-2 lg:col-span-1">
+                  <ClipboardListIcon className="mb-5 inline-block h-10 w-10 text-pink-500" />
+                  <h4 className="mb-2 text-lg font-bold">
+                    Browse the community plugin directory
+                  </h4>
+                  <a className="focus:outline-none" href="#plugin-directory">
+                    <span className="absolute inset-0" aria-hidden="true" />
+                    <p className="leading-relaxed text-gray-600">
+                      Check all the community plugins available for Nx! These
+                      plugins have been approved by the Nx core team, are well
+                      maintained and regularly updated to make sure they work
+                      with the latest versions.
+                    </p>
+                  </a>
                 </div>
               </div>
             </div>
+          </article>
+
+          <div id="connect-with-us" className="relative overflow-hidden py-24">
+            <ConnectWithUs />
           </div>
-          {/*Call out*/}
-          <div className="bg-blue-nx-base text-white">
-            <div className="mx-auto my-12 max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
-              <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
-                <span className="block">Ready to dive in?</span>
-                <span className="block text-gray-200">
-                  Start using Nx today.
-                </span>
-              </h2>
-              <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-                <div className="inline-flex rounded-md shadow">
-                  <Link href="/getting-started/intro">
-                    <a className="text-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium">
-                      Get started with Nx
-                    </a>
-                  </Link>
-                </div>
-              </div>
-            </div>
+
+          <div id="create-nx-plugin" className="relative overflow-hidden py-24">
+            <CreateNxPlugin />
           </div>
-          {/*Plugins*/}
-          <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
-            <div className="my-32 flex flex-col justify-center sm:flex-row">
-              <div className="mt-8 w-full py-6 lg:w-3/5">
-                <h2
-                  id="community-plugin-list"
-                  className="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 sm:text-2xl lg:text-3xl"
-                >
-                  Community Plugins Directory
-                </h2>
-              </div>
-              <div className="mt-8 w-full py-6 text-right lg:w-2/5">
-                <a
-                  href="/nx-plugin/overview#listing-your-nx-plugin"
-                  className="bg-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent px-5 py-3 text-base font-medium text-white"
-                >
-                  Add your Nx plugin to the list!
-                </a>
-              </div>
-            </div>
-            <div className="my-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-              {props.pluginList.map((plugin) => (
-                <PluginCard
-                  key={plugin.name}
-                  name={plugin.name}
-                  description={plugin.description}
-                  url={plugin.url}
-                />
-              ))}
-            </div>
+
+          <div id="plugin-directory" className="relative overflow-hidden py-24">
+            <PluginDirectory pluginList={props.pluginList} />
           </div>
         </div>
       </main>
diff --git a/nx-dev/ui-common/src/lib/plugin-card.tsx b/nx-dev/ui-common/src/lib/plugin-card.tsx
index 083b2b77e9..f1f7333d23 100644
--- a/nx-dev/ui-common/src/lib/plugin-card.tsx
+++ b/nx-dev/ui-common/src/lib/plugin-card.tsx
@@ -1,6 +1,3 @@
-import React, { useEffect, useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-
 /* eslint-disable-next-line */
 export interface PluginCardProps {
   name: string;
@@ -9,28 +6,10 @@ export interface PluginCardProps {
 }
 
 export function PluginCard({ name, description, url }: PluginCardProps) {
-  const [copied, setCopied] = useState(false);
-  useEffect(() => {
-    let t: NodeJS.Timeout;
-    if (copied) {
-      t = setTimeout(() => {
-        setCopied(false);
-      }, 3000);
-    }
-    return () => {
-      t && clearTimeout(t);
-    };
-  }, [copied]);
   return (
-    <div className="flex w-full flex-col rounded-md border border-gray-100 py-8 px-6">
-      <h3 className="mb-4 text-lg font-semibold leading-tight">
-        <a
-          href={url}
-          target="_blank"
-          rel="nofollow"
-          title="Github repository"
-          className="flex items-center"
-        >
+    <div className="focus-within:ring-blue-nx-base relative flex w-full overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50">
+      <div className="flex w-full flex-col px-4 py-3">
+        <h3 className="mb-4 flex text-lg font-semibold leading-tight">
           <svg
             className="mr-3 h-5 w-5 text-gray-800"
             role="img"
@@ -41,9 +20,18 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
             <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
           </svg>{' '}
           {name}
+        </h3>
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          title="Github repository"
+          className="focus:outline-none"
+        >
+          <span className="absolute inset-0" aria-hidden="true"></span>
+          <p className="mb-6 sm:text-sm">{description}</p>
         </a>
-      </h3>
-      <p className="mb-6 sm:text-lg">{description}</p>
+      </div>
     </div>
   );
 }
diff --git a/nx-dev/ui-community/.babelrc b/nx-dev/ui-community/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/nx-dev/ui-community/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-community/.eslintrc.json b/nx-dev/ui-community/.eslintrc.json
new file mode 100644
index 0000000000..734ddaceea
--- /dev/null
+++ b/nx-dev/ui-community/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/nx-dev/ui-community/README.md b/nx-dev/ui-community/README.md
new file mode 100644
index 0000000000..1c62a5a0e8
--- /dev/null
+++ b/nx-dev/ui-community/README.md
@@ -0,0 +1,7 @@
+# nx-dev-ui-community
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nx-dev-ui-community` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/nx-dev/ui-community/jest.config.js b/nx-dev/ui-community/jest.config.js
new file mode 100644
index 0000000000..9f4a96ebc2
--- /dev/null
+++ b/nx-dev/ui-community/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'nx-dev-ui-community',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/nx-dev/ui-community',
+};
diff --git a/nx-dev/ui-community/project.json b/nx-dev/ui-community/project.json
new file mode 100644
index 0000000000..a311951922
--- /dev/null
+++ b/nx-dev/ui-community/project.json
@@ -0,0 +1,23 @@
+{
+  "root": "nx-dev/ui-community",
+  "sourceRoot": "nx-dev/ui-community/src",
+  "projectType": "library",
+  "tags": ["scope:nx-dev", "tag:ui"],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["nx-dev/ui-community/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/nx-dev/ui-community"],
+      "options": {
+        "jestConfig": "nx-dev/ui-community/jest.config.js",
+        "passWithNoTests": true
+      }
+    }
+  }
+}
diff --git a/nx-dev/ui-community/src/index.ts b/nx-dev/ui-community/src/index.ts
new file mode 100644
index 0000000000..937a46cc44
--- /dev/null
+++ b/nx-dev/ui-community/src/index.ts
@@ -0,0 +1,3 @@
+export * from './lib/connect-with-us';
+export * from './lib/create-nx-plugin';
+export * from './lib/plugin-directory';
diff --git a/nx-dev/ui-community/src/lib/connect-with-us.tsx b/nx-dev/ui-community/src/lib/connect-with-us.tsx
new file mode 100644
index 0000000000..0b6aa200cc
--- /dev/null
+++ b/nx-dev/ui-community/src/lib/connect-with-us.tsx
@@ -0,0 +1,149 @@
+import { MailIcon } from '@heroicons/react/solid';
+import { ReactComponentElement } from 'react';
+
+export function ConnectWithUs(): ReactComponentElement<any> {
+  return (
+    <article
+      id="community"
+      className="flex flex-col space-y-12 p-4 lg:mx-auto lg:max-w-7xl lg:flex-row lg:items-center lg:space-y-0 lg:space-x-20"
+    >
+      <header className="space-y-10 md:py-12 lg:w-5/12 xl:w-5/12">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight text-gray-900">
+            Let's connect together!
+          </h1>
+          <p className="mt-4 text-lg text-gray-500">
+            There are many ways you can connect with the open-source Nx
+            community. Let's connect together!
+          </p>
+        </div>
+      </header>
+
+      <div className="relative flex-none lg:w-7/12 xl:w-7/12">
+        <div className="relative flex flex-col space-y-6 md:flex-row md:space-x-6 md:space-y-0">
+          <div className="space-y-6 md:mt-24 md:w-1/2">
+            <div className="group rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-violet-300">
+              <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
+                <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-violet-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
+                <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#4A154B] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
+                <svg
+                  fill="currentColor"
+                  className="hi-solid hi-adjustments relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Slack</title>
+                  <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+                </svg>
+              </div>
+              <h4 className="mb-2 text-lg font-bold">Join us on Slack</h4>
+              <a
+                href="https://go.nrwl.io/join-slack?utm_source=nx.dev"
+                rel="noreferrer"
+                target="_blank"
+                title="Nx Community Slack channel"
+                className="focus:outline-none"
+              >
+                <span className="absolute inset-0" aria-hidden="true"></span>
+                <p className="leading-relaxed text-gray-600">
+                  Join the Nx Community Slack to meet a friendly community of Nx
+                  users. With more than{' '}
+                  <span className="font-semibold">4k+ users</span>, this is a
+                  really great place to ask questions or to talk new ideas!
+                </p>
+              </a>
+            </div>
+            <div className="group relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-red-300">
+              <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
+                <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-red-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
+                <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#FF0000] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
+                <svg
+                  fill="currentColor"
+                  className="hi-solid hi-chart-pie relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>YouTube</title>
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                </svg>
+              </div>
+              <h4 className="mb-2 text-lg font-bold">Livestreams on Youtube</h4>
+              <a
+                href="https://www.youtube.com/nrwl_io/videos?utm_source=nx.dev"
+                rel="noreferrer"
+                target="_blank"
+                title="Nx Youtube channel"
+                className="focus:outline-none"
+              >
+                <span className="absolute inset-0" aria-hidden="true"></span>
+                <p className="leading-relaxed text-gray-600">
+                  Get access to live Q&A sessions, podcasts and tutorials on our
+                  Youtube channel updated regularly! Do not forget to subscribe
+                  to the Nx Show animated by Nx core team's members!
+                </p>
+              </a>
+            </div>
+          </div>
+          <div className="space-y-6 md:w-1/2">
+            <div className="group relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-blue-300">
+              <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
+                <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-blue-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
+                <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#1DA1F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
+                <svg
+                  fill="currentColor"
+                  className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Twitter</title>
+                  <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+                </svg>
+              </div>
+              <h4 className="mb-2 text-lg font-bold">Follow us on Twitter</h4>
+              <a
+                href="https://twitter.com/NxDevTools?utm_source=nx.dev"
+                rel="noreferrer"
+                target="_blank"
+                title="Nx Twitter account"
+                className="focus:outline-none"
+              >
+                <span className="absolute inset-0" aria-hidden="true"></span>
+                <p className="leading-relaxed text-gray-600">
+                  Stay up to date on everything about Nx by following
+                  @NxDevTools on Twitter.
+                </p>
+              </a>
+            </div>
+            <div className="group hover:border-nx-300 relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out">
+              <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
+                <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
+                <div className="bg-green-nx-base absolute inset-0 -rotate-6 transform rounded-2xl bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
+                <MailIcon className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110" />
+              </div>
+              <h4 className="mb-2 text-lg font-bold">Nx monthly newsletter</h4>
+              <a
+                href="https://go.nrwl.io/nx-newsletter?utm_source=nx.dev"
+                rel="noreferrer"
+                target="_blank"
+                title="Nx monthly newsletter subscription"
+                className="focus:outline-none"
+              >
+                <span className="absolute inset-0" aria-hidden="true"></span>
+                <p className="leading-relaxed text-gray-600">
+                  Subscribe and receive news about Nx releases, posts about new
+                  Nx features, details about new plugins, links to community
+                  resources, and additional Nx content.
+                </p>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export default ConnectWithUs;
diff --git a/nx-dev/ui-community/src/lib/create-nx-plugin.tsx b/nx-dev/ui-community/src/lib/create-nx-plugin.tsx
new file mode 100644
index 0000000000..f3e001bd6f
--- /dev/null
+++ b/nx-dev/ui-community/src/lib/create-nx-plugin.tsx
@@ -0,0 +1,130 @@
+import {
+  BookOpenIcon,
+  DocumentAddIcon,
+  ShareIcon,
+} from '@heroicons/react/solid';
+import { ReactComponentElement } from 'react';
+import Link from 'next/link';
+
+export function CreateNxPlugin(): ReactComponentElement<any> {
+  return (
+    <article
+      id="create-nx-plugin"
+      className="items-center lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
+    >
+      <header className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:px-0">
+        <h1 className="mb-4 text-3xl font-extrabold tracking-tight text-gray-900">
+          <span className="sr-only">Nx </span>Community Plugins
+        </h1>
+        <p className="mb-4 text-lg text-gray-500">
+          Core Nx plugins are created and maintained by the Nx team at Nrwl and
+          you can see all the available plugins when you run the{' '}
+          <code className="break-normal rounded border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-sm leading-6 text-gray-600">
+            nx list
+          </code>{' '}
+          command in your workspace.
+        </p>
+        <p className="mb-4 text-lg text-gray-500">
+          The community plugins are created and maintained by members of the Nx
+          community, will allow you to use the full power of the workspace while
+          using different technologies!
+        </p>
+
+        <ul className="mx-4 mb-4 list-disc">
+          <li className="mb-2">
+            <Link href="/nx-plugin/overview#generating-a-plugin">
+              <a className="text-lg font-normal  text-gray-500 hover:underline">
+                Create your Nx Plugin
+              </a>
+            </Link>
+          </li>
+          <li className="mb-2">
+            <Link href="/nx-plugin/overview#testing-your-plugin">
+              <a className="text-lg font-normal text-gray-500 hover:underline">
+                Test your plugin
+              </a>
+            </Link>
+          </li>
+          <li className="mb-2">
+            <Link href="/nx-plugin/overview#generating-a-plugin">
+              <a className="text-lg font-normal text-gray-500 hover:underline">
+                Publish your Nx Plugin
+              </a>
+            </Link>
+          </li>
+        </ul>
+      </header>
+      <div className="lg:col-start-2">
+        <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
+          <iframe
+            loading="lazy"
+            className="max-w-screen-sm"
+            width="100%"
+            height="315"
+            src="https://www.youtube.com/embed/XYO689PAhow"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+          />
+          <div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
+            <div className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50">
+              <div className="flex w-full px-4 py-3">
+                <div className="min-w-0 flex-1">
+                  <Link href="/nx-plugin/overview#generating-a-plugin">
+                    <a className="focus:outline-none">
+                      <span className="absolute inset-0" aria-hidden="true" />
+                      <p className="text-md mb-0.5 font-bold text-gray-600">
+                        Create a new Nx Plugin
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        Follow this guide to generate an Nx plugin to fit your
+                        needs
+                      </p>
+                    </a>
+                  </Link>
+                </div>
+                <div className="flex-shrink-0">
+                  <div className="rounded-full border border-gray-100 bg-white p-2 text-white">
+                    <DocumentAddIcon className="text-blue-nx-base h-6 w-6" />
+                  </div>
+                </div>
+              </div>
+              <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
+                <BookOpenIcon className="h-4 w-4" />
+                <p className="text-xs font-bold">nx-plugin/overview</p>
+              </div>
+            </div>
+            <div className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50">
+              <div className="flex w-full px-4 py-3">
+                <div className="min-w-0 flex-1">
+                  <Link href="/nx-plugin/overview#publishing-your-nx-plugin">
+                    <a className="focus:outline-none">
+                      <span className="absolute inset-0" aria-hidden="true" />
+                      <p className="text-md mb-0.5 font-bold text-gray-600">
+                        Publish an Nx Plugin
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        Follow this guide to publish your new and shiny Nx
+                        plugin
+                      </p>
+                    </a>
+                  </Link>
+                </div>
+                <div className="flex-shrink-0">
+                  <div className="rounded-full border border-gray-100 bg-white p-2 text-white">
+                    <ShareIcon className="text-blue-nx-base h-6 w-6" />
+                  </div>
+                </div>
+              </div>
+              <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
+                <BookOpenIcon className="h-4 w-4" />
+                <p className="text-xs font-bold">nx-plugin/overview</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export default CreateNxPlugin;
diff --git a/nx-dev/ui-community/src/lib/plugin-directory.tsx b/nx-dev/ui-community/src/lib/plugin-directory.tsx
new file mode 100644
index 0000000000..4bccf18180
--- /dev/null
+++ b/nx-dev/ui-community/src/lib/plugin-directory.tsx
@@ -0,0 +1,64 @@
+import { ReactComponentElement } from 'react';
+import { useState } from 'react';
+import { PluginCard } from '@nrwl/nx-dev/ui-common';
+import { SearchIcon } from '@heroicons/react/solid';
+
+interface Plugin {
+  description: string;
+  name: string;
+  url: string;
+}
+
+export function PluginDirectory({
+  pluginList,
+}: {
+  pluginList: Plugin[];
+}): ReactComponentElement<any> {
+  const [searchTerm, setSearchTerm] = useState('');
+  return (
+    <div
+      id="plugin-directory"
+      className="max-w-screen mx-auto p-4 lg:max-w-7xl"
+    >
+      <div className="flex w-full flex-col justify-between gap-8 md:flex-row ">
+        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
+          Nx Plugin Directory
+        </h2>
+        <div>
+          <label htmlFor="search" className="sr-only">
+            Quick search
+          </label>
+          <div className="relative">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <SearchIcon className="h-5 w-5 text-gray-400" />
+            </div>
+            <input
+              id="search"
+              name="search"
+              className="focus:border-blue-nx-base focus:ring-blue-nx-base block w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 sm:text-sm"
+              placeholder="Quick search"
+              onChange={(event) => setSearchTerm(event.target.value)}
+              type="search"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="my-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {pluginList
+          .filter((plugin) =>
+            !!searchTerm ? plugin.name.includes(searchTerm) : true
+          )
+          .map((plugin) => (
+            <PluginCard
+              key={plugin.name}
+              name={plugin.name}
+              description={plugin.description}
+              url={plugin.url}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export default PluginDirectory;
diff --git a/nx-dev/ui-community/tsconfig.json b/nx-dev/ui-community/tsconfig.json
new file mode 100644
index 0000000000..4c089585ed
--- /dev/null
+++ b/nx-dev/ui-community/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/nx-dev/ui-community/tsconfig.lib.json b/nx-dev/ui-community/tsconfig.lib.json
new file mode 100644
index 0000000000..252904bb73
--- /dev/null
+++ b/nx-dev/ui-community/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/nx-dev/ui-community/tsconfig.spec.json b/nx-dev/ui-community/tsconfig.spec.json
new file mode 100644
index 0000000000..67f149c4c0
--- /dev/null
+++ b/nx-dev/ui-community/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/package.json b/package.json
index 99a5253e57..01f80156ac 100644
--- a/package.json
+++ b/package.json
@@ -307,4 +307,4 @@
     "**/xmlhttprequest-ssl": "~1.6.2",
     "immer": "~9.0.6"
   }
-}
\ No newline at end of file
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 6943802db7..2c82e8ad25 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -59,6 +59,7 @@
       ],
       "@nrwl/nx-dev/ui-commands": ["./nx-dev/ui-commands/src/index.ts"],
       "@nrwl/nx-dev/ui-common": ["./nx-dev/ui-common/src/index.ts"],
+      "@nrwl/nx-dev/ui-community": ["nx-dev/ui-community/src/index.ts"],
       "@nrwl/nx-dev/ui-home": ["./nx-dev/ui-home/src/index.ts"],
       "@nrwl/nx-dev/ui-member-card": ["./nx-dev/ui-member-card/src/index.ts"],
       "@nrwl/nx-dev/ui-sponsor-card": ["./nx-dev/ui-sponsor-card/src/index.ts"],
diff --git a/workspace.json b/workspace.json
index e646841993..afaab9b221 100644
--- a/workspace.json
+++ b/workspace.json
@@ -51,6 +51,7 @@
     "nx-dev-feature-versions-and-flavors": "nx-dev/feature-versions-and-flavors",
     "nx-dev-ui-commands": "nx-dev/ui-commands",
     "nx-dev-ui-common": "nx-dev/ui-common",
+    "nx-dev-ui-community": "nx-dev/ui-community",
     "nx-dev-ui-home": "nx-dev/ui-home",
     "nx-dev-ui-member-card": "nx-dev/ui-member-card",
     "nx-dev-ui-sponsor-card": "nx-dev/ui-sponsor-card",