hhy5277/cf-ui

:gem: Cloudflare UI Framework

cf-ui

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.

• Read the introductory blog post →
• Interested in more of our technical decisions? See cf-ui/discussions →

Usage

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.

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';

ReactDOM.render(
  <StyleProvider cssNode={document.getElementById('stylesheet')}>
    <Button type="primary" onClick={() => console.log('clicked')}>
      Primary Button
    </Button>
  </StyleProvider>,
  document.getElementById('react-app')
);

Do you want to try for yourself?

git clone [email protected]:cloudflare/cf-ui.git
cd cf-ui/example
yarn install
yarn run build
open index.html

Contributing

To get started contributing please see CONTRIBUTING.md

License

cf-ui is BSD Licensed