Introduction
⚙️ – Core
⚛️ – Atoms-Molecules
AvatarBadgeButtonCheckBoxFieldCircleDividerDownloadCardIconInputFieldInputFieldButtonLinkListItemOneTimeCodeInputPhotoAvatarRadioGroupFieldRatingSelectFieldSimpleAvatarSpacerSwitchFieldTextToast❌ Icon (Deprecated)❌ Roboto (Deprecated)❌ WorkSans (Deprecated)PropertiesBasic usageVariationsFont stylesSizingAligning
🧬 – Organisms
WorkSans
Docplanner provides a constrained, purposeful set of typographic styles.
Properties
size
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | undefined
md
fonts size.
weight
"regular" | "semiBold" | undefined
semiBold
fonts weight.
color
"gray" | "blue" | "turquoise" | "purple" | "red" | "yellow" | "green" | "transparent" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | ... 64 more ... | undefined
gray900
font color.
align
"center" | "left" | "right" | undefined
left
text alignment.
children
ReactNode
Children
Basic usage
Hello world
Variations
Hello world
Hello world
Hello world
Hello world
Hello world
Font styles
Hello world
Hello world
Sizing
xs
sm
md
lg
xl
2xl
3xl
4xl
Aligning
left
center
right