A next-generation tool to create blazing-fast documentation sites
API
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 © 2021

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