Skip to content
manteen

House Theme

ThemeMantine ≥ 9MantineProvider

Mantine theme with house defaults for Button, Card, Paper and Modal.

Install

One command copies the item's source into your project, where you own and edit it.

Terminal window
npx manteen add @house/theme

Dependencies

  • @mantine/core@^9npm
  • @mantine/hooks@^9npm

Preview

Usage

A copy-ready example published by the registry author. Imports use the aliases Manteen configures at init.

theme.usage.tsx
import { Button, Card, MantineProvider, Stack, Text, TextInput } from "@mantine/core";
import { theme } from "@/lib/theme";


export function ThemedSignupCard() {
  return (
    <MantineProvider theme={theme}>
      <Card maw={360}>
        <Stack>
          <Text fw={600} size="lg">
            Create an account
          </Text>
          <TextInput label="Email" placeholder="you@example.com" />
          <Button onClick={() => console.log("submitted")}>Sign up</Button>
        </Stack>
      </Card>
    </MantineProvider>
  );
}

Props

This library item does not expose a component or hook prop surface.

Styling

No public Styles API is declared. Installed CSS remains editable because your project owns the source; internal class names are implementation details, not a customization contract.

Source

One installable file ships with this item.

registry/lib/theme.tslibrary · 997 B · ts
import { Button, Card, createTheme, Modal, Paper } from "@mantine/core";


/**
 * House Mantine theme.
 *
 * This is the "opinions" layer — it belongs in the registry because every app
 * that consumes it is expected to edit it. Mantine itself stays a normal npm
 * dependency underneath.
 */
export const theme = createTheme({
  primaryColor: "indigo",
  defaultRadius: "md",
  fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",
  headings: {
    fontWeight: "600",
  },
  components: {
    Button: Button.extend({
      defaultProps: {
        variant: "filled",
      },
    }),
    Card: Card.extend({
      defaultProps: {
        withBorder: true,
        radius: "md",
        padding: "lg",
      },
    }),
    Paper: Paper.extend({
      defaultProps: {
        radius: "md",
      },
    }),
    Modal: Modal.extend({
      defaultProps: {
        centered: true,
        overlayProps: { backgroundOpacity: 0.55, blur: 3 },
      },
    }),
  },
});