Quick Start

This walks you from an installed package to a rendered component in about five minutes. It uses standalone React with no SharePoint or Dataverse — everything here works in a plain Vite/CRA/Next app and in the Code Apps webplayer.

1. Import the stylesheet once

SpartanFX ships a single bundled stylesheet and registers its in-house icon set as a side effect of the entry barrel. Import the package once near your app root:

main.tsx

import '@spartanfx/react'; // registers icons + styles (side-effecting, keep it)

2. Render a component

Every standalone component comes from the default entry point:

App.tsx

import * as React from 'react';
import { Accordion, Rating, Stepper } from '@spartanfx/react';

export default function App() {
  const [rating, setRating] = React.useState(3);

  return (
    <div style={{ maxWidth: 480, margin: '2rem auto', display: 'grid', gap: 16 }}>
      <Accordion title="What is SpartanFX?" defaultOpen>
        A React + TypeScript component library that runs across SPFx, PCF,
        Power Apps Code Apps, and standalone React.
      </Accordion>

      <Rating value={rating} onChange={setRating} />

      <Stepper
        steps={[{ label: 'Install' }, { label: 'Import' }, { label: 'Ship' }]}
        activeStep={1}
      />
    </div>
  );
}

That's a working SpartanFX screen — no host context, no SharePoint, no icon font.

Try it live

Every component has an interactive demo in the Showcase where you can edit props and copy the code.

3. Add data (optional)

Components like DataTable, DocumentManager, and TaskManager are UI in the default entry point and gain a data source through an adapter hook from /spfx or /codeapps:

// SharePoint Framework
import { DataTable } from '@spartanfx/react';
import { useSharePointDataTable } from '@spartanfx/react/spfx';

// Power Apps Code App
import { DataTable } from '@spartanfx/react';
import { useCASharePointDataTable } from '@spartanfx/react/codeapps';

The component is identical; only the adapter changes per host. Read Architecture to understand this split, then browse the Components catalog.