Skip to content
Go to file


Failed to load latest commit information.

cf-ui (not maintained)

This repository is no longer maintained. We decided to merge cf-ui into our internal monorepo and we will keep the future development there. We do not accept pull requests here. However, we plan to synchronize our internal changes with this repository.

Build Status

Cloudflare UI Framework

cf-ui is a set of over 50 packages used to build UIs at Cloudflare using projects such as React, Fela, Lerna and more.


Whilst cf-ui is used extensively within Cloudflare, it is also an evolving set of components and therefore can be unstable. We recommend 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.

cf-ui meets CSS in JS

We are currently migrating cf-ui to CSS in JS powered by Fela. That means that our components include styles written in JavaScript and you can use them out of the box! However, you need to start using Fela in your project. Follow our migration here.

Getting Started

To view all of the available components and packages, see the packages/ directory. Do you want to see examples? Check out our documentation.

CSS in JS setup

cf-ui 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 <style></style> node. You have to use Fela in your project if you want to use cf-ui. Here's the code example how:

import React from 'react';
import ReactDOM from 'react-dom';
import { StyleProvider } from 'cf-style-provider';
import { Button } from 'cf-component-button';

    <Button type="primary" onClick={() => console.log('clicked')}>
      Primary Button

Do you want to try for yourself?

git clone
cd cf-ui/packages/example
npm install
npm run build
open index.html


To get started contributing please see


cf-ui is BSD Licensed

You can’t perform that action at this time.