Pylon UI

Pylon UI contains the frontend React components used as part of the standard BridgePhase Tech Challenge toolkit.

Pylon UI is being significantly enhanced to allow React development using the Mantine component library but with a custom theme applied which applies styling and DOM class name conventions which adhere to the USWDS design system. The motivation for this is that Mantine has proven to be a more convenient library for quickly standing up frontends than existing React implementations of USWDS (e.g. trussworks/react-uswds).

Running Sample App

Pylon UI has been written and tested using Node v.24. It contains a .nvmrc which specifies this version target, so that if you have the Node Version Manager (NVM) tool installed (e.g. via the Homebrew package manager with brew install nvm) you can switch to it by just running nvm use.

nvm use
npm install
npm run dev

Using Pylon UI in Another Project

Pylon UI is published as a public package on the npm registry, so consuming projects do not need a GitHub Packages token or project-level .npmrc registry mapping.

• In your project, install Pylon UI by running: npm install @bridgephasenpm/pylon-ui

Known Issues

• Mantine Grid container doesn't work with USWDS styles imported (SimpleGrid does work)
• Alerts don't support USWDS slim or headingLevel properties
• DateInput is not USWDS themed yet
  • May require a custom component?

USWDS Component Targets

Components used in Waves application:

| USWDS | Mantine | Status | | ----------------- | ---------------------- | ------------------------------------------------------ | | Accordion | Accordion | | | Address | PylonFooterItems | | | Alert | Alert | | | Breadcrumb | Breadcrumbs* | | | BreadcrumbItem | Breadcrumbs* | | | Button | Button | | | ButtonGroup | Group | | | Card | Card | | | CardBody | Card.Section** | | | CardGroup | PylonCardGroup | | | CardHeader | Card.Section** | | | Checkbox | Checkbox | | | Collection | PylonCollection | | | CollectionHeading | PylonCollectionHeading | | | CollectionItem | PylonCollectionItem | | | CollectionMeta | PylonCollectionMeta | | | DatePicker | DateInput | | | ErrorMessage | Input.Error | | | Footer | PylonFooter | | | Grid | Grid | | | GridContainer | Container | | | Header | AppShell.Header | | | Icon | Icon | | | InputGroup | FieldSet | | | InputSuffix | TextInput | | | Label | PylonLabel | | | Link | Anchor | | | Logo | PylonFooter | | | Modal | Modal | | | ModalRef | useModalsStack | | | NavMenuButton | Burger | | | Pagination | Pagination | | | PrimaryNav | PylonHeaderNav | | | RequiredMarker | – | | | Select | Select | | | StepIndicator | Stepper | | | StepIndicatorStep | Stepper.Step | | | Table | Table | | | Tag | Badge | | | TextInput | TextInput | | | TextInputMask | PylonMaskedTextInput | | | Title | AppShellHeaderTitle | |

Packaging Release

To package a new release of Pylon UI to the public npm registry:

• Merge contributor pull requests into main using conventional commit messages, such as fix: correct button styles or feat: add date picker variant
• The Release action will automatically create or update a release pull request
• Review and merge the release pull request when maintainers are ready to publish
• Release Please creates the matching version tag and GitHub release
• The same action builds and publishes the package to npm using the NPM_TOKEN repository secret