cf-ui is a set of packages used to build UIs at Cloudflare using projects such as React, Fela, Lerna and more. Read the introductory blog post! Interested in more of our technical decisions? See cf-ui/discussions. Whilst cf-ui is used extensively within Cloudflare, it is also an evolving set of components and therefore can be unstable. We reccommend only using this toolset to build interfaces for Cloudflare-internal products. However, feel free to follow along and contribute as we continue to grow this library

Setup

cf-ui uses CSS in JS and our components expect that there is Fela Renderer in the context of your React app. It's the way how to render styles that come with our components into the node. You have to use Fela in your project if you want to use cf-ui. Here's the code example how:

Do you want to try for yourself?

git clone git@github.com:cloudflare/cf-ui.git
cd cf-ui/example
yarn install
yarn run build
open index.html

Boxcf-component-box

This is a box with a margin
This is a box with padding
All the borders!
inline block
Flex
Flex
Flex

Absolute Positioning

Floated right

BoxBox.js

No properties.

Buttoncf-component-button

Button group with spacing

ButtonButton.js

NameTypeDefault valueDescription
onClickfuncrequired
submitboolfalse
spacedbool
groupenumOne of: first, inbetween, last
typeenumrequiredOne of: default, primary, success, warning, danger
disabledbool
loadingbool
childrennode

ButtonGroupButtonGroup.js

NameTypeDefault valueDescription
childrennode
spacedbool

Calloutcf-component-callout

Callout Title

Callout content.

CalloutCallout.js

NameTypeDefault valueDescription
typeenumdefaultOne of: default, info
titlestring
contentnoderequired

Cardcf-component-card

Hello World

Here is some content.

CardCard.js

NameTypeDefault valueDescription
childrennode

CardBlockCardBlock.js

NameTypeDefault valueDescription
childrennode

CardContentCardContent.js

NameTypeDefault valueDescription
titleanyrequired
footerMessagestring
childrennode

CardControlCardControl.js

NameTypeDefault valueDescription
childrennode
widebool

CardDrawersCardDrawers.js

NameTypeDefault valueDescription
onClickfunc
activestring
drawerscustom
controlsany

CardLoadingTextCardLoadingText.js

No properties.

CardMessagesCardMessages.js

NameTypeDefault valueDescription
messagesshape[]required
type: enum
content: any

CardSectionCardSection.js

NameTypeDefault valueDescription
statusenumdefaultOne of: default, error
childrennode

CardToolbarCardToolbar.js

NameTypeDefault valueDescription
controlsany
linksany

Card Buildercf-builder-card

This is a Card

This is the description of a card.

OneTwo
ThreeFour

CardBuilderCardBuilder.js

NameTypeDefault valueDescription
cardNamestringrequired
titlestringrequired
descriptionstringrequired
controlelement
tableelement
drawerscustom
onDrawerClickfunc
activeDrawerstring

Checkboxcf-component-checkbox

You can create them individually with Checkbox

Or as a group with CheckboxGroup

You can also disable a label by passing false explicitly

CheckboxCheckbox.js

NameTypeDefault valueDescription
labelunionrequiredOne of type: string, enum
namestringrequired
valuestringrequired
checkedboolrequired
onChangefuncrequired

CheckboxGroupCheckboxGroup.js

NameTypeDefault valueDescription
valuesstring[]required
onChangefuncrequired
optionsshape[]required
label: union
name: string
value: string

Codecf-component-code

Look at this inline code!

And this code block!

CodeCode.js

NameTypeDefault valueDescription
childrennode

CodeBlockCodeBlock.js

NameTypeDefault valueDescription
childrennode

Copyable Textareacf-component-copyable-textarea

Click to copy

CopyableTextareaCopyableTextarea.js

NameTypeDefault valueDescription
namestringrequired
valuestringrequired
onCopyfunc
clickToCopyTextstringClick to copy
copiedTextToClipboardTextstringCopied text to clipboard
pressCommandOrCtrlCToCopyTextstringPress Command/Ctrl+C to copy

