Plugin SDK

React UI Components

If you're using React to build your plugin, you can take advantage of the datocms-react-ui package to get a library of ready-to-use components that are consistent with the UI of the main DatoCMS application. Using this library, you can create a custom interface for your plugin in a very short time.

Wrap everything in Canvas!

When using the package it is required to wrap the content of your components in a Canvas component to apply the styling, and import the styles.css stylesheet:

import { Canvas } from 'datocms-react-ui';
import 'datocms-react-ui/styles.css';

const MyComponent = ({ ctx }) => {
  return (
    <Canvas ctx={ctx}>
      Place your content here!
    </Canvas>
  );
}

The Canvas component needs the ctx object that is passed as an argument to all the hooks.

If you have a number of nested components below MyComponent, you don't need to pass the ctx around via props, as any component below <Canvas> can use the useCtx hook to retrieve it:

1
import { Canvas, useCtx } from 'datocms-react-ui';
2

3
const MyComponent = ({ ctx }) => {
4
  return (
5
    <Canvas ctx={ctx}>
6
      <Inner />
7
    </Canvas>
8
  );
9
}
10

11
const Inner = () => {
12
  const ctx = useCtx();
13

14
  return (
15
    <div>Hi!</div>
16
  );
17
}

Design tokens

Inside Canvas, the host (the DatoCMS app) exposes a full set of design tokens as CSS custom properties — colors, shadows, typography, and spacing. Components should reference these tokens directly: they adapt to the user's active theme (including dark mode) automatically.

Colors

A full semantic color palette is exposed inside Canvas as --color--* CSS variables.

Regarding dark mode, ctx.colorScheme resolves to 'light' or 'dark'. The SDK runtime also sets data-color-scheme on <html> so selectors like [data-color-scheme="dark"] {…} work out of the box.

Token name shape

Tokens follow one of two name shapes:

Shape	Meaning
`--color--{property}`	standalone (one `--` after color)
`--color--{context}--{property}`	context pair (two `--` after color)

Properties are the role a color plays:

Property	Role
`surface`	backgrounds
`ink`	text and icons
`border`	1px lines
`outline`	focus rings and block-level rings
`fill` / `track`	indicator fills and their backgrounds

Standalone tokens are for neutral page chrome; use them by default. Elevated neutral surfaces (modals, dropdowns, popovers) are standalone too, with hover and active variants for the raised layer. Pair them with the standalone ink tokens.

Context tokens describe a self-contained mini-environment (a primary CTA, a danger button). Contexts come in two shapes:

Ink-owning contexts: signal contexts (primary, primary-soft, danger, danger-soft, warning-soft, success-soft, selected) and dark/inverted elevation contexts (overlay, backdrop, stacked, tooltip, code). Each defines an ink balanced on its own surface, so always pair surface and ink from the same context.
Single-property contexts: focus (outline/border), progress (fill/track), highlight (surface), scrollbar (fill). Not surface+ink environments; the pairing rule doesn't apply.

Never cross ink-owning contexts

Don't put a primary ink on a danger surface, or a danger-soft surface under a warning-soft ink. Each ink-owning context is contrast-balanced as a unit, and mixing produces illegible combinations, especially in dark mode.

Defining custom colors

Reserve custom colors for things genuinely outside the design system, such as brand illustrations, data-viz palettes, vendor-specific UI. Most needs ("primary button color", "error state") are already covered by tokens. When a custom color is justified, define it once per theme using the [data-color-scheme="dark"] selector that the SDK already sets:

1
.my-plugin {
2
  --my-brand: #4a90e2;
3
}
4

5
[data-color-scheme="dark"] .my-plugin {
6
  --my-brand: #6aa9ec;
7
}
8

9
.my-plugin__cta {
10
  background: var(--my-brand);
11
  color: var(--color--primary--ink);
12
}

For non-CSS branching (image sources, third-party widget themes, syntax-highlighting presets), branch on ctx.colorScheme directly, e.g. <img src={ctx.colorScheme === 'dark' ? logoDark : logoLight} />. On modern browsers, the CSS light-dark() function is a more concise alternative to the per-theme variable pattern above.

