Free CloudFlare UI Framework for Frontend Developers

By Jake Rocheleau. in UI/UX. Updated on May 18, 2017.

CloudFlare recently announced a major overhaul of their system from Backbone to React.js. This came with an updated frontend UI framework and the team decided to open source it for everyone.

The CloudFlare UI Framework, abbreviated CF-UI, is a free open source library of frontend codes that can tie into a React workflow.

The team has been very open about their move including other technologies such as Lerna.js for managing code across multiple repos. This overhaul goes deeper than superficial components, yet these free components can make a huge difference in your workflow.

CloudFlare added custom components into a library along with unit tests for checking code quality. You can see a live demo for all the components on this page including documentation and code snippets.

Read Also: Getting Started with React.js

All code is built with React, so it extends classes made for different components such as pagination, dropdown menus, input fields, and even auto-copying textareas.

You can browse through all packages on GitHub and they can all be installed via npm. Note this isn’t a simple frontend framework like Bootstrap (although it closely mimics their style). Instead, this is a complete React+Redux approach to frontend components.

Note you should already feel comfortable working with React components, installing libraries via npm, and adding bindings through React Redux.

All those projects are open source and easy to append into your site. Individual components have their own JS files which you can add into your site’s header. And you can browse through all components on the GitHub page if you want to learn more.

Live examples and source code snippets can be found here if you want to dive right in. And, of course, if you have questions or ideas for technical features you should browse the discussions directory for more info. You could also try messaging CloudFlare devs or sending them a tweet @Cloudflare.