Skip to main content

UI Preset System API Reference

This reference documents the type definitions, interfaces, and helper functions comprising the Framework M UI Preset System.

1. UIPreset Interface​

export interface UIPreset {
  name: string;
  tokens?: MThemeTokens;
  themes?: MThemeMap;
}

Properties​

  • name (string, required): Unique identifier for the preset (e.g. "frappe", "standard").
  • tokens (MThemeTokens, optional): Token scale overrides for colors, radii, sizes, and spacing.
  • themes (MThemeMap, optional): Mode-specific theme overrides for light and dark modes.

2. MThemeTokens Interface​

export interface MThemeTokens {
  color?: Partial<Record<string, string>>;
  radius?: Partial<Record<string, number>>;
  size?: Partial<Record<string, number>>;
  space?: Partial<Record<string, number>>;
}

3. buildMThemeConfig(preset?: UIPreset) Helper​

Generates a complete Tamagui design configuration by deep-merging preset token and theme overrides into Framework M's default design configuration.

import { buildMThemeConfig, frappePreset } from "@framework-m/ui";

const config = buildMThemeConfig(frappePreset);

4. Built-in Presets​

frappePreset​

Preset package replicating Frappe UI v15 visual standards:

  • Primary Light Accent: #111827 (Solid Black button with #ffffff text)
  • Primary Dark Accent: #fafafa (Clean White button with #121212 text)
  • Dark Background: #121212 (Pure Black, Zero Blue Tinting)
  • Active Sidebar Highlight: #ffffff in Light Mode, #27272a in Dark Mode.
  • Radii Scale: md: 6px for inputs and buttons.