Available tokens

A swatch for every available token, grouped by context.

1
<Canvas ctx={ctx}>
2
  <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-l)' }}>
3
    <StateManager initial={true}>
4
      {(isOpen, setOpen) => (
5
        <Section
6
          title="Standalone"
7
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
8
        >
9
          <p>
10
            One-level tokens that work on any neutral page. The <code>surface</code>, <code>ink</code> and <code>border</code> families cover the page background, body text and dividers; the <code>surface-raised</code> variants belong to the elevated layer used by modals, dropdowns and popovers. The tone-on-neutral inks (<code>ink-danger</code>, <code>ink-warning</code>, <code>ink-success</code>) color text and icons on a neutral surface; inside a toned panel use that context's own ink instead.
11
          </p>
12
          <Swatches
13
            tokens={[
14
              ['--color--surface', 'Page background everything else sits on'],
15
              ['--color--surface-hover', 'Hovered row inside lists and tables'],
16
              ['--color--surface-muted', 'Background of muted section panels and quiet cards'],
17
              ['--color--surface-raised', 'Elevated layer for modals, dropdowns and popovers'],
18
              ['--color--surface-raised-hover', 'Hovered option inside a dropdown menu'],
19
              ['--color--surface-raised-active', 'Focused or pressed option inside a dropdown menu'],
20
              ['--color--ink', 'Primary body text'],
21
              ['--color--ink-subtle', 'Secondary text, captions, helper labels'],
22
              ['--color--ink-hover', 'Toolbar icon and link fill on hover'],
23
              ['--color--ink-muted', 'Deemphasized text that should recede'],
24
              ['--color--ink-placeholder', 'Empty-input placeholder text'],
25
              ['--color--ink-primary', 'Theme-colored text and icons for branded labels'],
26
              ['--color--ink-link', 'Inline links and accent text'],
27
              ['--color--ink-danger', 'Error text or icon on a neutral surface'],
28
              ['--color--ink-warning', 'Warning text or icon on a neutral surface'],
29
              ['--color--ink-success', 'Success text or icon on a neutral surface'],
30
              ['--color--ink-disabled', 'Label color on disabled inputs and buttons'],
31
              ['--color--border', 'Default 1px divider between cards, rows and sections'],
32
              ['--color--border-hover', 'Border of an input or card when hovered'],
33
            ]}
34
          />
35
        </Section>
36
      )}
37
    </StateManager>
38

39
    <StateManager initial={false}>
40
      {(isOpen, setOpen) => (
41
        <Section
42
          title="Context: primary"
43
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
44
        >
45
          <p>
46
            The project's brand hue (the color the user picked for their DatoCMS project) at full strength. Reach for it on the main call-to-action button on a page, and on badges or navigation bars that need to stand out. The <code>surface-secondary</code> variant is a quieter brand surface step (for accent badges and inline action chips) that keeps the same white <code>ink</code>.
47
          </p>
48
          <Swatches
49
            tokens={[
50
              ['--color--primary--surface', 'Resting background of a primary call-to-action button'],
51
              ['--color--primary--surface-hover', 'Hovered primary button background'],
52
              ['--color--primary--surface-active', 'Pressed primary button background'],
53
              ['--color--primary--surface-muted', 'Muted variant of the primary surface'],
54
              ['--color--primary--surface-secondary', 'Quieter brand surface for accent badges and inline chips'],
55
              ['--color--primary--ink', 'Text and icon color sitting on any primary surface'],
56
              ['--color--primary--border', 'Thin border drawn on top of a primary surface'],
57
            ]}
58
          />
59
        </Section>
60
      )}
61
    </StateManager>
62

63
    <StateManager initial={false}>