Dropdowncf-component-dropdown

DropdownDropdown.js

NameTypeDefault valueDescription
onClosefuncrequired
alignenumleftOne of: left, right
childrennode

DropdownRegistryDropdownRegistry.js

No properties.

DropdownSeparatorDropdownSeparator.js

No properties.

Dynamic Contentcf-component-dynamic-content

Not an XSS attack, I swear.

DynamicContentDynamicContent.js

NameTypeDefault valueDescription
dangerouslySetInnerHTMLshaperequired
__html: string

Flexcf-component-flex

FlexItem 1
FlexItem 2
FlexItem 3
FlexItem 1
FlexItem 2
Collapsed FlexItem
FlexItem 1
FlexItem 2
Collapsed FlexItem

FlexFlex.js

NameTypeDefault valueDescription
spacingenumOne of: thin, wide
directionenumOne of: row, row-reverse, column, column-reverse
wrapenumOne of: nowrap, wrap, wrap-reverse
justifyContentenumOne of: flex-start, flex-end, center, space-between, space-around
alignItemsenumOne of: flex-start, flex-end, center, baseline, stretch
alignContentenumOne of: flex-start, flex-end, center, space-between, space-around, stretch
childrennode

FlexItemFlexItem.js

NameTypeDefault valueDescription
collapseboolfalse
ordernumber
grownumber
shrinknumber
basisstring
alignSelfenumOne of: auto, flex-start, flex-end, center, baseline, stretch
childrennode

Formcf-component-form

Feedback Form

Name
Type
Suggestion
Message

Madness? This is Sparta!

FormForm.js

NameTypeDefault valueDescription
layoutenumrequiredOne of: horizontal, vertical
onSubmitfuncrequired
childrennode

FormFieldErrorFormFieldError.js

NameTypeDefault valueDescription
fieldobjectrequired
validationsobjectrequired

FormFieldsetFormFieldset.js

NameTypeDefault valueDescription
layoutenumrequiredOne of: horizontal, vertical
stylesobjectrequired
legendstringrequired
childrennode

FormFooterFormFooter.js

NameTypeDefault valueDescription
childrennode

FormHeaderFormHeader.js

NameTypeDefault valueDescription
titlestringrequired

FormLabelFormLabel.js

NameTypeDefault valueDescription
hiddenbool
childrennode

Headingcf-component-heading

Look at this nice heading!It even has a nice HeadingCaption

HeadingHeading.js

NameTypeDefault valueDescription
sizeenumrequiredOne of: 1, 2, 3, 4, 5, 6
childrennode

HeadingCaptionHeadingCaption.js

NameTypeDefault valueDescription
childrennode

Iconcf-component-icon

Types:

caret-upchevron-upcaret-downchevron-downcaret-leftchevron-leftcaret-rightchevron-rightok-signexclamation-signinfo-signpausetimeokclipboardboltchartdrivefilterflowcharthamburgerlocklistfileshieldplushappysadsearchwrenchremoveremove-signspeechgearhelpwidencalendargooglepluslinkedinresize-horizontaluploadloadingclose

Sizes:

2x3x4xlargexlarge

Border:

border

Spin:

border

Muted:

border

White:

border

IconIcon.js

NameTypeDefault valueDescription
labelunionrequiredOne of type: string, enum
typeenumrequiredTYPES
sizeenumSIZES
borderbool
spinbool
mutedbool
whitebool
rolestring

Inputcf-component-input

InputInput.js

NameTypeDefault valueDescription
typeenumtextOne of: text, email, number, password, search
namestringrequired
valuestringrequired
onChangefuncrequired
placeholderstring
autoCompletestring
invalidbool

Labelcf-component-label

DefaultInfoSuccessWarningError

LabelLabel.js

NameTypeDefault valueDescription
typeenumrequiredOne of: default, info, success, warning, error
tagNamestringspan
childrennode

Layoutcf-component-layout

Column 1/2

Column 1/2

Column 1/3

