Getting started

Recursica is a design system for product teams and agencies. A Recursica theme lives in one place, and the adapters apply it to every component, so an app stays on brand everywhere.

Setting up the Mantine adapter takes three steps: install the packages, add the stylesheets and provider, and import the components.

1. Install dependencies

The primary React adapter is @recursica/adapter-mantine-v8, which wraps and binds standard Mantine components to the Recursica tokens. To install it along with its peer dependencies, run:

npm install @recursica/adapter-mantine-v8 @mantine/core @mantine/hooks @mantine/dates

2. Set up the theme and styles

The design tokens apply globally once the app imports the core Mantine styles and the Recursica adapter stylesheet, and is wrapped in Mantine’s provider.

Add the following to the app’s main entry file (e.g., main.jsx or index.tsx):

import React from 'react';
import { createRoot } from 'react-dom/client';
import { MantineProvider } from '@mantine/core';

// Core Mantine styling
import '@mantine/core/styles.css';

// Recursica design system overrides and token bindings
import '@recursica/adapter-mantine-v8/style.css';

import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <MantineProvider defaultColorScheme="light">
    <App />
  </MantineProvider>
);

3. Use the adapter components

With the provider in place, token-locked components import directly from @recursica/adapter-mantine-v8. They only accept the styling options the theme defines, so the result matches the design.

import React from 'react';
import { Button, TextField, Switch } from '@recursica/adapter-mantine-v8';

export default function ContactForm() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 }}>
      <h3>Send a message</h3>
      <TextField 
        label="Email Address" 
        placeholder="hello@agency.com" 
        required 
      />
      <Switch 
        label="Subscribe to updates" 
        defaultChecked 
      />
      <Button 
        variant="solid" 
        onClick={() => alert('Submitted!')}
      >
        Submit
      </Button>
    </div>
  );
}

4. Connect Theme Forge

Recursica is built on customizable token architecture. Designers can modify variables such as brand colors, typeface family, spacing scales, and border radii using the Theme Forge.

To integrate a customized theme:

1. Design the palette and styling tokens in Theme Forge.
2. Export the theme as DTCG JSON and CSS variables, or push it to GitHub as a pull request.
3. Import the CSS variables file at the application root. The new theme applies to every component without editing any of them.