64
      {(isOpen, setOpen) => (
65
        <Section
66
          title="Context: primary-soft"
67
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
68
        >
69
          <p>
70
            A soft panel in the same project brand hue: a pale brand surface paired with saturated brand ink. Quieter than primary, still clearly on-brand, for secondary actions, chips and tinted callouts.
71
          </p>
72
          <Swatches
73
            tokens={[
74
              ['--color--primary-soft--surface', 'Resting background of secondary brand-tinted buttons'],
75
              ['--color--primary-soft--surface-hover', 'Hovered tinted button background'],
76
              ['--color--primary-soft--surface-active', 'Pressed tinted button background'],
77
              ['--color--primary-soft--ink', 'Text and icon color on a soft brand surface'],
78
              ['--color--primary-soft--border', 'Thin border drawn on top of a soft brand surface'],
79
            ]}
80
          />
81
        </Section>
82
      )}
83
    </StateManager>
84

85
    <StateManager initial={false}>
86
      {(isOpen, setOpen) => (
87
        <Section
88
          title="Context: selected"
89
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
90
        >
91
          <p>
92
            The active selection state: the highlighted entry in a list or tree, the currently picked option in a radio or choice group, the chosen card in a gallery.
93
          </p>
94
          <Swatches
95
            tokens={[
96
              ['--color--selected--surface', 'Background of the currently active entry in a list or tree'],
97
              ['--color--selected--surface-hover', 'Hover on an entry that is already selected'],
98
              ['--color--selected--ink', 'Text and icon color inside the selected entry'],
99
              ['--color--selected--border', 'Border or outline ring drawn around a selected option or card'],
100
            ]}
101
          />
102
        </Section>
103
      )}
104
    </StateManager>
105

106
    <StateManager initial={false}>
107
      {(isOpen, setOpen) => (
108
        <Section
109
          title="Context: disabled"
110
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
111
        >
112
          <p>
113
            The flat, low-contrast pair applied to non-interactive controls: disabled buttons, disabled selects and disabled toggles.
114
          </p>
115
          <PairSwatches
116
            tokens={[
117
              ['--color--disabled--surface', '--color--disabled--ink', 'Disabled button or control: muted background with low-contrast label'],
118
            ]}
119
          />
120
        </Section>
121
      )}
122
    </StateManager>
123

124
    <StateManager initial={false}>
125
      {(isOpen, setOpen) => (
126
        <Section
127
          title="Context: danger"
128
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
129
        >
130
          <p>
131
            Reserved for destructive actions, such as Delete, Remove or Reset operations.
132
          </p>
133
          <PairSwatches
134
            tokens={[
135
              ['--color--danger--surface', '--color--danger--ink', 'Destructive action button: vivid red surface with white label'],
136
            ]}
137
          />
138
        </Section>
139
      )}
140
    </StateManager>
141

142
    <StateManager initial={false}>
143
      {(isOpen, setOpen) => (
144
        <Section
145
          title="Context: focus"
146
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
147
        >
148
          <p>
149
            The keyboard-focus ring drawn around inputs, buttons and any other focusable control. Pair <code>border</code> on the element itself with <code>outline</code> as a soft halo.
150
          </p>
151
          <Swatches
152
            tokens={[
153
              ['--color--focus--border', 'Border color of the focused element'],
154
              ['--color--focus--outline', 'Soft outline ring drawn around the focused element'],
155
            ]}
156
          />
157
        </Section>
158
      )}
159
    </StateManager>
160

161
    <StateManager initial={false}>
162
      {(isOpen, setOpen) => (
163
        <Section
164
          title="Signal tones"
165
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
166
        >
167
          <p>
168
            Soft panels for validation states and notifications: red for failures, amber for warnings, green for successes. Each <code>-soft</code> context is a pale surface paired with saturated ink, following the same four-property shape (surface, ink, border, outline), so you can swap the tone without touching layout. For a colored message on a plain neutral surface, reach for the standalone <code>ink-danger</code>, <code>ink-warning</code> and <code>ink-success</code> instead.
169
          </p>
170
          <Swatches
171
            tokens={[
172
              ['--color--danger-soft--surface', 'Background of error banners and alert toasts'],
173
              ['--color--danger-soft--ink', 'Error message text and the icon inside an error panel'],
174
              ['--color--danger-soft--border', 'Border around an invalid input or alert toast'],
175
              ['--color--danger-soft--outline', 'Soft halo around an invalid field on focus'],
176
              ['--color--warning-soft--surface', 'Background of warning banners and plugin notices'],
177
              ['--color--warning-soft--ink', 'Text inside warning banners and warning toasts'],
178
              ['--color--warning-soft--border', 'Border around warning banners and modified-state pills'],
179
              ['--color--warning-soft--outline', 'Soft halo for warning emphasis'],
180
              ['--color--success-soft--surface', 'Background of success toasts'],
181
              ['--color--success-soft--ink', 'Text inside success toasts and success banners'],
182
              ['--color--success-soft--border', 'Border around success banners'],
183
              ['--color--success-soft--outline', 'Soft halo for success emphasis'],
184
            ]}
185
          />
186
        </Section>
187
      )}
