Hide

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

NameTypeDefault valueDescription
childrennode

Buttoncf-component-button

Button group with spacing

ButtonButton.js

NameTypeDefault valueDescription
onClickfunc
submitboolfalse
spacedbool
directionenumOne of: column, row
groupenumOne of: first, inbetween, last
typeenumrequiredOne of: default, primary, success, warning, danger, dangerOutline
disabledbool
loadingboolfalse
childrennode

ButtonGroupButtonGroup.js

NameTypeDefault valueDescription
childrennode
spacedbool
directionenumrowOne of: column, row

Calloutcf-component-callout

Callout Title

Callout content.

CalloutCallout.js

NameTypeDefault valueDescription
typeenumOne of: default, info
titlestring
contentnoderequired

Cardcf-component-card

Hello World

Here is some content.

Info Message
Error Message
This is a footer message
This is a block

CardCard.js

NameTypeDefault valueDescription
idstring
childrennode

CardBlockCardBlock.js

NameTypeDefault valueDescription
childrennode

CardContentCardContent.js

NameTypeDefault valueDescription
childrennode

CardControlCardControl.js

No properties.

CardDrawersCardDrawers.js

NameTypeDefault valueDescription
onClickfunc
activestring
drawerscustom
controlsany

CardFooterCardFooter.js

NameTypeDefault valueDescription
childrenstring

CardMessagesCardMessages.js

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

CardSectionCardSection.js

No properties.

CardTitleCardTitle.js

NameTypeDefault valueDescription
childrenstring

CardToolbarCardToolbar.js

NameTypeDefault valueDescription
controlsany
linksany

Card Buildercf-builder-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

NameTypeDefault valueDescription

Dynamic Contentcf-component-dynamic-content

Not an XSS attack, I swear.

DynamicContentDynamicContent.js

NameTypeDefault valueDescription
dangerouslySetInnerHTMLshaperequired
__html: string

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
layoutenumverticalOne of: horizontal, vertical
stylesobjectrequired
legendstringrequired
childrennode

FormFooterFormFooter.js

NameTypeDefault valueDescription
childrennode

FormHeaderFormHeader.js

NameTypeDefault valueDescription
titlestringrequired
stylesobjectrequired

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:

boltcalendarcaret-downcaret-leftcaret-rightcaret-upchartchevron-downchevron-leftchevron-rightchevron-upclipboardclosedriveexclamation-signfilefilterflowchartgeargoogleplushamburgerhappyhelpinfo-signlinkedinlistloadinglockokok-signpauseplusrefreshremoveremove-signresize-horizontalsadsearchshieldspeechtimeuploadwidenwrench

Sizes:

2x3x4xlargexlarge

Border:

border

Spin:

border

Muted:

border

White:

border

IconIcon.js

NameTypeDefault valueDescription
labelunionrequiredOne of type: string, enum
typeenumrequiredOne of: bolt, calendar, caret-down, caret-left, caret-right, caret-up, chart, chevron-down, chevron-left, chevron-right, chevron-up, clipboard, close, drive, exclamation-sign, facebook, file, filter, flowchart, gear, googleplus, hamburger, happy, help, info-sign, linkedin, list, loading, lock, ok, ok-sign, pause, plus, refresh, remove, remove-sign, resize-horizontal, sad, search, shield, speech, time, twitter, upload, widen, wrench
sizeenumOne of: 2x, 3x, 4x, large, xlarge
borderbool
spinbool
mutedbool
whitebool
rolestring

Inputcf-component-input

InputInput.js

NameTypeDefault valueDescription
typeenumtextOne of: text, email, number, password, search
namestringrequired
valuestring
defaultValuestring
onChangefuncrequired
onKeyDownfunc
onBlurfunc
onFocusfunc
placeholderstring
autoCompletestring
disabledbool

Labelcf-component-label

DefaultInfoSuccessWarningError

LabelLabel.js

NameTypeDefault valueDescription
typeenumrequiredOne of: default, info, success, warning, error
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

ListItemListItem.js

NameTypeDefault valueDescription
childrennode

OrderedListOrderedList.js

NameTypeDefault valueDescription
childrennode

