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 © 2022

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
)