Plugin SDK > React UI Components

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
}

Color palette CSS variables

Within the Canvas component, a color palette is made available as a set of CSS variables, allowing you to conform to the theme of the current environment:

Text colors

`--base-body-color`
`--light-body-color`
`--placeholder-body-color`

UI colors

`--light-bg-color`
`--lighter-bg-color`
`--disabled-bg-color`
`--border-color`
`--darker-border-color`
`--alert-color`
`--warning-color`
`--notice-color`
`--warning-bg-color`
`--add-color`
`--remove-color`

Project-specific colors

`--accent-color`
`--primary-color`
`--light-color`
`--dark-color`

1
<Canvas ctx={ctx}>
2
  <Section title="Text colors">
3
    <table>
4
      <tbody>
5
        <tr>
6
          <td>
7
            <code>--base-body-color</code>
8
          </td>
9
          <td width="30%">
10
            <div
11
              style={{
12
                width: '30px',
13
                height: '30px',
14
                background: 'var(--base-body-color)',
15
              }}
16
            />
17
          </td>
18
        </tr>
19
        <tr>
20
          <td>
21
            <code>--light-body-color</code>
22
          </td>
23
          <td width="30%">
24
            <div
25
              style={{
26
                width: '30px',
27
                height: '30px',
28
                background: 'var(--light-body-color)',
29
              }}
30
            />
31
          </td>
32
        </tr>
33
        <tr>
34
          <td>
35
            <code>--placeholder-body-color</code>
36
          </td>
37
          <td width="30%">
38
            <div
39
              style={{
40
                width: '30px',
41
                height: '30px',
42
                background: 'var(--placeholder-body-color)',
43
              }}
44
            />
45
          </td>
46
        </tr>
47
      </tbody>
48
    </table>
49
  </Section>
50
  <Section title="UI colors">
51
    <table>
52
      <tbody>
53
        <tr>
54
          <td>
55
            <code>--light-bg-color</code>
56
          </td>
57
          <td width="30%">
58
            <div
59
              style={{
60
                width: '30px',
61
                height: '30px',
62
                background: 'var(--light-bg-color)',
63
              }}
64
            />
65
          </td>
66
        </tr>
67
        <tr>
68
          <td>
69
            <code>--lighter-bg-color</code>
70
          </td>
71
          <td width="30%">
72
            <div
73
              style={{
74
                width: '30px',
75
                height: '30px',
76
                background: 'var(--lighter-bg-color)',
77
              }}
78
            />
79
          </td>
80
        </tr>
81
        <tr>
82
          <td>
83
            <code>--disabled-bg-color</code>
84
          </td>
85
          <td width="30%">
86
            <div
87
              style={{
88
                width: '30px',
89
                height: '30px',
90
                background: 'var(--disabled-bg-color)',
91
              }}
92
            />
93
          </td>
94
        </tr>
95
        <tr>
96
          <td>
97
            <code>--border-color</code>
98
          </td>
99
          <td width="30%">
100
            <div
101
              style={{
102
                width: '30px',
103
                height: '30px',
104
                background: 'var(--border-color)',
105
              }}
106
            />
107
          </td>
108
        </tr>
109
        <tr>
110
          <td>
111
            <code>--darker-border-color</code>
112
          </td>
113
          <td width="30%">
114
            <div
115
              style={{
116
                width: '30px',
117
                height: '30px',
118
                background: 'var(--darker-border-color)',
119
              }}
120
            />
121
          </td>
122
        </tr>
123
        <tr>
124
          <td>
125
            <code>--alert-color</code>
126
          </td>
127
          <td width="30%">
128
            <div
129
              style={{
130
                width: '30px',
131
                height: '30px',
132
                background: 'var(--alert-color)',
133
              }}
134
            />
135
          </td>
136
        </tr>
137
        <tr>
138
          <td>
139
            <code>--warning-color</code>
140
          </td>
141
          <td width="30%">
142
            <div
143
              style={{
144
                width: '30px',
145
                height: '30px',
146
                background: 'var(--warning-color)',
147
              }}
