created:3/5/2021
updated:3/5/2021

UI customization

component-controls allows extensive customization of the user interface - from theming, SEO tags to toolbars, sidebars, and footer. Most of the user-interface customizations can be set up in your .config/runtime.js file.
In the following examples, you can play with control values and see live the source code changes to be copy/pasted in the buildtime.js configuration file.

Site meta

The site meta settings are used both for SEO purposes as page <meta /> tags and displayed in the application user interface.

.config/runtime.js

export default {
logo: 'https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg',
copyright: '
`Copyright \u00A9 ${new Date().getFullYear()}`',
}
`Copyright \u00A9 ${new Date().getFullYear()}`
Name
Description
Default
Controls
title

Standalone site title. Default is "Component controls"

ControlTypes.TEXT
Invalid Type
logo

Custom logo url - set to null to remove the logo

ControlTypes.TEXT
https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg
Invalid Type
description

Site description. Used in page "description" meta tag

ControlTypes.TEXT
Invalid Type
copyright

Copyright notice displayed in the footer

ControlTypes.TEXT











































































































































































































































`Copyright \u00A9 ${new Date().getFullYear()}`
Invalid Type
language

Site language, Default is "en"

ControlTypes.TEXT
Invalid Type
author

Site author. Default is "@component-controls"

ControlTypes.TEXT
Invalid Type

Wrapping the app

You can wrap the application and create any additional components or insert styles.

.config/runtime.js

export default {
app: ({ children }) => <div style={{ background: 'pink'}}>{children}</div>,
}
Copyright © 2025

Installing a theme

You can use any theme-ui theme as a starting point for customizing the user interface. You can select below one of the themes shipping with the @theme-ui/presets package and observe the user interface changes.

.config/runtime.js

export default {
theme: {},
}
Name
Description
Default
Controls
theme
ControlTypes.OPTIONS
none
Invalid Type

Toolbar

The toolbar consists of two sections: left and right, where the left section is still displayed in responsive screen sizes, while the right section is hidden. The toolbar items are ActionBar items that can be extended, overrriden and changed as usual ActionItems.

Add toolbar items

To add new items to the toolbar, you need to specify a left or right array of new items.

.config/runtime.js

