@povio/ui

UI Components that match Povio's Atlas Design System.

Installation

yarn add @povio/ui

Versioning

Major and minor version will correspond to the Atlas version (v2.1.0 corresponds Atlas 2.1) and patch versions are fixes/updates within that Atlas version.

Requirements

Tailwind 4

@povio/ui is using Tailwind 4 for styling so your project should also use Tailwind version 4. This is especially noticable with modifier classes (important modifier or child selectors) which changed between version 3 and 4.

Tailwind version 4 also defaults to cursor: default for buttons which differs from version 3. In order to alleviate that add the following snippet to your base styles:

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

This is required for buttons to behave as expected. It is based on Tailwind Upgrade Guide.

In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config. In your globals.css add (make sure path is correct):

@source "../../node_modules/@povio/ui/dist";

React Aria

We are using react-aria-components for our UI components including their plugin for Tailwind that makes classes for modifiers a bit shorter. As such, make sure to install and setup tailwindcss-react-aria-components

Translations

We're using i18next for translations. Make sure the package versions match in your project. Out of sync major version might cause issues.

Overriding translations

To override the translations, add a partial ui-translation.json file for the locale (same structure as the translation.json in @povio/ui package) and merge it into the UI namespace.

// src/config/locales/en/ui-translation.json
{
  "ui": {
    "fileUpload": {
      "emptyText": "Upload file"
    }
  }
}

// src/config/i18n.ts
import { resources as uiDefaultResources, ns as uiNs } from "@povio/ui";
import deepMerge from "deepmerge";

import uiTranslationEN from "./locales/en/ui-translation.json";

const uiResources = deepMerge(uiDefaultResources, { en: { [uiNs]: uiTranslationEN } });
export const resources = deepMerge(defaultResources, uiResources);

Misc

We're using a helper class for flex, so make sure to add this into your base css as well:

.flex-fill {
  flex: 1 0 0;
}