148
            />
149
          </td>
150
        </tr>
151
        <tr>
152
          <td>
153
            <code>--notice-color</code>
154
          </td>
155
          <td width="30%">
156
            <div
157
              style={{
158
                width: '30px',
159
                height: '30px',
160
                background: 'var(--notice-color)',
161
              }}
162
            />
163
          </td>
164
        </tr>
165
        <tr>
166
          <td>
167
            <code>--warning-bg-color</code>
168
          </td>
169
          <td width="30%">
170
            <div
171
              style={{
172
                width: '30px',
173
                height: '30px',
174
                background: 'var(--warning-bg-color)',
175
              }}
176
            />
177
          </td>
178
        </tr>
179
        <tr>
180
          <td>
181
            <code>--add-color</code>
182
          </td>
183
          <td width="30%">
184
            <div
185
              style={{
186
                width: '30px',
187
                height: '30px',
188
                background: 'var(--add-color)',
189
              }}
190
            />
191
          </td>
192
        </tr>
193
        <tr>
194
          <td>
195
            <code>--remove-color</code>
196
          </td>
197
          <td width="30%">
198
            <div
199
              style={{
200
                width: '30px',
201
                height: '30px',
202
                background: 'var(--remove-color)',
203
              }}
204
            />
205
          </td>
206
        </tr>
207
      </tbody>
208
    </table>
209
  </Section>
210
  <Section title="Project-specific colors">
211
    <table>
212
      <tbody>
213
        <tr>
214
          <td>
215
            <code>--accent-color</code>
216
          </td>
217
          <td width="30%">
218
            <div
219
              style={{
220
                width: '30px',
221
                height: '30px',
222
                background: 'var(--accent-color)',
223
              }}
224
            />
225
          </td>
226
        </tr>
227
        <tr>
228
          <td>
229
            <code>--primary-color</code>
230
          </td>
231
          <td width="30%">
232
            <div
233
              style={{
234
                width: '30px',
235
                height: '30px',
236
                background: 'var(--primary-color)',
237
              }}
238
            />
239
          </td>
240
        </tr>
241
        <tr>
242
          <td>
243
            <code>--light-color</code>
244
          </td>
245
          <td width="30%">
246
            <div
247
              style={{
248
                width: '30px',
249
                height: '30px',
250
                background: 'var(--light-color)',
251
              }}
252
            />
253
          </td>
254
        </tr>
255
        <tr>
256
          <td>
257
            <code>--dark-color</code>
258
          </td>
259
          <td width="30%">
260
            <div
261
              style={{
262
                width: '30px',
263
                height: '30px',
264
                background: 'var(--dark-color)',
265
              }}
266
            />
267
          </td>
268
        </tr>
269
      </tbody>
270
    </table>
271
  </Section>
272
</Canvas>

Typography CSS variables

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:

`--font-size-xxs`	Size XXS
`--font-size-xs`	Size XS
`--font-size-s`	Size S
`--font-size-m`	Size M
`--font-size-l`	Size L
`--font-size-xl`	Size XL
`--font-size-xxl`	Size XXL
`--font-size-xxxl`	Size XXXL

1
<Canvas ctx={ctx}>
2
  <table>
3
    <tbody>
4
      <tr>
5
        <td>
6
          <code>--font-size-xxs</code>
7
        </td>
8
        <td>
9
          <div style={{ fontSize: 'var(--font-size-xxs)' }}>
10
            Size XXS
11
          </div>
12
        </td>
13
      </tr>
14
      <tr>
15
        <td>
16
          <code>--font-size-xs</code>
17
        </td>
18
        <td>
19
          <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
20
        </td>
21
      </tr>
22
      <tr>
23
        <td>
24
          <code>--font-size-s</code>
25
        </td>
26
        <td>
27
          <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
28
        </td>
29
      </tr>
30
      <tr>
31
        <td>
32
          <code>--font-size-m</code>
33
        </td>
34
        <td>
35
          <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
36
        </td>
37
      </tr>
38
      <tr>
39
        <td>
40
          <code>--font-size-l</code>