188
    </StateManager>
189

190
    <StateManager initial={false}>
191
      {(isOpen, setOpen) => (
192
        <Section
193
          title="Context: highlight"
194
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
195
        >
196
          <p>
197
            The yellow marker pen for inline rich-text highlights inside Structured Text editors.
198
          </p>
199
          <Swatches
200
            tokens={[
201
              ['--color--highlight--surface', 'Background of a highlighted span inside a rich text editor'],
202
            ]}
203
          />
204
        </Section>
205
      )}
206
    </StateManager>
207

208
    <StateManager initial={false}>
209
      {(isOpen, setOpen) => (
210
        <Section
211
          title="Diffs"
212
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
213
        >
214
          <p>
215
            Content-versioning palette across three intents: green for added, red for removed, blue for changed. Inline text diffs use the surface tint; block-level revision panels use the outline. For positive/negative rule indicators, the left-border tone depends on whether the rule was just edited: a subtle ink when stable, a vivid one when freshly changed. The changed variant has no ink stops, since rule borders are only ever green or red.
216
          </p>
217
          <Swatches
218
            tokens={[
219
              ['--color--diff-added--surface', 'Background of inline added text inside a text diff'],
220
              ['--color--diff-added--outline', 'Outline drawn around a block-level added revision panel'],
221
              ['--color--diff-added--ink', 'Left-border color of a positive rule when it was recently changed (vivid)'],
222
              ['--color--diff-added--ink-subtle', 'Left-border color of a positive rule when it was not recently changed'],
223
              ['--color--diff-removed--surface', 'Background of inline removed text inside a text diff'],
224
              ['--color--diff-removed--outline', 'Outline drawn around a block-level removed revision panel'],
225
              ['--color--diff-removed--ink', 'Left-border color of a negative rule when it was recently changed (vivid)'],
226
              ['--color--diff-removed--ink-subtle', 'Left-border color of a negative rule when it was not recently changed'],
227
              ['--color--diff-changed--surface', 'Background of inline changed text inside a text diff'],
228
              ['--color--diff-changed--outline', 'Outline drawn around a block-level changed revision panel'],
229
            ]}
230
          />
231
        </Section>
232
      )}
233
    </StateManager>
234

235
    <StateManager initial={false}>
236
      {(isOpen, setOpen) => (
237
        <Section
238
          title="Status"
239
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
240
        >
241
          <p>
242
            Publishing-workflow status dots. Ink-only because the colored dot is the whole marker, no surface or border needed.
243
          </p>
244
          <Swatches
245
            tokens={[
246
              ['--color--status-draft--ink', 'Dot color for records that exist only as a draft'],
247
              ['--color--status-outdated--ink', 'Dot color for published records with unpublished changes'],
248
              ['--color--status-published--ink', 'Dot color for fully published records'],
249
            ]}
250
          />
251
        </Section>
252
      )}
253
    </StateManager>
254

255
    <StateManager initial={false}>
