Mantine Theme

npm install @frequencyads/brand

import { MantineProvider } from '@mantine/core';
import { frequencyTheme } from '@frequencyads/brand/mantine';
 
function App() {
  return (
    <MantineProvider theme={frequencyTheme}>
      {/* Your app */}
    </MantineProvider>
  );
}

import '@mantine/core/styles.css';
import { MantineProvider, Button, Card, Text } from '@mantine/core';
import { frequencyTheme } from '@frequencyads/brand/mantine';
 
function App() {
  return (
    <MantineProvider theme={frequencyTheme}>
      <Card>
        <Text>Welcome to Frequency</Text>
        <Button>Get Started</Button>
      </Card>
    </MantineProvider>
  );
}

import { Button, Badge } from '@mantine/core';
 
// Primary color (Frequency Blue)
<Button color="blue">Primary Action</Button>
 
// Secondary color (Violet)
<Button color="violet">Secondary Action</Button>
 
// Semantic colors
<Badge color="green">Success</Badge>
<Badge color="yellow">Warning</Badge>
<Badge color="red">Error</Badge>
 
// Accessing specific shades
<Button color="blue.7">Darker Blue</Button>
<Button color="violet.3">Lighter Violet</Button>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

// Full package
import { colors, fonts, frequencyTheme } from '@frequencyads/brand';
 
// Just the Mantine theme
import { frequencyTheme } from '@frequencyads/brand/mantine';
 
// Just colors (with full 10-shade palettes)
import { colors, mantineColors, blue, violet, red, green } from '@frequencyads/brand/colors';
 
// Just typography
import { fonts, fontSizes } from '@frequencyads/brand/typography';