import { Box, Text } from 'theme-ui';
export default {
}
Name
Description
Default
Controls
0
text
1
text
2
text
3
text
4
text
5
text
6
text
7
text
8
text
9
text
10
text
11
text
12
text
13
text
14
text
15
text
16
text
17
text
18
text
19
text
20
text
21
text
22
text
23
text
24
text
25
text
26
text
27
text
28
text
29
text
30
text
31
text
32
text
33
text
34
text
35
text
36
text
37
text
38
text
39
text
40
text
41
text
42
text
43
text
44
text
45
text
46
text
47
text
48
text
49
text
50
text
51
text
52
text
53
text
54
text
55
text
56
text
57
text
58
text
59
text
60
text
61
text
62
text
63
text
64
text
65
text
66
text
67
text
68
text
69
text
70
text
71
text
72
text
73
text
74
text
75
text
76
text
77
text
78
text
79
text
80
text
81
text
82
text
83
text
84
text
85
text
86
text
87
text
88
text
89
text
90
text
91
text
92
text
93
text
94
text
95
text
96
text
97
text
98
text
99
text
100
text
101
text
102
text
103
text
104
text
105
text
106
text
107
text
108
text
109
text
110
text
111
text
112
text
113
text
114
text
115
text
116
text
117
text
118
text
119
text
120
text
121
text
122
text
123
text
124
text
125
text
126
text
127
text
128
text
129
text
130
text
131
text
132
text
133
text
134
text
135
text
136
text
137
text
138
text
139
text
140
text
141
text
142
text
143
text
144
text
145
text
146
text
147
text
148
text
149
text
150
text
151
text
152
text
153
text
154
text
155
text
156
text
157
text
158
text
159
text
160
text
161
text
162
text
163
text
164
text
165
text
166
text
167
text
168
text
169
text
170
text
171
text
172
text
173
text
174
text
175
text
176
text
177
text
178
text
179
text
180
text
181
text
182
text
183
text
184
text
185
text
186
text
187
text
188
text
189
text
190
text
191
text
192
text
193
text
194
text
195
text
196
text
197
text
198
text
199
text
200
text
201
text
202
text
203
text
204
text
205
text
206
text
207
text
208
text
209
text
210
text
211
text
212
text
213
text
214
text
215
text
216
text
217
text
218
text
219
text
220
text
221
text
222
text
223
text
224
text
225
text
226
text
227
text
228
text
229
text
230
text
231
text
232
text
233
text
234
text
235
text
236
text
237
text
238
text
239
text
240
text
241
text
242
text
243
text
244
text
245
text
246
text
247
text
248
text
249
text
250
text
251
text
252
text
253
text
254
text
255
text
256
text
257
text
258
text
259
text
260
text
261
text
262
text
263
text
264
text
265
text
266
text
267
text
268
text
269
text
270
text
271
text
272
text
273
text
274
text
275
text
276
text
277
text
278
text
279
text
280
text
281
text
282
text
283
text
284
text
285
text
286
text
287
text
288
text
289
text
290
text
291
text
292
text
293
text
294
text
295
text
296
text
297
text
298
text
299
text
300
text
301
text
302
text
303
text
304
text
305
text
306
text
307
text
308
text
309
text
310
text
311
text
312
text
313
text
314
text
315
text
316
text
317
text
318
text
319
text
320
text
321
text
322
text
323
text
324
text
325
text
326
text
327
text
328
text
329
text
330
text
331
text
332
text
333
text
334
text
335
text
336
text
337
text
338
text
339
text
340
text
341
text
342
text
343
text
344
text
345
text
346
text
347
text
348
text
349
text
350
text
351
text
352
text
353
text
354
text
355
text
356
text
357
text
358
text
359
text
360
text
361
text
362
text
363
text
364
text
365
text
366
text
367
text
368
text
369
text
370
text
371
text
372
text
373
text
374
text
375
text
376
text
377
text
378
text
379
text
380
text
381
text
382
text
383
text
384
text
385
text
386
text
387
text
388
text
389
text
390
text
391
text
392
text
393
text
394
text
395
text
396
text
397
text
398
text
399
text
400
text
401
text
402
text
403
text
404
text
405
text
406
text
407
text
408
text
409
text
410
text
411
text
412
text
413
text
414
text
415
text
416
text
O
417
text
b
418
text
j
419
text
e
420
text
c
421
text
t
422
text
.
423
text
a
424
text
s
425
text
s
426
text
i
427
text
g
428
text
n
429
text
(
430
text
431
text
B
432
text
u
433
text
t
434
text
t
435
text
o
436
text
n
437
text
C
438
text
o
439
text
n
440
text
t
441
text
r
442
text
o
443
text
l
444
text
s
445
text
(
446
text
'
447
text
f
448
text
i
449
text
r
450
text
s
451
text
t
452
text
'
453
text
)
454
text
,
455
text
456
text
B
457
text
u
458
text
t
459
text
t
460
text
o
461
text
n
462
text
C
463
text
o
464
text
n
465
text
t
466
text
r
467
text
o
468
text
l
469
text
s
470
text
(
471
text
'
472
text
s
473
text
e
474
text
c
475
text
o
476
text
n
477
text
d
478
text
'
479
text
)
480
text
)

Insert toolbar item

You can insert a toolbar item at any position, by specifying the order property.

.config/runtime.js

export default {
toolbar: {
left: [{
order:
-1,
node: (
<svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="currentColor" >
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z">
</path>
</svg>
),
}]
}
}
Name
Description
Default
Controls
order
ControlTypes.NUMBER




























































































































































































































































































































































































































































































-1
Invalid Type

Remove toolbar items

The remove toolbar items, you can override them by id and set hidden: true.
Name
Description
Default
Controls
home
ControlTypes.BOOLEAN
true
Invalid Type
search
ControlTypes.BOOLEAN
true
Invalid Type
colormode
ControlTypes.BOOLEAN
true
Invalid Type

Customize sidebar

The sidebar items are also ActionBar and can be customized as such. By default, a document type title and a filter input are displayed.

.config/runtime.js

