@spelyco/react

React UI components for Spelyco projects. Built on top of Mantine.

The whole point: install one package, get everything. No need to install Mantine or configure PostCSS separately.

Install

bun add @spelyco/react react react-dom

That's it. @mantine/core, @mantine/hooks, and @tabler/icons-react all come with this package automatically.

Setup

Do this once in your app's entry file (e.g. main.tsx):

import { SpelycoProvider } from "@spelyco/react";
import "@spelyco/react/styles.css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <SpelycoProvider>
      <App />
    </SpelycoProvider>
  </StrictMode>
);

Two things happening here:

1. import "@spelyco/react/styles.css" — loads all CSS (Mantine + Spelyco components)
2. <SpelycoProvider> — wraps your app, same job as MantineProvider

Using components

Everything from Mantine is re-exported through this package:

import { Button, Text, Stack, Title, TextInput } from "@spelyco/react";

export function MyPage() {
  return (
    <Stack p="xl">
      <Title>Hello</Title>
      <Text>This comes from Mantine via @spelyco/react</Text>
      <TextInput label="Name" placeholder="Your name" />
      <Button>Submit</Button>
    </Stack>
  );
}

You don't need to import from "@mantine/core" anywhere. Just use @spelyco/react.

Theming

SpelycoProvider accepts an optional theme prop (Mantine MantineThemeOverride):

import { SpelycoProvider } from "@spelyco/react";

<SpelycoProvider theme={{ primaryColor: "violet", defaultRadius: "md" }}>
  <App />
</SpelycoProvider>

See Mantine theme docs for all available options.

Adding more Mantine CSS packages

If you use a Mantine addon package (e.g. @mantine/dates, @mantine/notifications), you need to:

1. Add it to @spelyco/react's dependencies in package.json
2. Uncomment its line in tsup.config.ts under MANTINE_CSS_PACKAGES
3. Rebuild: bun run build --filter=@spelyco/react

Peer dependencies

You only need to install these yourself:

| Package | Version | | --- | --- | | react | >=18 | | react-dom | >=18 |

Everything else (@mantine/core, @mantine/hooks, @tabler/icons-react) comes bundled.

License

MIT