256
      {(isOpen, setOpen) => (
257
        <Section
258
          title="Backdrop and overlay"
259
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
260
        >
261
          <p>
262
            Two scrims for two jobs. The backdrop is the full-screen dim painted behind a modal dialog. The overlay is the lighter scrim that sits on top of media or thumbnails and hosts reversed buttons designed to read against dark imagery.
263
          </p>
264
          <PairSwatches
265
            tokens={[
266
              ['--color--backdrop--surface', '--color--backdrop--ink', 'Full-screen modal dim with icon color for close controls'],
267
            ]}
268
          />
269
          <Swatches
270
            tokens={[
271
              ['--color--overlay--surface', 'Scrim painted over media thumbnails and image cards'],
272
              ['--color--overlay--surface-hover', 'Hover background of a reversed button floating on dark media'],
273
              ['--color--overlay--surface-active', 'Pressed background of a reversed button on dark media'],
274
              ['--color--overlay--ink', 'Text and icon color inside reversed buttons on overlay surfaces'],
275
            ]}
276
          />
277
        </Section>
278
      )}
279
    </StateManager>
280

281
    <StateManager initial={false}>
282
      {(isOpen, setOpen) => (
283
        <Section
284
          title="Stacked"
285
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
286
        >
287
          <p>
288
            Layered dark inline areas, the kind used for asset uploaders and audio/video players. The wrapper paints the base surface; an inner detail panel sits a layer up; transparent action buttons gain visibility on hover and press.
289
          </p>
290
          <Swatches
291
            tokens={[
292
              ['--color--stacked--surface', 'Base layer of a dark inline panel'],
293
              ['--color--stacked--surface-upper', 'Inner detail panel sitting one layer above the base'],
294
              ['--color--stacked--surface-action', 'Resting background of action buttons inside a stacked panel (transparent)'],
295
              ['--color--stacked--surface-action-hover', 'Hovered action button inside a stacked panel'],
296
              ['--color--stacked--surface-action-active', 'Pressed action button inside a stacked panel'],
297
              ['--color--stacked--ink', 'Main text and values on a stacked surface'],
298
              ['--color--stacked--ink-subtle', 'Field labels and secondary text on a stacked surface'],
299
              ['--color--stacked--border', 'Column rules and dividers inside a stacked panel'],
300
            ]}
301
          />
302
        </Section>
303
      )}
304
    </StateManager>
305

306
    <StateManager initial={false}>
307
      {(isOpen, setOpen) => (
308
        <Section
309
          title="Progress"
310
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
311
        >
312
          <p>
313
            Horizontal progress bars used to report quota usage, upload advancement and similar percentage indicators.
314
          </p>
315
          <Swatches
316
            tokens={[
317
              ['--color--progress--track', 'Empty portion of the bar (the background track)'],
318
              ['--color--progress--fill', 'Filled portion of the bar, drawn in the brand color'],
319
              ['--color--progress--fill-hover', 'Fill color when the bar is hovered'],
320
            ]}
321
          />
322
        </Section>
323
      )}
324
    </StateManager>
325

326
    <StateManager initial={false}>
327
      {(isOpen, setOpen) => (
328
        <Section
329
          title="Tooltip"
330
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
331
        >
332
          <p>
333
            Small dark floating labels: the plain tooltip shown on hover, and the keyboard-hint variant that pairs a description with a keyboard shortcut.
334
          </p>
335
          <Swatches
336
            tokens={[
337
              ['--color--tooltip--surface', 'Background of standard and keyboard-hint tooltips'],
338
              ['--color--tooltip--surface-hover', 'Hover background for interactive controls living inside a tooltip'],
339
              ['--color--tooltip--ink', 'Primary text inside a tooltip'],
340
              ['--color--tooltip--ink-subtle', 'Secondary text inside a tooltip, e.g. the keyboard shortcut hint'],
341
            ]}
342
          />
343
        </Section>
344
      )}
345
    </StateManager>
346

347
    <StateManager initial={false}>
348
      {(isOpen, setOpen) => (
349
        <Section
350
          title="Code"
351
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
352
        >
353
          <p>
354
            The dark monospaced surface used by build logs, error traces and other terminal-style output.
355
          </p>
356
          <PairSwatches
357
            tokens={[
358
              ['--color--code--surface', '--color--code--ink', 'Dark monospaced surface with its text color'],
359
            ]}
360
          />
361
        </Section>
362
      )}