UnorderedListUnorderedList.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

Awesome page content.
Please buy our things.

PagePage.js

NameTypeDefault valueDescription
childrennode

PageContentPageContent.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, dot
activebool
disabledboolfalse
childrennode
onClickfunc

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
childrennode
valuestringrequired
onChangefuncrequired
optionsshape[]required
label: union
name: string
value: string

Selectcf-component-select

One
One
×
One 
Three 
×
One

SelectSelect.js

NameTypeDefault valueDescription
disabledbool
labelstring
valuenumber
optionsarray
searchableboolfalse
multiboolfalse
onChangefunc
asyncboolfalse
creatableboolfalse

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

TabsItemTabsItem.js

No properties.

TabsPanelTabsPanel.js

NameTypeDefault valueDescription
idstringrequired
childrennode

Textcf-component-text

Specify a size

Hello World
Hello World
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
weightenumnormalOne of: normal, semi-bold, bold
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

No properties.

Togglecf-component-toggle

Example Toggle

Disabled

ToggleToggle.js

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

Colors

grass
#9BCA3E
marine
#2F7BBF
apple
#BD2527
cherry
#9F1F21
tangerine
#FF7900
carrot
#f56500
moonshine
#F7F7F7
dust
#ebebeb
smoke
#e0e0e0
hail
#BCBEC0
storm
#808285
cement
#7D7D7D
dusk
#4D4D4F
night
#404041
charcoal
#333333
rain
#408BC9
sky
#76C4E2
dew
#85CBA8
deepsea
#1E4E79
twilight
#8176B5
sunset
#BA77B1
dawn
#F16975
sunrise
#F69259
lightning
#FFDB6F

Gradients

skyDew : linear-gradient(left, #76C4E2, #85CBA8)
twilightDew : linear-gradient(left, #8176B5, #85CBA8)
twilightSky : linear-gradient(left, #8176B5, #76C4E2)
twilightSunset : linear-gradient(left, #8176B5, #BA77B1)
twilightDawn : linear-gradient(left, #8176B5, #F16975)
dawnSunrise : linear-gradient(left, #F16975, #F69259)
sunriseLightning : linear-gradient(left, #F69259, #FFDB6F)
dewLightning : linear-gradient(left, #85CBA8, #FFDB6F)

Icons

Requirements

Artboard: 16x16px. If you need to design for larger icons, scale up not down. If you scale up, your pixels will multiply and grow, ensuring that they'll be represented at larger sizes. If you scale down you may lose some pixels/details.

Export file type: SVG

Fill: #000000, 100% opacity

Artwork should be aligned in the center of the artboard. For icons that are "full-size" scale them appropriately so that they're visually balanced. For example, icons that are square will take up more volume than circular icons. You may want circular icons to have less padding than square icons.

Strokes and text must be converted to outlines. Text not converted to strokes will be rendered in a font specified by the browser.

Guidelines

As new icons get designed over time, it’s reasonable to expect that styles may diverge or vary even across the same set of icons. To accommodate for this inevitability there are some stylistic guidelines and principles that should be followed to support a more cohesive style even as new icons are designed. (These guidelines and principles too can change.)

Geometric shapes

Use geometric shapes and predictable/common angles wherever possible. Other than creating clean and pleasant looking icons, designing this way can reduce file size as fewer points are required to create the SVG path.

Flat

For system icons (not illustrations or artwork) keep details to a minimum and avoid gradients and multiple colors.

Edges & curves

Although pixel-perfect stroke weights are not necessary, these weights are a good approximation to maintain visual balance.

For 16x16px icons:
  • Edges: 0px or 0.5px curve radius
  • Line weight: 1px-2px

Using icons with text:

Icons can be used to add additional meaning to actions but they must be used very carefully. Icons can help overcome language barriers and provide additional context (users are already familiar with) to indicate clearly what action will be taken. Misused icons can confuse users.

Some things to keep in mind:
  • The icon concept should be universally recognizable.
  • Place icons above or on the left of accompanying text.
  • If a text with an icon performs the same (in terms of recognition and usability) as text without an icon, the icon should be removed.