Copilot UX component
Theme and design for the Copilot canvas
A Copilot UX component with sample project cards that follows the Copilot light and dark themes and adapts to the inline and fullscreen display modes.
- Updated
- October 11, 2026
- Built with
- React
- SPFx version
- 1.24.0-beta.5
- Products
- SharePoint, Microsoft Copilot
Overview
What this sample demonstrates
The finished solution for the article Theme and design for the Copilot canvas. The DesignShowcase component shows sample project cards built with Fluent UI. It follows the Copilot light and dark themes, adapts its layout to the inline and fullscreen display modes and to the width of the canvas, and keeps the selected card when the display mode changes.
The component uses bundled sample data. It makes no network calls and requests no API permissions; the solution package is the only thing to deploy.
Gallery
See the component in action
Documentation
Setup and implementation
Summary
This sample is the finished solution for the article Theme and design for the Copilot canvas. Its Copilot UX component shows sample project cards that follow the Copilot light and dark themes and adapt to the inline and fullscreen display modes.
Compatibility
Applies to
Get your own free development tenant by subscribing to the Microsoft 365 developer program
Contributors
Version history
| Version | Date | Comments |
|---|---|---|
| 1.0 | October 11, 2026 | Initial release |
Prerequisites
- The Node.js version in the
enginesfield ofpackage.json - Permission to deploy to the tenant app catalog
Minimal path to awesome
- Clone this repository (or download this solution as a .ZIP file then unzip it)
- From your command line, change your current directory to the directory containing this sample (
tutorial-theme-and-design, located undersamples) - In the command line run:
npm installnpx heft start --nobrowser
- Go to the Copilot Workbench at
https://<tenant>.sharepoint.com/_layouts/15/copilotworkbench.aspxand accept the loading of debug manifests.
To deploy the sample to Microsoft 365 Copilot:
- In the command line run
npm run build. - Upload
sharepoint/solution/tutorial-theme-and-design.sppkgto the tenant app catalog and select Enable app. - In the app catalog, select the app and select Add to Teams.
- In Microsoft 365 Copilot, find the agent and add it. A new agent can take some time to appear; signing out and in again can help.
Features
The solution contains one declarative agent and one Copilot UX component:
| Component | Tool | Display modes |
|---|---|---|
DesignShowcase |
ShowDesignShowcase |
inline, fullscreen |
In the inline display mode, the component shows the first four projects in a single column, with a button to open all the projects in the fullscreen display mode. The colors come from the Copilot theme, so the same component works in the light and dark themes.
In the fullscreen display mode, the component shows all the projects in a grid with a details pane for the selected project.
The component shows bundled sample data. It makes no network calls and requests no API permissions. The solution package is the only thing to deploy.
This sample illustrates the following concepts:
- following the Copilot light and dark themes with Fluent UI
- adapting the layout to the inline and fullscreen display modes and to the width of the canvas
- keeping the selection when the display mode changes
- a tool with no parameters
Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
You can try looking at issues related to this sample to see if anybody else is having the same issues.
If you encounter any issues using this sample, create a new issue.
Disclaimer
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.