SpartanFX
SpartanFX (@spartanfx/react) is a React + TypeScript component library that renders the same components across four runtime targets — SharePoint Framework (SPFx), Power Apps component framework (PCF), Power Apps Code Apps, and plain standalone React.
If you know React and TypeScript, you already know most of what you need. SpartanFX adds a curated set of enterprise components (data tables, document managers, list forms, planners, task managers, rich text, people pickers…) plus the data adapters that wire them to SharePoint or Dataverse — without locking you into any one host.
Why it exists
Most Microsoft-ecosystem component libraries assume a single host (usually SPFx) and break the moment you move the code somewhere else — most visibly when an icon font fails to load in the Power Apps Code Apps webplayer. SpartanFX is built so that:
- One import surface, many hosts. The UI is host-agnostic; host-specific behavior lives behind adapters you opt into.
- Zero icon-font / CDN dependency. Icons render as in-house inline SVG, so they work where Fluent's MDL2 font never loads. See Icons.
- Typed end to end. Every component ships its props, tokens, and class-name contracts as TypeScript types.
Choose your entry point
SpartanFX exposes three import paths that map directly to how your app is hosted:
| Import | Use it when | Documented under |
|---|---|---|
@spartanfx/react | Standalone React, or any host — pure UI with no SharePoint/Dataverse dependency | API Reference → index |
@spartanfx/react/spfx | Your component runs inside SharePoint Framework (needs @pnp/sp, WebPartContext, …) | API Reference → spfx |
@spartanfx/react/codeapps | You are building a Power Apps Code App with pac code generated services | API Reference → codeapps |
This split is the core mental model — read Architecture next to understand how a single component like DataTable is UI in one entry point and a SharePoint/Dataverse adapter in another.
Where to go next
- Installation — add the package and authenticate against the feed.
- Quick Start — render your first component in five minutes.
- Core Concepts — architecture, theming, and icons.
- Components — the full catalog, with live demos in the Showcase.
- API Reference — generated, exhaustive reference for every public symbol.