React Component Library

Welcome to the React Component Library! This library provides a collection of reusable React components to help you build your applications faster and more efficiently.

NPM Package

Installation

To install the library, you can use npm or pnpm:

# Using npm
npm install @flipdish/portal-library

# Using pnpm
pnpm add @flipdish/portal-library

Using the library

To use Flipdish UI components in your project, you must use this library's theme provider.

In some existing projects that already use Material UI theme providers, it may not be feasible to replace the theme provider in a single PR if the codebase is large. In these cases, it may be better to gradually integrate the UI library by nesting the Flipdish UI library theme provider within the esisting theme provider. Wrapping individual route components in the Flipdish UI theme provider will allow for you to migrate your project to Flipdish UI page by page, removing the need of a 'big bang' PR. To support nested theme providers, make the following changes:

1. Rename your existing breakpoint variables in your theme.ts file to match the names defined in the UI library. e.g. If the project is using the default MUI breakpoint variable names and values, define them as this:

breakpoints: {
values: {
base: 0,
mobile: 600,
tablet: 900,
laptop: 1200,
desktop: 1536,
widescreen: 1920,
},
},

2. Rename any use of the old breakpoint variable names to the new names e.g XS → base, SM → mobile etc. This will need to be in any theme.breakpoints.* logic or in MUI grid props (e.g <Grid mobile={3}>).

3. Add missing theme values that are required and defined in the Flipdish UI library. i.e. radius and customShadows values:

  radius: {
    'radius-4': '4px',
    'radius-8': '8px',
    'radius-12': '12px',
    'radius-16': '16px',
    'radius-20': '20px',
    'radius-24': '24px',
    'radius-32': '32px',
    'radius-40': '40px',
    'radius-48': '48px',
    'radius-56': '56px',
    'radius-64': '64px',
  },
  customShadows: {
    base: '0px 1px 3px rgba(0, 0, 0, 0.1)',
    sunken: 'inset 0px 1px 3px rgba(0, 0, 0, 0.1)',
    raised: '0px 4px 8px rgba(0, 0, 0, 0.15)',
    overlay: '0px 8px 24px rgba(0, 0, 0, 0.2)',
  },

These steps will prevent type errors being introduced when nesting the UI library theme provider.

To use the Flipdish UI library on particular page, go to the route definitiion for the project and import the theme provider

import FlipdishUIThemeProvider from '@flipdish/portal-library/themes/ThemeProvider';
...
...
<FlipdishUIThemeProvider>
//Route component here
</FlipdishUIThemeProvider>;

Using Icons

To use an icon in your project, import the icon and use it like any other component. You can specify the size using the size prop.

import CancelIcon from "@flipdish/portal-library/icons/Cancel"

const IconExample = () => {
  return (
    <div>
      <CancelIcon size="md" />
    </div>
  );
};

You can find the current list of provided icons at https://flipdishbytes.github.io/flipdish-ui/?path=/docs/ui-icons--docs

Changelog

8.0.0 — 2026-01-09

Breaking Changes

• Removed required translated props from FlipdishUI and implemented the useTranslation hook.

Migration Steps

• Replace direct ThemeProvider usage with FlipdishUIProvider, which composes both ThemeProvider and TranslationProvider. Portal will use the languageOverride prop to set the language. MFE’s should not have to do anything, it will use the micro-frontend attribute data-language. Alternatively you can nest TranslationProvider within ThemeProvider as shown in FlipdishUIProvider.

• Remove unnecessary translation props from following:

  • Atoms: Tag, TextField
  • Molecules: AlertGlobal, Autocomplete, Combobox, Pagination, QuantitySelector, Rating, SearchInput
  • Organisms: Heading

5.0.0 — 2025-08-19

Breaking Changes

• Required MUI v6 for Grid usage. Apps on MUI v5 should use MUI v5 Grid: https://v5.mui.com/material-ui/react-grid/.

Migration Steps

• Replaced deprecated LegacyGrid with Grid2. The exported Grid now wraps Grid2; review and adjust any Grid props/usages accordingly.