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
Popover	sxtriggerfollowCursortooltipShownarrowVisibleonVisibilityChangetooltipplacement	1	4
Link	varianthrefaria-labelsx	1	4
Value	labelvalue	1	3
Collapsible	isOpen	1	2
ActionContainer	plainactions	3	2
Toggle	aria-labeluncheckedIconcheckedIconcheckedonChangeonColoroffColor	5	1
Tabs	selectedIndexonSelect	4	1
SyntaxHighlighter	asstyle	2	1
Markdown	components	2	1
LinkHeading	asidtitlesx	1	1
GithubAvatar	keysizegithubAccessTokenusernameuseremailoverlapfixedSize	1	1
ExternalLink		1	1
Description		1	1
ActionBar	actions	6	1
Zoom		1	0
Tree		6	0
TitledImage		1	0
Tag		1	0
Table		7	0
Subtitle		1	0
Source		3	0
Sidebar		4	0
SearchInput		4	0
ProgressIndicator		1	0
PanelContainer		3	0
Pagination		3	0
Multiselect		1	0
HoverBox		1	0
Header		1	0
GithubAvatarList		2	0
CopyContainer		1	0
ColorMode		1	0
BlockContainer		4	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
tooltip	Popover	1	4
trigger	Popover	1	4
sx	LinkLinkHeadingPopover	3	4
href	Link	1	4
value	Value	1	3
label	Value	1	3
aria-label	LinkToggle	2	3
variant	Link	1	3
actions	ActionBarActionContainer	2	3
placement	Popover	1	2
onVisibilityChange	Popover	1	2
tooltipShown	Popover	1	2
as	LinkHeadingSyntaxHighlighter	2	2
isOpen	Collapsible	1	2
offColor	Toggle	1	1
onColor	Toggle	1	1
onChange	Toggle	1	1
checked	Toggle	1	1
checkedIcon	Toggle	1	1
uncheckedIcon	Toggle	1	1
onSelect	Tabs	1	1
selectedIndex	Tabs	1	1
style	SyntaxHighlighter	1	1
arrowVisible	Popover	1	1
followCursor	Popover	1	1
components	Markdown	1	1
title	LinkHeading	1	1
id	LinkHeading	1	1
fixedSize	GithubAvatar	1	1
overlap	GithubAvatar	1	1
useremail	GithubAvatar	1	1
username	GithubAvatar	1	1
githubAccessToken	GithubAvatar	1	1
size	GithubAvatar	1	1
key	GithubAvatar	1	1
plain	ActionContainer	1	1

Components usage details

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

Link

component	#used
Pagination	2
GithubAvatar	1
ActionBar	1

component	#used
SearchInput	1
Multiselect	1
GithubAvatar	1
CopyContainer	1

Value

component	#used
GithubAvatar	3

ActionContainer

component	#used
Source	1
PanelContainer	1

Collapsible

component	#used
PanelContainer	1
BlockContainer	1

ActionBar

component	#used
ActionContainer	1

Description

component	#used
BlockContainer	1

ExternalLink

component	#used
Link	1

GithubAvatar

component	#used
GithubAvatarList	1

LinkHeading

component	#used
BlockContainer	1

Markdown

component	#used
Description	1

SyntaxHighlighter

component	#used
Source	1

Tabs

component	#used
PanelContainer	1

Toggle

component	#used
ColorMode	1

Attributes usage details

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

href

component	#used
Link	4

sx

component	#used
Popover	2
LinkHeading	1
Link	1

trigger

component	#used
Popover	4

component	#used
Popover	4

actions

component	#used
ActionContainer	2
ActionBar	1

variant

component	#used
Link	3

aria-label

component	#used
Link	2
Toggle	1

label

component	#used
Value	3

value

component	#used
Value	3

isOpen

component	#used
Collapsible	2

as

component	#used
SyntaxHighlighter	1
LinkHeading	1

tooltipShown

component	#used
Popover	2

onVisibilityChange

component	#used
Popover	2

placement

component	#used
Popover	2

plain

component	#used
ActionContainer	1

key

component	#used
GithubAvatar	1

size

component	#used
GithubAvatar	1

githubAccessToken

component	#used
GithubAvatar	1

username

component	#used
GithubAvatar	1

useremail

component	#used
GithubAvatar	1

overlap

component	#used
GithubAvatar	1

fixedSize

component	#used
GithubAvatar	1

id

component	#used
LinkHeading	1

title

component	#used
LinkHeading	1

components

component	#used
Markdown	1

followCursor

component	#used
Popover	1

arrowVisible

component	#used
Popover	1

style

component	#used
SyntaxHighlighter	1

selectedIndex

component	#used
Tabs	1

onSelect

component	#used
Tabs	1

uncheckedIcon

component	#used
Toggle	1

checkedIcon

component	#used
Toggle	1

checked

component	#used
Toggle	1

onChange

component	#used
Toggle	1

onColor

component	#used
Toggle	1

offColor

component	#used
Toggle	1

theme-ui/Textarea

component-controls/ActionBar

Docs