@ncino/gator-mui-theme

MUI v7 theme adapter for the Gator Design System. Consumes design tokens from @ncino/styles and exposes a ready-to-use MUI theme, SVG rendering components, and TypeScript type augmentations.

Installation

npm install @ncino/gator-mui-theme
# or
pnpm add @ncino/gator-mui-theme

Peer dependencies (install separately):

npm install @mui/material @emotion/react @emotion/styled react react-dom

Usage

Theme

Wrap your app with MUI's ThemeProvider and import the CSS side-effect for fonts and CSS custom properties:

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { gatorMUITheme } from '@ncino/gator-mui-theme';
import '@ncino/gator-mui-theme/styles';

export default function App() {
  return (
    <ThemeProvider theme={gatorMUITheme}>
      <CssBaseline />
      {/* your app */}
    </ThemeProvider>
  );
}

Icons

import { GatorIcon } from '@ncino/gator-mui-theme';
import { downloadIcon } from '@ncino/gator-mui-theme/icons';

<GatorIcon svg={downloadIcon} aria-label="Download" />

Illustrations

import { GatorIllustration } from '@ncino/gator-mui-theme';
import { balloonsIllustration } from '@ncino/gator-mui-theme/illustrations';

<GatorIllustration svg={balloonsIllustration} size="168px" />

Raw design tokens

import { gatorPrimitives, gatorSemantics } from '@ncino/gator-mui-theme';

// gatorPrimitives — raw color palette values
// gatorSemantics  — semantic roles (text, surface, border, spacing, typography, shadows)

Package exports

| Entry point | Description | |---|---| | @ncino/gator-mui-theme | Theme, GatorIcon, GatorIllustration, token exports | | @ncino/gator-mui-theme/icons | Icon SVG strings re-exported from @ncino/styles | | @ncino/gator-mui-theme/illustrations | Illustration SVG strings re-exported from @ncino/styles | | @ncino/gator-mui-theme/styles | CSS side-effect — fonts + CSS custom properties |

TypeScript

The package ships MUI type augmentations that extend Palette and component prop types with Gator-specific values (ai, neutral palette colors and Gator variants). These load automatically when you import the theme or any barrel export — no extra setup required.

Salesforce Aura / Locker Service

GatorIcon and GatorIllustration are built for Salesforce LWC static resources. Both use dangerouslySetInnerHTML on a child <g> element rather than the root <svg> — Locker Service blocks innerHTML on SVG roots but not on child elements. Don't move the innerHTML to the root <svg> or replace it with a naive approach, as this will break every Locker Service consumer.

Development

pnpm i
pnpm build          # one-shot build → dist/
pnpm build:watch    # watch mode
pnpm storybook      # component explorer at localhost:6006

Releases are automated via semantic-release on push to release. Do not bump version manually.

Adding a component override

Create src/components/<name>.ts and export an object named MUIGator<Name>Override(s). It will be picked up automatically — no manual import needed.

// src/components/tooltip.ts
export const MUIGatorTooltipOverrides = {
  MuiTooltip: {
    styleOverrides: {
      tooltip: { /* ... */ },
    },
  },
};

License

Copyright 2026 nCino, Inc. All rights reserved.