Skip to content
TanStackIntent
TanStack Intent/Registry/@payfit/unity-components

@payfit/unity-components

unity-setup-feature-plugin

54 linesSource

Wire Unity into a feature plugin in the hr-apps monorepo. Run the setup-unity nx generator (installs packages, configures TailwindCSS 4, sets up TS types, adds providers). Provider order at app root: IntlProvider → I18nProvider (react-aria-components) → UnityIconsProvider. Import @payfit/unity-themes/css/unity.css once. Merge @payfit/unity-components/i18n JSON into the IntlProvider messages, keyed by locale.

Bootstrap Unity for a feature plugin once. After this skill completes you can import any export from @payfit/unity-components without further wiring.

If in hr-apps, use this generator

shell
pnpm nx g @payfit/nx-tools:setup-unity \
  --project=<YOUR_PROJECT> \
  --withIcons --withIllustrations

The generator installs @payfit/unity-components, @payfit/unity-themes, @payfit/unity-icons, and (with --withIllustrations) @payfit/unity-illustrations from the workspace catalog; wires the TailwindCSS 4 plugin with the Unity theme preset; adds the @payfit/unity-themes reference to the project tsconfig; and mounts the providers in the correct order at the project entry. Do not hand-edit those files afterwards — re-run the generator.

Companion generator:

shell
# Storybook for the project
pnpm nx g @payfit/nx-tools:storybook --project=<YOUR_PROJECT>

Setup (manual fallback)

Use only when the generator cannot run (e.g. setting up a sample app outside the monorepo).

All details in guide: libs/shared/unity/components/src/docs/tutorials/Getting Started.mdx