Column 1/3

Column 1/3

Column 1/4

Column 1/4

Column 1/4

Column 1/4

Column 1/4

Column 2/4

Column 1/4

LayoutColumnLayoutColumn.js

NameTypeDefault valueDescription
widthnumberrequired
childrennode

LayoutContainerLayoutContainer.js

NameTypeDefault valueDescription
childrennode

LayoutRowLayoutRow.js

NameTypeDefault valueDescription
childrennode

Linkcf-component-link

Create a Link with a to prop:

Link to /

Alternatively you can pass an onClick handler:

Link to something

Note: This will give it a role="button"

All additional props will be added to the Link element:

Link to /foo

You can even specify tagName:

Listcf-component-list

Basic usage:

  • One
  • Two

Ordered list:

  1. One
  2. Two

Unstyled list:

  • One
  • Two

ListList.js

NameTypeDefault valueDescription
orderedboolfalse
unstyledboolfalse
childrennode

ListItemListItem.js

NameTypeDefault valueDescription
childrennode

Loadingcf-component-loading

Loading

LoadingLoading.js

No properties.

Modalcf-component-modal

ModalModal.js

NameTypeDefault valueDescription
typeenumOne of: confirm
isOpenboolrequired
onRequestClosefuncrequired
closeOnEscbooltrue
closeOnBackdropClickbooltrue
childrennode
widthstring

ModalActionsModalActions.js

NameTypeDefault valueDescription
childrennode

ModalBodyModalBody.js

NameTypeDefault valueDescription
childrennode

ModalCloseModalClose.js

NameTypeDefault valueDescription
onClickfuncrequired
labelunionfalseOne of type: string, bool

ModalFooterModalFooter.js

NameTypeDefault valueDescription
simpleboolfalse
childrennode

ModalHeaderModalHeader.js

NameTypeDefault valueDescription
childrennode

ModalTitleModalTitle.js

NameTypeDefault valueDescription
childrennode

Notificationscf-component-notifications

NotificationNotification.js

NameTypeDefault valueDescription
typeenumOne of: success, error, info, warning
messagestringrequired
closablebooltrue
delaynumber4000
persistboolfalse
onClosefuncrequired

NotificationGlobalContainerNotificationGlobalContainer.js

NameTypeDefault valueDescription
childrennode

NotificationListNotificationList.js

NameTypeDefault valueDescription
childrennode

Pagecf-component-page

Title

Subtitle

PagePage.js

NameTypeDefault valueDescription
childrennode

PageHeaderPageHeader.js

NameTypeDefault valueDescription
titlestringrequired
subtitlestring

Paginationcf-component-pagination

PaginationPagination.js

NameTypeDefault valueDescription
infostring
childrennode

PaginationItemPaginationItem.js

NameTypeDefault valueDescription
typeenumrequiredOne of: number, next, prev, ellipsis, loading
labelstringrequired
onClickfuncrequired
activebool
disabledbool
childrennode

PaginationRootPaginationRoot.js

No properties.

Pagination Buildercf-builder-pagination

PaginationBuilderPaginationBuilder.js

NameTypeDefault valueDescription
onPageChangefuncrequired
loadingbool
totalCountnumberrequired
pagenumberrequired
perPagenumberrequired
infoFormatterfunc

Progresscf-component-progress

ProgressProgress.js

NameTypeDefault valueDescription
activestringrequired
onChangefuncrequired
stepsshape[]required
id: string
label: string
disabled: bool

Radiocf-component-radio

You can create them individually with Radio

Or as a group with RadioGroup

You can also disable a label by passing false explicitly

RadioRadio.js

NameTypeDefault valueDescription
labelunionrequiredOne of type: string, enum
namestringrequired
valuestringrequired
checkedboolrequired
onChangefuncrequired

RadioGroupRadioGroup.js

NameTypeDefault valueDescription
valuestringrequired
onChangefuncrequired
optionsshape[]required
label: union
name: string
value: string

Selectcf-component-select

One
One
×
One 
Three 
×
One

