redhat-developer · Gerry-Forde · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025 · Aug 5, 2025
diff --git a/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc b/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc
@@ -0,0 +1,55 @@
+[id="installing-configuring-quickstart-plugin"]
+= Installing and configuring the Quickstart plugin
+
+The Quickstart plugin provides a guided onboarding experience for new users of {product}. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform.
+
+== Installation
+The Quickstart plugin is pre-loaded in {product-short} with basic configuration properties, and enabled by default. To disable it, set the disabled property to `true` as follows:
+
+[source,yaml]
+----
+global:
+  dynamic:
+    includes:
+      - dynamic-plugins.default.yaml
+    plugins:
+      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart
+        disabled: true
+----
+
+== Configuration
+Configure quickstart items in your `app-config.yaml`:
+
+[source,yaml]
+----
+app:
+  quickstart:
+    - title: 'Welcome to Developer Hub'
+      description: 'Learn the basics of navigating the Developer Hub interface'
+      icon: 'home'
+      cta:
+        text: 'Get Started'
+        link: '/catalog'
+    - title: 'Create Your First Component'
+      description: 'Follow our guide to register your first software component'
+      icon: 'code'
+      cta:
+        text: 'Create Component'
+        link: '/catalog-import'
+    - title: 'Explore Templates'
+      description: 'Discover available software templates to bootstrap new projects'
+      icon: 'template'
+      cta:
+        text: 'Browse Templates'
+        link: '/create'
+----
+
+== Configuration Schema
+Each quickstart item supports the following properties:
+
+* `title` (required): The display title for the quickstart step
+* `description` (required): A brief description of what the step covers
+* `icon` (optional): Icon identifier (supports Material UI icons)
+* `cta` (optional): Call-to-action object with:
+* `text`: Button text
+* `link`: Target URL or route
diff --git a/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc b/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc
@@ -0,0 +1,72 @@
+[id="using-quickstart-plugin"]
+= Using the Quickstart plugin
+
+The Quickstart plugin provides a guided onboarding experience for new users of {product}. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform.
+
+== Features
+Interactive Drawer Interface:: Displays quickstart steps in a slide-out drawer.
+Progress Tracking:: Tracks completion status of individual steps with persistent storage.
+Configurable Content:: Define custom quickstart items through app configuration.
+Visual Progress Indicator:: Shows overall completion progress with a progress bar.
+Call-to-Action Support:: Each step can include clickable action buttons.
+
+.Procedure
+. Open the Quickstart drawer
+.. Navigate to the **top right corner** of the {product-short} interface.
+.. Click the icon labeled **“Quick start”** (represented by a question mark icon in the top menu).
+.. The drawer panel on the **right-hand side** of the screen slides open.
+
+. Review the available Quickstart items
++
+In the drawer, you will see a list of onboarding tasks, including:
+
+Set up authentication::
+Configure secure login credentials to protect your account.  
+
+Configure RBAC::  
+  Set up Role-Based Access Control for your team.
+
+Configure Git::  
+  Connect your Git repositories for source control and automation.
+
+Manage plugins::  
+  Enable or disable additional functionality in the Hub.
++
+Each item may be expandable and interactive.
+
+. Track Your Progress
+* Each Quick Start item includes a **status indicator**, such as:
+  ** _Not started_
+  ** _In progress_
+  ** _Completed_
++
+As you complete each step or task, your progress is automatically tracked.
+
+[NOTE]
+====
+Quickstart items are **configurable**, meaning the content and order can vary depending on your Red Hat Developer Hub instance.
+
+You can **revisit** or **reset** tasks at any time for review or team onboarding.
+
+You can hide the Quickstart drawer by clicking *Hide*
+====
+
+////
+= Using the Context Hook
+Access quickstart drawer functionality in your components:
+
+[source,yaml]
+----
+import { useQuickstartDrawerContext } from '@red-hat-developer-hub/backstage-plugin-quickstart';
+
+const MyComponent = () => {
+  const { openDrawer, closeDrawer, isDrawerOpen } =
+    useQuickstartDrawerContext();
+
+  return <button onClick={openDrawer}>Open Quickstart Guide</button>;
+};
+----
+////
+
+= Progress persistence
+The plugin automatically saves progress, so users can continue where they left off even after refreshing the page or returning later.
diff --git a/assemblies/assembly-configuring-the-quickstarts.adoc b/assemblies/assembly-configuring-the-quickstarts.adoc
@@ -0,0 +1,10 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: customizing-the-quickstarts
+[id="{context}"]
+= Customizing the Quickstart plugin
+
+include::modules/configuring-the-quickstarts/con-about-quickstarts.adoc[leveloffset=+1]
+
+include::modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc[leveloffset=+1]
+
+include::modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc[leveloffset=+1]
diff --git a/assemblies/dynamic-plugins/assembly-configuring-rhdh-plugins.adoc b/assemblies/dynamic-plugins/assembly-configuring-rhdh-plugins.adoc
@@ -16,6 +16,9 @@ include::../../artifacts/rhdh-plugins-reference/keycloak/keycloak-plugin-admin.a
 // Nexus
 include::../../artifacts/rhdh-plugins-reference/nexus-repository-manager/nexus-repository-manager-plugin-admin.adoc[leveloffset=+1]
 