41
        </td>
42
        <td>
43
          <div
44
            style={{
45
              fontSize: 'var(--font-size-l)',
46
              fontWeight: 'var(--font-weight-bold)',
47
            }}
48
          >
49
            Size L
50
          </div>
51
        </td>
52
      </tr>
53
      <tr>
54
        <td>
55
          <code>--font-size-xl</code>
56
        </td>
57
        <td>
58
          <div
59
            style={{
60
              fontSize: 'var(--font-size-xl)',
61
              fontWeight: 'var(--font-weight-bold)',
62
            }}
63
          >
64
            Size XL
65
          </div>
66
        </td>
67
      </tr>
68
      <tr>
69
        <td>
70
          <code>--font-size-xxl</code>
71
        </td>
72
        <td>
73
          <div
74
            style={{
75
              fontSize: 'var(--font-size-xxl)',
76
              fontWeight: 'var(--font-weight-bold)',
77
            }}
78
          >
79
            Size XXL
80
          </div>
81
        </td>
82
      </tr>
83
      <tr>
84
        <td>
85
          <code>--font-size-xxxl</code>
86
        </td>
87
        <td>
88
          <div
89
            style={{
90
              fontSize: 'var(--font-size-xxxl)',
91
              fontWeight: 'var(--font-weight-bold)',
92
            }}
93
          >
94
            Size XXXL
95
          </div>
96
        </td>
97
      </tr>
98
    </tbody>
99
  </table>
100
</Canvas>

Spacing CSS variables

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>).

`--spacing-s`
`--spacing-m`
`--spacing-l`
`--spacing-xl`
`--spacing-xxl`
`--spacing-xxxl`

1
<Canvas ctx={ctx}>
2
  <table>
3
    <tbody>
4
      <tr>
5
        <td>
6
          <code>--spacing-s</code>
7
        </td>
8
        <td>
9
          <div
10
            style={{
11
              background: 'var(--accent-color)',
12
              width: 'var(--spacing-s)',
13
              height: 'var(--spacing-s)',
14
            }}
15
          />
16
        </td>
17
      </tr>
18
      <tr>
19
        <td>
20
          <code>--spacing-m</code>
21
        </td>
22
        <td>
23
          <div
24
            style={{
25
              background: 'var(--accent-color)',
26
              width: 'var(--spacing-m)',
27
              height: 'var(--spacing-m)',
28
            }}
29
          />
30
        </td>
31
      </tr>
32
      <tr>
33
        <td>
34
          <code>--spacing-l</code>
35
        </td>
36
        <td>
37
          <div
38
            style={{
39
              background: 'var(--accent-color)',
40
              width: 'var(--spacing-l)',
41
              height: 'var(--spacing-l)',
42
            }}
43
          />
44
        </td>
45
      </tr>
46
      <tr>
47
        <td>
48
          <code>--spacing-xl</code>
49
        </td>
50
        <td>
51
          <div
52
            style={{
53
              background: 'var(--accent-color)',
54
              width: 'var(--spacing-xl)',
55
              height: 'var(--spacing-xl)',
56
            }}
57
          />
58
        </td>
59
      </tr>
60
      <tr>
61
        <td>
62
          <code>--spacing-xxl</code>
63
        </td>
64
        <td>
65
          <div
66
            style={{
67
              background: 'var(--accent-color)',
68
              width: 'var(--spacing-xxl)',
69
              height: 'var(--spacing-xxl)',
70
            }}
71
          />
72
        </td>
73
      </tr>
74
      <tr>
75
        <td>
76
          <code>--spacing-xxxl</code>
77
        </td>
78
        <td>
79
          <div
80
            style={{
81
              background: 'var(--accent-color)',
82
              width: 'var(--spacing-xxxl)',
83
              height: 'var(--spacing-xxxl)',
84
            }}
85
          />
86
        </td>
87
      </tr>
88
    </tbody>
89
  </table>
90
</Canvas>

Did this doc help you?

Need help?

Explore our forum, contact support, or connect with our sales team . You can also chat live with other users in our Slack channel.