obeyaka-web-ui

React + Mantine 8 component library.

Install

npm i obeyaka-web-ui

Peer deps:

npm i react react-dom @mantine/core @mantine/hooks @mantine/emotion

Usage

Basic Setup

import { ObeyakaUIProvider, GridSection } from "obeyaka-web-ui";
import "@mantine/core/styles.css";

function App() {
  return (
    <ObeyakaUIProvider theme="dark">
      <GridSection
        sectionProps={{
          header: "My Section",
          subheader: "Description here",
        }}
        rows={[...]}
      />
    </ObeyakaUIProvider>
  );
}

With Global Theme

Set theme at the provider level, and all components will automatically use it:

<ObeyakaUIProvider theme="dark">
  {/* All ImageLoader components will use "dark" theme automatically */}
  <GridSection
    sectionProps={{ header: "Title" }}
    rows={[
      {
        cols: [
          {
            card: {
              content: <ImageLoader name="icon_name" />, // theme="dark" inferred
            },
          },
        ],
      },
    ]}
  />
</ObeyakaUIProvider>

Override Theme Per Component

You can still override theme at the component level:

<ObeyakaUIProvider theme="dark">
  <ImageLoader name="icon" theme="light" /> {/* Uses "light" */}
  <ImageLoader name="icon" /> {/* Uses "dark" from context */}
</ObeyakaUIProvider>

Development

npm run storybook
npm run build