+// Quick start
+include::../../artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc[leveloffset=+1]
+
 // Tekton
 include::../../artifacts/rhdh-plugins-reference/tekton/tekton-plugin-admin.adoc[leveloffset=+1]
 

diff --git a/assemblies/dynamic-plugins/assembly-using-rhdh-plugins.adoc b/assemblies/dynamic-plugins/assembly-using-rhdh-plugins.adoc
@@ -16,6 +16,9 @@ include::../../artifacts/rhdh-plugins-reference/keycloak/keycloak-plugin-user.ad
 // Nexus
 include::../../artifacts/rhdh-plugins-reference/nexus-repository-manager/nexus-repository-manager-plugin-user.adoc[leveloffset=+1]
 
+// Quickstart
+include::../../artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc[leveloffset=+1]
+
 // Tekton
 include::../../artifacts/rhdh-plugins-reference/tekton/tekton-plugin-user.adoc[leveloffset=+1]
 

diff --git a/images/rhdh/about-quickstarts.png b/images/rhdh/about-quickstarts.png
diff --git a/modules/configuring-the-quickstarts/con-about-quickstarts.adoc b/modules/configuring-the-quickstarts/con-about-quickstarts.adoc
@@ -0,0 +1,13 @@
+:_mod-docs-content-type: CONCEPT
+
+[id="about-quickstarts_{context}"]
+= About Quickstarts
+
+The Quickstart plugin provides a guided onboarding experience for new users of {product}. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform.
+
+The Quickstart plugin is enabled by default and includes the following components:
+
+Set up authentication:: Set up secure login credentials to protect your account from unauthorized access.
+Configure RBAC:: Assign roles and permissions to control who can view, create, or edit resources, ensuring secure and efficient collaboration.
+Configure Git:: Connect your Git providers, such as GitHub to manage code, automate workflows, and integrate with platform features.
+Manage plugins:: Browse and install extensions to add features, connect with external tools, and customize your experience.
diff --git a/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc b/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc
@@ -0,0 +1,55 @@
+[id="customizing-your-product-quickstart_{context}"]
+= Customizing your {product} Quickstart
+
+You can configure the {product} Quickstart plugin to create a customized onboarding experience for your {product-short} administrators. 
+
+.Prerequisites
+You must have sufficient permissions as a platform engineer.
+
+.Procedure
+. Update your your `app-config.yaml`, as follows:
++
+.Example of customizing the Quickstart plugin 
+[source,yaml]
+----
+app:
+  quickstart:
+    - title: 'Welcome to Developer Hub' # <1>
+      description: 'Learn the basics of navigating the Developer Hub interface' # <2>
+      icon: 'home' # <3>
+      cta:
+        text: 'Get Started' # <4>
+        link: '/catalog' # <5>
+    - title: 'Create Your First Component'
+      description: 'Follow our guide to register your first software component'
+      icon: 'code'
+      cta:
+        text: 'Create Component'
+        link: '/catalog-import'
+    - title: 'Explore Templates'
+      description: 'Discover available software templates to bootstrap new projects'
+      icon: 'template'
+      cta:
+        text: 'Browse Templates'
+        link: '/create'
+----
+<1> (Required) The display title for the quickstart step.
+<2> (Required) A brief description of what the step covers.
+<3> Icon identifier (supports Material UI icons).
+<4> CTA button text.
+<5> CTA target URL or route.
+
+== Disabling the Quickstart plugin
+The Quickstart plugin is pre-loaded in {product-short} with basic configuration properties, and enabled by default. To disable it, set the disabled property to `true` as follows:
+
+.Example of disabling the Quickstart plugin
+[source,yaml]
+----
+global:
+  dynamic:
+    includes:
+      - dynamic-plugins.default.yaml
+    plugins:
+      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart
+        disabled: true
+----
diff --git a/...guring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc b/...guring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc
@@ -0,0 +1,22 @@
+[id='proc-starting-and-completing-modules-in-quickstarts_{context}']
+= Starting and completing Quickstart onboarding steps
+
+You can start and complete the Quickstart onboarding steps at your own pace.
+
+.Prerequisites
+. Your platform engineer has granted you access to the Quickstart plugin.
+
+.Procedure
+To start a Quickstart step in {product}, complete the following steps:
+
+. In your {product-very-short} navigation menu, click on the (`?`) icon.
+. Click *Quick start*.
+. Select the Quickstart step that you would like to begin.
+. To close the Quickstart drawer, click *Hide*.
++
+image::rhdh/about-quickstarts.png[About Quickstarts]
++
+[NOTE]
+====
+Your progress is tracked and displayed at the bottom of the drawer.
+====
diff --git a/titles/customizing/master.adoc b/titles/customizing/master.adoc
@@ -30,6 +30,8 @@ include::assemblies/assembly-configuring-the-global-header.adoc[leveloffset=+1]
 
 include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1]
 
+include::assemblies/assembly-configuring-the-quickstarts.adoc[leveloffset=+1]
+
 
 include::assemblies/assembly-customizing-the-tech-radar-page.adoc[leveloffset=+1]
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,6 +30,8 @@ include::assemblies/assembly-configuring-the-global-header.adoc[leveloffset=+1]

		include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1]

		include::assemblies/assembly-configuring-the-quickstarts.adoc[leveloffset=+1]


		include::assemblies/assembly-customizing-the-tech-radar-page.adoc[leveloffset=+1]

Expand Down