created:3/15/2021

updated:3/15/2021

JSX Component stats

This is an analysis of the theme-ui jsx components that have 'stories'

Components usage summary

Components usage - how many times a component is being used from another component and which of their properties are used

Components usage

component	attributes	#stories	#used in
Box	refvariant__themeKey__csssxastypearia-hiddenclassNameviewBoxwidthheightstrokeWidthfillstrokerolearia-valuenowaria-valueminaria-valuemaxsrcframeBorderallowFullScreenallowxmlnscxcyrstrokeDasharraystrokeDashoffsetaria-labelcss	1	39
Label	htmlForsx	1	2
Image	ref__csswidthheightvariant	1	2
IconButton	refsizetitlearia-labelvariantchildren	1	2
Link	refvariant__css	1	1
AspectRatio	ratio	1	1
Textarea		1	0
Text		1	0
Switch		1	0
Spinner		1	0
Slider		1	0
Select		1	0
Radio		1	0
Progress		1	0
NavLink		1	0
Message		1	0
MenuButton		1	0
Input		1	0
Heading		1	0
Grid		3	0
Flex		1	0
Field		1	0
Embed		1	0
Donut		1	0
Divider		1	0
Container		1	0
Close		1	0
Checkbox		1	0
Card		1	0
Button		1	0
Badge		1	0
Avatar		1	0
AspectImage		1	0
Alert		1	0

Attributes usage summary

Attributes usage - how many times an attribute is being set on a component, and on which component it is being set

Attributes usage

attribute	components	#used	#total used
ref	BoxIconButtonImageLink	4	31
__css	BoxImageLink	3	28
variant	BoxIconButtonImageLink	4	24
as	Box	1	23
__themeKey	Box	1	21
sx	BoxLabel	2	14
height	BoxImage	2	5
width	BoxImage	2	5
type	Box	1	4
aria-label	BoxIconButton	2	3
fill	Box	1	3
viewBox	Box	1	3
className	Box	1	3
title	IconButton	1	2
role	Box	1	2
stroke	Box	1	2
strokeWidth	Box	1	2
aria-hidden	Box	1	2
htmlFor	Label	1	1
children	IconButton	1	1
size	IconButton	1	1
css	Box	1	1
strokeDashoffset	Box	1	1
strokeDasharray	Box	1	1
r	Box	1	1
cy	Box	1	1
cx	Box	1	1
xmlns	Box	1	1
allow	Box	1	1
allowFullScreen	Box	1	1
frameBorder	Box	1	1
src	Box	1	1
aria-valuemax	Box	1	1
aria-valuemin	Box	1	1
aria-valuenow	Box	1	1
ratio	AspectRatio	1	1

Components usage details

How many times a component is being used from another component, with a list of the components using it

Box

component	#used
Switch	3
Radio	3
Checkbox	3
AspectRatio	3
Spinner	2
Select	2
Embed	2
Textarea	1
Text	1
Slider	1
Progress	1
Message	1
MenuButton	1
Link	1
Label	1
Input	1
Image	1
IconButton	1
Heading	1
Grid	1
Field	1
Donut	1
Divider	1
Container	1
Card	1
Button	1
Badge	1
Alert	1

IconButton

component	#used
MenuButton	1
Close	1

Image

component	#used
Avatar	1
AspectImage	1

Label

component	#used
Switch	1
Field	1

AspectRatio

component	#used
AspectImage	1

Link

component	#used
NavLink	1

Attributes usage details

How many times an attribute is being used on a component, with a list of those components

ref

component	#used
Box	26
Image	2
IconButton	2
Link	1

__css

component	#used
Box	25
Image	2
Link	1

variant

component	#used
Box	20
IconButton	2
Link	1
Image	1

as

component	#used
Box	23

__themeKey

component	#used
Box	21

sx

component	#used
Box	13
Label	1

width

component	#used
Box	4
Image	1

height

component	#used
Box	4
Image	1

type

component	#used
Box	4

className

component	#used
Box	3

viewBox

component	#used
Box	3

fill

component	#used
Box	3

aria-label

component	#used
IconButton	2
Box	1

aria-hidden

component	#used
Box	2

strokeWidth

component	#used
Box	2

stroke

component	#used
Box	2

role

component	#used
Box	2

title

component	#used
IconButton	2

ratio

component	#used
AspectRatio	1

aria-valuenow

component	#used
Box	1

aria-valuemin

component	#used
Box	1

aria-valuemax

component	#used
Box	1

src

component	#used
Box	1

frameBorder

component	#used
Box	1

allowFullScreen

component	#used
Box	1

allow

component	#used
Box	1

xmlns

component	#used
Box	1

cx

component	#used
Box	1

cy

component	#used
Box	1

r

component	#used
Box	1

strokeDasharray

component	#used
Box	1

strokeDashoffset

component	#used
Box	1

css

component	#used
Box	1

size

component	#used
IconButton	1

children

component	#used
IconButton	1

htmlFor

component	#used
Label	1

index

theme-ui/Alert

Docs