https://cloudflare.github.io/cf-ui/

:gem: Cloudflare UI Framework
https://cloudflare.github.io/cf-ui/

Last synced: about 11 hours ago
JSON representation

:gem: Cloudflare UI Framework

• Host: GitHub
• URL: https://cloudflare.github.io/cf-ui/
• Owner: cloudflare
• License: other
• Archived: true
• Created: 2016-06-09T14:05:46.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-14T22:52:40.000Z (over 5 years ago)
• Last Synced: 2024-09-27T03:04:00.412Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 9.14 MB
• Stars: 1,292
• Watchers: 33
• Forks: 80
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
# 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](https://travis-ci.org/cloudflare/cf-ui.svg?branch=master)](https://travis-ci.org/cloudflare/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](https://facebook.github.io/react/),

[Fela](http://fela.js.org), [Lerna](https://lernajs.io) and more.

- **[Read the introductory blog post →](https://blog.cloudflare.com/cf-ui/)**

- **[Interested in more of our technical decisions? See `cf-ui/discussions` →](discussions)**

## Usage

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](https://github.com/rofrischmann/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](https://github.com/cloudflare/cf-ui/issues/100).

## Getting Started

To view all of the available components and packages, see the [`packages/` directory](packages). Do you want to see examples? Check out our [documentation](https://cloudflare.github.io/cf-ui/).

## CSS in JS setup

cf-ui components expect that there is [Fela Renderer](http://fela.js.org/docs/basics/Renderer.html) 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:

```jsx

import React from 'react';

import ReactDOM from 'react-dom';

import { StyleProvider } from 'cf-style-provider';

import { Button } from 'cf-component-button';

ReactDOM.render(

  

     console.log('clicked')}>

      Primary Button

    

  ,

  document.getElementById('react-app')

);

```

Do you want to try for yourself?

```sh

git clone [email protected]:cloudflare/cf-ui.git

cd cf-ui/packages/example

npm install

npm run build

open index.html

```

## Contributing

To get started contributing please see [CONTRIBUTING.md](CONTRIBUTING.md)

## License

cf-ui is [BSD Licensed](LICENSE)