SelectSelect.js

NameTypeDefault valueDescription
multiunknownfalse
searchableunknownfalse
asyncunknownfalse
creatableunknownfalse

Tablecf-component-table

OneTwoThree
123
456
789

TableTable.js

NameTypeDefault valueDescription
stripedboolfalse
hoverboolfalse
borderedbooltrue
condensedboolfalse
childrennode

TableBodyTableBody.js

NameTypeDefault valueDescription
childrennode

TableCellTableCell.js

NameTypeDefault valueDescription
alignenumOne of: left, center, right
childrennode

TableFootTableFoot.js

NameTypeDefault valueDescription
childrennode

TableHeadTableHead.js

NameTypeDefault valueDescription
childrennode

TableHeadCellTableHeadCell.js

NameTypeDefault valueDescription
childrennode

TableRowTableRow.js

NameTypeDefault valueDescription
typecustomdefault
accentcustomfalse
childrennode

Table Buildercf-builder-table

NameCoolnessUpdate
James1
David-1

TableBuilderTableBuilder.js

NameTypeDefault valueDescription
tableNamestringrequired
rowscustom
columnscustom
stripedbool
hoverbool
borderedbool
condensedbool
flashesobject

Tabscf-component-tabs

Tab One

TabsTabs.js

NameTypeDefault valueDescription
onChangefuncrequired
activestringrequired
tabsshape[]required
id: string
label: string
childrenelement[]required

TabsPanelTabsPanel.js

NameTypeDefault valueDescription
idstringrequired
childrennode

Textcf-component-text

Specify a size

Hello World
Hello World

and/or an align

Hello World
Hello World
Hello World
Hello World

and/or a type

Hello World
Hello World
Hello World
Hello World
Hello World

and/or a case

hello world
hello world
Hello World
Hello World

TextText.js

NameTypeDefault valueDescription
sizeenumOne of: normal, small
alignenumOne of: start, center, justify, end
typeenumOne of: info, success, warning, error, muted
caseenumOne of: capitalize, titlecase, lowercase, uppercase
childrennode

Textareacf-component-textarea

TextareaTextarea.js

NameTypeDefault valueDescription
namestringrequired
valuestringrequired
disabledbool
readOnlybool
onChangecustom
onFocusfunc
onBlurfunc

Togglecf-component-toggle

Example Toggle

Disabled

ToggleToggle.js

NameTypeDefault valueDescription
labelunionrequiredOne of type: string, enum
namestring
valuebool
onChangefunc
onFocusfunc
onBlurfunc
disabledbool

Typographycf-component-typography

AbbrCiteDelEmInsKbdMarkSampSmallStrikeStrongSubSupUnderlineVar

AbbrAbbr.js

NameTypeDefault valueDescription
titlestringrequired
childrennode

CiteCite.js

NameTypeDefault valueDescription
childrennode

DelDel.js

NameTypeDefault valueDescription
childrennode

EmEm.js

NameTypeDefault valueDescription
childrennode

InsIns.js

NameTypeDefault valueDescription
childrennode

KbdKbd.js

NameTypeDefault valueDescription
childrennode

MarkMark.js

NameTypeDefault valueDescription
childrennode

SampSamp.js

NameTypeDefault valueDescription
childrennode

SmallSmall.js

NameTypeDefault valueDescription
childrennode

StrikeStrike.js

NameTypeDefault valueDescription
childrennode

StrongStrong.js

NameTypeDefault valueDescription
childrennode

SubSub.js

NameTypeDefault valueDescription
childrennode

SupSup.js

NameTypeDefault valueDescription
childrennode

UnderlineUnderline.js

NameTypeDefault valueDescription
childrennode

VarVar.js

NameTypeDefault valueDescription
childrennode

Viewportcf-component-viewport

Resize the window

ViewportViewport.js

NameTypeDefault valueDescription
notboolfalse
sizeenumrequiredOne of: mobile, mobileWide, tablet, desktop, desktopLarge
childrennode