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()}`',

}

skip to navigation sidebar

skip to context sidebar

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>,
}

skip to navigation sidebar

skip to context sidebar

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

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.

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

Name	Description	Default
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	)

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

Name	Description	Default	Controls
order	ControlTypes.NUMBER	-1	Invalid Type

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

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.

Tutorial

UI customization

Site meta

.config/runtime.js

Wrapping the app

.config/runtime.js

Installing a theme

.config/runtime.js

Customize sidebar

.config/runtime.js

API

Customize footer

.config/runtime.js

Tutorial

UI customization

Site meta

.config/runtime.js

Wrapping the app

.config/runtime.js

Installing a theme

.config/runtime.js

Toolbar

Add toolbar items

.config/runtime.js

Insert toolbar item

.config/runtime.js

Remove toolbar items

.config/runtime.js

Customize sidebar

.config/runtime.js

API

Customize footer

.config/runtime.js