Component Showcase
Explore 38 production-ready React components, with dedicated drop-in support for SharePoint Framework
Accordion
This is the accordion content. It can contain any React components, text, images, forms, or other nested accordions.
- Feature 1
- Feature 2
- Feature 3
Expandable/collapsible content sections with smooth animations
ActionPersona
User persona display with optional action buttons
AppParameters
SPFxCentralized configuration management from SharePoint lists
AppShield
Global error boundary with fallback UI and error logging
BreadCrumb
Breadcrumb navigation with overflow handling, custom separators, and icons
Carousel
Responsive carousel/slider with auto-play, touch gestures, and keyboard navigation
ComboBoxPeoplePicker
SPFxCombo box style people picker with type-ahead search
ConfirmDialog
Modal confirmation dialog with customizable actions
CopyBox
Text display with one-click copy-to-clipboard functionality
DataGrid
ID⇅ | Name *⇅ | Department⇅ | Status⇅ | Date⇅ | Progress⇅ |
|---|
High-performance editable grid with sorting, inline editing and custom cell renderers
DataMatrix
| product \ region | East | North | South | West | (Blank) | Total |
|---|---|---|---|---|---|---|
| Widget A | 1100 $ | 2000 $ | 2000 $ | — | 500 $ | 5600 $ |
| Widget B | — | 1500 $ | 1800 $ | 2200 $ | — | 5500 $ |
| Widget C | 1300 $ | — | 900 $ | 1700 $ | — | 3900 $ |
| (Blank) | — | 600 $ | — | — | — | 600 $ |
| Total | 2400 $ | 4100 $ | 4700 $ | 3900 $ | 500 $ | 15600 $ |
Transforms a flat dataset into a pivot-style matrix, grouping records by configurable row and column fields and displaying aggregated values as counts or sums in a clean, modern grid layout
DataTable
Generic data table with DetailsList and responsive tile view. Supports filtering, sorting, search, export, and column selection. Use useSharePointDataTable for SharePoint integration
DocumentManager
Full-featured document management with grid/list views, upload, multi-select, and SharePoint adapter
DropFileArea
Drag-and-drop file upload zone with preview
ExportToExcel
SPFxOne-click export of data to Excel format
ExtendedSearchBox
Enhanced search box with debounce and clear functionality
Grid
Flexible responsive grid system with configurable columns and gaps
ImagePicker
SPFxImage selection with preview and upload capabilities
InfoTooltip
Contextual help tooltips with customizable trigger and content
LibraryAttachments
SPFxManage SharePoint library attachments with upload/download
ListForm
SPFxAuto-generated forms from SharePoint list schemas with validation
ListViewDeprecated
SPFxFeature-rich data table with sorting, filtering, pagination and bulk actions
ListViewPivot
SPFxTab-based navigation for switching ListView contexts
Loading
Inline loading spinner with optional label
LoadingPanel
Full-area loading overlay with backdrop
MessageBar
Dismissible notification bar for info, warning, error and success messages
NotificationCenter
Notification management with bell icon, panel, and toasts. Supports Web Storage, SharePoint, or custom backends
Pager
| ID | Name | Description |
|---|---|---|
| #1 | Item 1 | This is a description for item 1 |
| #2 | Item 2 | This is a description for item 2 |
Pagination control with page size options
PeoplePicker
SPFxSharePoint people/group picker with search and validation
Planner
Gantt-style timeline planner with drag-and-drop, grouping and period views
ProgressBar
Determinate or indeterminate progress indicator
RoosterRichText
Rich text editor powered by Rooster.js
StatusBadge
Visual status indicators with customizable colors and labels
Stepper
Visual stepper indicator with step progression
TaskManager
Not Started
3In Progress
3Completed
1Blocked
1Task management with Kanban board and list views. Drag & drop reordering, status columns, and SharePoint integration via useSharePointTaskManager hook
Timeline
Visualizes key milestones and progress across a timeline
TreeView
Hierarchical tree view with drag & drop, custom rendering, and responsive burger menu
VersionHistoryForm
SPFxDisplay and manage SharePoint item version history