@lotta-schule/hubert

Hubert

Hubert is a slim component library we use for the lotta project, a modern, easy-to use open source solution for the educational sector which wants to get privacy and security right.

See available components on our storybook

Install

npm install @lotta-schule/hubert

Usage

Provider and Styles

You will need to add the provider, as well as the component.

The component is meant to be rendered only once per web page. It is save to be rendered in a React Server Component.

The provider is a React ContextProvider, and is needed only for @react-aria's OverlayProvider. As we want to use as much RSC as possible, we're seeing if we can get rid of this last one, too.

import { GlobalStyles, HubertProvider } from '@lotta-schule/hubert';
import { DefaultThemes } from '@lotta-schule/theme';

export const App = () => {
  const theme = DefaultThemes.default;
  return (
    <HubertProvider>
      <GlobalStyles
        theme={theme}
        fonts={[
          { name: 'Roboto Slab', url: '/roboto-slab.css', },
        ]}
      />
    </HubertProvider>
  );
}

Besides, you'll probably want to include the styles:

// proably your layout.tsx, _app.tsx or similar
import '@lotta-schule/hubert/dist/index.css';