Skip to content


Table of contents
Table of contents

Package @undataforum/components is a library of React components built with Theme UI.



yarn add @undataforum/components

to add it to your dependencies. Install peer dependencies react, react-dom and theme-ui.

You need to wrap your app with a ThemeProvider and pass @theme-ui/preset-base as theme (or a preset that is derived from this preset such as @undataforum/preset):

import { ThemeProvider } from 'theme-ui';
import preset from '@theme-ui/preset-base';
const app = (
<ThemeProvider theme={preset}>
<App />

The preset should not make any changes to to breakpoints, which are Styled System's default breakpoints ['40em', '52em', '64em'].

Import components like this

import { Avatars, PostPreview } from '@undataforum/components';


Read the docs at You can run the docs locally with

yarn workspace docs run dev


Work with two terminals. In the first terminal run

yarn workspace @undataforum/components run watch

and in the second terminal run

yarn workspace docs run dev

The first command watches for changes in the @undataforum/components workspace and bundles the @undataforum/components package whenever it detects changes. The second command launches the docs, which use the local @undataforum/components package as dependency.