Document Card Carousel in the SharePoint Framework (SPFx) Web Part

This article provides steps to implement a Document Card Carousel in the SharePoint Framework (SPFx) web part using Fluent UI.
The carousel displays document previews in a rotating card layout, making it ideal for presenting files from a SharePoint document library.

⚙️ Install Required Dependencies

Install Fluent UI and PnP libraries:

npm install @pnp/sp @pnp/common @pnp/logging @pnp/odata --save
npm install @fluentui/react --save

🧩 Configure Custom Properties

Create a new source file under your web part’s components folder, and define an interface for your state.

export interface ISpfxFluentuiDocumentcardState {
  carouselElements: JSX.Element[];
}

In your React web part class, update the render and state definitions as follows:

public render(): void {
  const element: React.ReactElement<ISpfxFluentuiDocumentcardProps> = React.createElement(
    SpfxFluentuiDocumentcard,
    {
      description: this.properties.description,
      context: this.context
    }
  );
  ReactDom.render(element, this.domElement);
}

⚛️ Implement the Carousel Component

In your SpfxFluentuiDocumentcard.tsx file, import Fluent UI and PnP modules:

import * as React from 'react';
import styles from './SpfxFluentuiDocumentcard.module.scss';
import { ISpfxFluentuiDocumentcardProps } from './ISpfxFluentuiDocumentcardProps';
import { sp } from '@pnp/sp/presets/all';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import {
  DocumentCard,
  DocumentCardActivity,
  DocumentCardLocation,
  DocumentCardPreview,
  DocumentCardDetails,
  DocumentCardTitle,
  IDocumentCardPreviewProps,
  DocumentCardType,
  ImageFit
} from 'office-ui-fabric-react/lib/DocumentCard';

Render Function

public render(): React.ReactElement<ISpfxFluentuiDocumentcardProps> {
  return (
    <div className={styles.spfxFluentuiDocumentcard}>
      <h2>Recent Documents</h2>
      {this.state.carouselElements}
    </div>
  );
}

📄 Fetch and Render Files from SharePoint

Add this function to retrieve and map document data into carousel cards:

@autobind
private async _getFiles() {
  let cardsdata: any[] = [];
  const items: any[] = await sp.web.getFolderByServerRelativeUrl("/sites/TheLanding/Books")
    .files.select().expand("ListItemAllFields,Author").get();

  let siteurl = this.props.context.pageContext.web.absoluteUrl;
  let siterooturl = this.props.context.pageContext.web.absoluteUrl.replace(
    this.props.context.pageContext.web._serverRelativeUrl, ""
  );

  items.forEach(function (v, i) {
    let url = siterooturl + v.ServerRelativeUrl;
    cardsdata.push({
      thumbnail: siteurl + '/_layouts/15/getpreview.ashx?resolution=1&path=' + encodeURIComponent(url),
      title: v.Name,
      name: v.Author.Title,
      profileImageSrc: siteurl + "/_layouts/15/userphoto.aspx?AccountName=" + v.Author.LoginName + "&Size=L",
      location: "SharePoint",
      activity: v.TimeLastModified,
      url: url
    })
  });

  let cardsElements: JSX.Element[] = [];

  cardsdata.forEach(item => {
    const previewProps: IDocumentCardPreviewProps = {
      previewImages: [
        {
          previewImageSrc: item.thumbnail,
          imageFit: ImageFit.cover,
          height: 130
        }
      ]
    };
    cardsElements.push(
      <div>
        <DocumentCard
          type={DocumentCardType.normal}
          onClick={() => window.open(item.url, "_blank")}>
          <DocumentCardPreview {...previewProps} />
          <DocumentCardLocation location={item.location} />
          <DocumentCardDetails>
            <DocumentCardTitle title={item.title} shouldTruncate={true} />
            <DocumentCardActivity
              activity={item.activity}
              people={[{ name: item.name, profileImageSrc: item.profileImageSrc }]}
            />
          </DocumentCardDetails>
        </DocumentCard>
      </div>
    );
  });
  this.setState({ carouselElements: cardsElements });
}

🧠 Explanation

PnPjs is used to fetch files and metadata from the SharePoint library.
DocumentCard components visually represent each file.
ImageFit.cover ensures consistent thumbnail sizing.
The component dynamically generates a carousel of cards.
Clicking a card opens the document in a new tab.

🚀 Deploy the Solution

Bundle and deploy the web part:

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

Upload the .sppkg file to the App Catalog, deploy it, and add it to a SharePoint page.

📦 GitHub Source

View full SPFx project on GitHub:Document Card Carousel in the SharePoint Framework (SPFx) Web Part

GitHub

✅ Summary

You’ve successfully implemented a Fluent UI Document Card Carousel web part in SPFx.
This approach helps showcase SharePoint document libraries in an attractive, modern layout that enhances user engagement.