363
    </StateManager>
364

365
    <StateManager initial={false}>
366
      {(isOpen, setOpen) => (
367
        <Section
368
          title="Scrollbar"
369
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
370
        >
371
          <p>
372
            Tint applied globally to the native scrollbar thumb. Most visible in Firefox and on systems that keep scrollbars always on.
373
          </p>
374
          <Swatches
375
            tokens={[
376
              ['--color--scrollbar--fill', 'Color of the native scrollbar thumb across the whole app'],
377
            ]}
378
          />
379
        </Section>
380
      )}
381
    </StateManager>
382

383
    <StateManager initial={false}>
384
      {(isOpen, setOpen) => (
385
        <Section
386
          title="Field type groups"
387
          collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
388
        >
389
          <p>
390
            Fixed-hue soft chips for field type group icons. Each context exposes a <code>surface</code> (chip background) and an <code>ink</code> (icon fill). The hues are not brand-adaptive — they are fixed across projects and automatically flip between a pale surface with saturated ink in light mode and a deep surface with bright ink in dark mode.
391
          </p>
392
          <PairSwatches
393
            tokens={[
394
              ['--color--field-group-text--surface', '--color--field-group-text--ink', 'Text / string / structured-text fields'],
395
              ['--color--field-group-rich-text--surface', '--color--field-group-rich-text--ink', 'Rich-text and single-block fields'],
396
              ['--color--field-group-media--surface', '--color--field-group-media--ink', 'File, gallery and video fields'],
397
              ['--color--field-group-datetime--surface', '--color--field-group-datetime--ink', 'Date and date-time fields'],
398
              ['--color--field-group-number--surface', '--color--field-group-number--ink', 'Integer and float fields'],
399
              ['--color--field-group-boolean--surface', '--color--field-group-boolean--ink', 'Boolean fields'],
400
              ['--color--field-group-location--surface', '--color--field-group-location--ink', 'Lat/lon fields'],
401
              ['--color--field-group-color--surface', '--color--field-group-color--ink', 'Color fields'],
402
              ['--color--field-group-seo--surface', '--color--field-group-seo--ink', 'Slug and SEO fields'],
403
              ['--color--field-group-reference--surface', '--color--field-group-reference--ink', 'Link and links fields'],
404
              ['--color--field-group-json--surface', '--color--field-group-json--ink', 'JSON fields'],
405
            ]}
406
          />
407
        </Section>
408
      )}
409
    </StateManager>
410
  </div>
411
</Canvas>

Shadows

Four ready-made box-shadow composites (raised, floating, lifted, ambient). Drop them straight into a box-shadow property.

1
<Canvas ctx={ctx}>
2
  <Swatches
3
    kind="shadow"
4
    tokens={['--shadow--raised', '--shadow--floating', '--shadow--lifted', '--shadow--ambient']}
5
  />
6
</Canvas>

Typography

Typography is a foundational element in UI design. Good typography establishes a strong, cohesive visual hierarchy and presents content clearly and efficiently to users. Within the Canvas component, a set of CSS variables is available allowing your plugin to conform to the overall look&feel of DatoCMS:

1
<Canvas ctx={ctx}>
2
  <Swatches
3
    kind="font-size"
4
    tokens={[
5
      '--font-size-xxs',
6
      '--font-size-xs',
7
      '--font-size-s',
8
      '--font-size-m',
9
      '--font-size-l',
10
      '--font-size-xl',
11
      '--font-size-xxl',
12
      '--font-size-xxxl',
13
    ]}
14
  />
15
</Canvas>

Spacing

The following CSS variables are available as well, to mimick the spacing between elements used by the main DatoCMS application. Negative spacing variables are available too (--negative-spacing-<SIZE>).

1
<Canvas ctx={ctx}>
2
  <Spacings
3
    tokens={[
4
      '--spacing-s',
5
      '--spacing-m',
6
      '--spacing-l',
7
      '--spacing-xl',
8
      '--spacing-xxl',
9
      '--spacing-xxxl',
10
    ]}
11
  />
12
</Canvas>