Custom Property Pane using Fluent UI Panel in SPFx

This article provides step-by-step guidance to implement a Custom Property Pane using Fluent UI Panel in the SharePoint Framework (SPFx) web part.

The Fluent UI Panel provides an off-canvas side drawer that appears when editing configurations, making it ideal for building modern SharePoint UI experiences.

⚙️ Install Required Dependencies

npm install @fluentui/react --save

This installs Fluent UI React, providing modern Microsoft design components.

🧩 Define the Component State

Create a file named ISpfxFluentuiPanelState.ts under the components folder:

import { IDropdownOption } from 'office-ui-fabric-react';
export interface ISpfxFluentuiPanelState {
  showPanel: boolean;
  projectName: string;
  projects: string[];
}

⚛️ Implement the Fluent UI Panel

Create SpfxFluentuiPanel.tsx in your components folder.

import * as React from 'react';
import styles from './SpfxFluentuiPanel.module.scss';
import { ISpfxFluentuiPanelProps } from './ISpfxFluentuiPanelProps';
import { ISpfxFluentuiPanelState } from './ISpfxFluentuiPanelState';
import { PrimaryButton, DefaultButton, Stack, Panel, PanelType, TextField } from '@fluentui/react';
import { sp } from '@pnp/sp/presets/all';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';

export default class SpfxFluentuiPanel extends React.Component<ISpfxFluentuiPanelProps, ISpfxFluentuiPanelState> {
  constructor(props: ISpfxFluentuiPanelProps) {
    super(props);
    this.state = { showPanel: false, projects: [], projectName: '' };
  }

  public render(): React.ReactElement<ISpfxFluentuiPanelProps> {
    return (
      <div className={styles.spfxFluentuiPanel}>
        <PrimaryButton text="Add Project" onClick={() => this.setState({ showPanel: true })} />
        <Panel
          isOpen={this.state.showPanel}
          onDismiss={this.cancelClick}
          type={PanelType.medium}
          headerText="New Project Form"
          closeButtonAriaLabel="Close"
        >
          <Stack tokens={{ childrenGap: 20 }}>
            <TextField
              label="Project Name"
              placeholder="Enter a new project name"
              value={this.state.projectName}
              onChange={(e, val) => this.setState({ projectName: val || '' })}
              required
            />
            <PrimaryButton text="Save" onClick={this.saveClick} />
          </Stack>
        </Panel>
      </div>
    );
  }

  @autobind
  private async saveClick(): Promise<void> {
    const projectName = this.state.projectName.trim();
    if (!projectName) return;

    const list = sp.web.lists.getByTitle("Projects");
    await list.items.add({ Title: projectName });

    this.setState(prev => ({
      showPanel: false,
      projects: [...prev.projects, projectName],
      projectName: ''
    }));
  }

  @autobind
  private cancelClick(): void {
    this.setState({ showPanel: false });
  }
}

💡 Explanation

The PrimaryButton triggers the Fluent UI Panel.
Inside the panel, a TextField captures the new project name.
On clicking Save, it creates a new SharePoint list item via PnP JS.
The Panel automatically closes when the item is saved.

🧠 Example Output

When you click “Add Project,” a modern side panel appears, allowing you to input the project name and save it directly to the SharePoint list.

🚀 Deploy the Solution

Build and deploy your solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog and deploy it across the tenant.

📂 GitHub Source

View full SPFx project on GitHub:Custom Property Pane using Fluent UI Panel in SPFx

GitHub

✅ Summary

This example demonstrates how to integrate the Fluent UI Panel with PnP JS to build a user-friendly property configuration interface in SharePoint Framework.
It’s modern, elegant, and fits perfectly with Microsoft 365 design standards.