export default {
sidebar:[
{
order: 0,
node: (
<Box sx={{ my: 2 }}>
<svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="currentColor" >
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z">
</path>
</svg>
</Box>
),
},
{ id: 'filter', hidden: false },
]
}
Name
Description
Default
Controls
logo order
ControlTypes.NUMBER
0
Invalid Type
title
ControlTypes.BOOLEAN
true
Invalid Type
filter
ControlTypes.BOOLEAN
true
Invalid Type
The footer is also customizable with a left and right section as the toolbar.
Name
Description
Default
Controls
0
text
1
text
2
text
3
text
4
text
5
text
6
text
7
text
8
text
9
text
10
text
11
text
12
text
13
text
14
text
15
text
16
text
17
text
18
text
19
text
20
text
21
text
22
text
23
text
24
text
25
text
26
text
27
text
28
text
29
text
30
text
31
text
32
text
33
text
34
text
35
text
36
text
37
text
38
text
39
text
40
text
41
text
42
text
43
text
44
text
45
text
46
text
47
text
48
text
49
text
50
text
51
text
52
text
53
text
54
text
55
text
56
text
57
text
58
text
59
text
60
text
61
text
62
text
63
text
64
text
65
text
66
text
67
text
68
text
69
text
70
text
71
text
72
text
73
text
74
text
75
text
76
text
77
text
78
text
79
text
80
text
81
text
82
text
83
text
84
text
85
text
86
text
87
text
88
text
89
text
90
text
91
text
92
text
93
text
94
text
95
text
96
text
97
text
98
text
99
text
100
text
101
text
102
text
103
text
104
text
105
text
106
text
107
text
108
text
109
text
110
text
111
text
112
text
113
text
114
text
115
text
116
text
117
text
118
text
119
text
120
text
121
text
122
text
123
text
124
text
125
text
126
text
127
text
128
text
129
text
130
text
131
text
132
text
133
text
134
text
135
text
136
text
137
text
138
text
139
text
140
text
141
text
142
text
143
text
144
text
145
text
146
text
147
text
148
text
149
text
150
text
151
text
152
text
153
text
154
text
155
text
156
text
157
text
158
text
159
text
160
text
161
text
162
text
163
text
164
text
165
text
166
text
167
text
168
text
169
text
170
text
171
text
172
text
173
text
174
text
175
text
176
text
177
text
178
text
179
text
180
text
181
text
182
text
183
text
184
text
185
text
186
text
187
text
188
text
189
text
190
text
191
text
192
text
193
text
194
text
195
text
196
text
197
text
198
text
199
text
200
text
201
text
202
text
203
text
204
text
205
text
206
text
207
text
208
text
209
text
210
text
211
text
212
text
213
text
214
text
215
text
216
text
217
text
218
text
219
text
220
text
221
text
222
text
223
text
224
text
225
text
226
text
227
text
228
text
229
text
230
text
231
text
232
text
233
text
234
text
235
text
236
text
237
text
238
text
239
text
240
text
241
text
242
text
243
text
244
text
245
text
246
text
247
text
248
text
249
text
250
text
251
text
252
text
253
text
254
text
255
text
256
text
257
text
258
text
259
text
260
text
261
text
262
text
263
text
264
text
265
text
266
text
267
text
268
text
269
text
270
text
271
text
272
text
273
text
274
text
275
text
276
text
277
text
278
text
279
text
280
text
281
text
282
text
283
text
284
text
285
text
286
text
287
text
288
text
289
text
290
text
291
text
292
text
293
text
294
text
295
text
296
text
297
text
298
text
299
text
300
text
301
text
302
text
303
text
304
text
305
text
306
text
307
text
308
text
309
text
310
text
311
text
312
text
313
text
314
text
315
text
316
text
317
text
318
text
319
text
320
text
321
text
322
text
323
text
324
text
325
text
326
text
327
text
328
text
329
text
330
text
331
text
332
text
333
text
334
text
335
text
336
text
337
text
338
text
339
text
340
text
341
text
342
text
343
text
344
text
345
text
346
text
347
text
348
text
349
text
350
text
351
text
352
text
353
text
354
text
355
text
356
text
357
text
358
text
359
text
360
text
361
text
362
text
363
text
364
text
365
text
366
text
367
text
368
text
369
text
370
text
371
text
372
text
373
text
374
text
375
text
376
text
377
text
378
text
379
text
380
text
381
text
382
text
383
text
384
text
385
text
386
text
387
text
388
text
389
text
390
text
391
text
392
text
393
text
394
text
395
text
396
text
397
text
398
text
399
text
400
text
401
text
402
text
403
text
404
text
405
text
406
text
407
text
408
text
409
text
410
text
411
text
412
text
413
text
414
text
415
text
416
text
417
text
418
text
419
text
420
text
421
text
422
text
423
text
424
text
425
text
426
text
427
text
428
text
429
text
430
text
431
text
432
text
433
text
434
text
435
text
436
text
437
text
438
text
439
text
440
text
441
text
442
text
443
text
444
text
445
text
446
text
447
text
448
text
449
text
450
text
451
text
452
text
453
text
454
text
455
text
456
text
457
text
458
text
459
text
460
text
461
text
462
text
463
text
464
text
465
text
466
text
467
text
468
text
469
text
470
text
471
text
472
text
473
text
474
text
475
text
476
text
477
text
478
text
479
text
480
text
481
text
482
text
483
text
484
text
485
text
486
text
487
text
488
text
489
text
490
text
491
text
492
text
493
text
494
text
495
text
496
text
497
text
498
text
499
text
500
text
501
text
502
text
503
text
504
text
505
text
506
text
507
text
508
text
509
text
510
text
511
text
512
text
513
text
514
text
515
text
516
text
517
text
518
text
519
text
520
text
521
text
522
text
523
text
524
text
525
text
526
text
527
text
528
text
529
text
530
text
531
text
532
text
533
text
534
text
535
text
536
text
537
text
538
text
539
text
540
text
541
text
542
text
543
text
544
text
545
text
546
text
547
text
548
text
549
text
550
text
551
text
552
text
553
text
554
text
555
text
556
text
557
text
558
text
559
text
560
text
561
text
562
text
563
text
564
text
565
text
566
text
567
text
568
text
569
text
570
text
571
text
572
text
573
text
574
text
575
text
576
text
577
text
578
text
579
text
580
text
581
text
582
text
583
text
584
text
585
text
586
text
587
text
588
text
589
text
590
text
591
text
592
text
593
text
594
text
595
text
596
text
597
text
598
text
599
text
600
text
601
text
602
text
603
text
604
text
605
text
606
text
607
text
608
text
609
text
610
text
611
text
612
text
613
text
614
text
615
text
616
text
617
text
618
text
619
text
620
text
621
text
622
text
623
text
624
text
625
text
626
text
627
text
628
text
629
text
630
text
631
text
632
text
633
text
634
text
635
text
636
text
637
text
638
text
639
text
640
text
641
text
642
text
643
text
644
text
645
text
646
text
647
text
648
text
649
text
650
text
651
text
652
text
653
text
654
text
655
text
656
text
657
text
658
text
659
text
660
text
661
text
662
text
663
text
664
text
665
text
666
text
667
text
668
text
669
text
670
text
671
text
672
text
673
text
674
text
675
text
676
text
677
text
678
text
679
text
680
text
681
text
682
text
683
text
684
text
685
text
686
text
687
text
688
text
689
text
690
text
691
text
692
text
693
text
694
text
695
text
696
text
697
text
698
text
699
text
700
text
701
text
702
text
703
text
704
text
705
text
706
text
707
text
708
text
709
text
710
text
711
text
712
text
713
text
714
text
715
text
716
text
717
text
718
text
719
text
720
text
721
text
722
text
723
text
724
text
725
text
726
text
727
text
728
text
729
text
730
text
731
text
732
text
733
text
734
text
735
text
736
text
737
text
738
text
739
text
740
text
741
text
742
text
743
text
744
text
745
text
746
text
747
text
748
text
749
text
750
text
751
text
752
text
753
text
754
text
755
text
756
text
757
text
758
text
759
text
760
text
761
text
762
text
763
text
764
text
765
text
766
text
767
text
768
text
769
text
770
text
771
text
772
text
773
text
774
text
775
text
776
text
777
text
778
text
779
text
780
text
781
text
782
text
783
text
784
text
O
785
text
b
786
text
j
787
text
e
788
text
c
789
text
t
790
text
.
791
text
a
792
text
s
793
text
s
794
text
i
795
text
g
796
text
n
797
text
(
798
text
799
text
B
800
text
u
801
text
t
802
text
t
803
text
o
804
text
n
805
text
C
806
text
o
807
text
n
808
text
t
809
text
r
810
text
o
811
text
l
812
text
s
813
text
(
814
text
'
815
text
f
816
text
i
817
text
r
818
text
s
819
text
t
820
text
'
821
text
)
822
text
,
823
text
824
text
B
825
text
u
826
text
t
827
text
t
828
text
o
829
text
n
830
text
C
831
text
o
832
text
n
833
text
t
834
text
r
835
text
o
836
text
l
837
text
s
838
text
(
839
text
'
840
text
s
841
text
e
842
text
c
843
text
o
844
text
n
845
text
d
846
text
'
847
text
)
848
text
)