{"id":13750046,"url":"https://cloudflare.github.io/cf-ui/","last_synced_at":"2025-05-09T15:31:25.558Z","repository":{"id":66145828,"uuid":"60779483","full_name":"cloudflare/cf-ui","owner":"cloudflare","description":":gem: Cloudflare UI Framework","archived":true,"fork":false,"pushed_at":"2019-04-14T22:52:40.000Z","size":9586,"stargazers_count":1289,"open_issues_count":2,"forks_count":81,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-01-15T00:31:49.876Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudflare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-09T14:05:46.000Z","updated_at":"2024-12-17T10:36:19.000Z","dependencies_parsed_at":"2023-03-02T07:45:53.617Z","dependency_job_id":null,"html_url":"https://github.com/cloudflare/cf-ui","commit_stats":null,"previous_names":[],"tags_count":1008,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Fcf-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Fcf-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Fcf-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Fcf-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudflare","download_url":"https://codeload.github.com/cloudflare/cf-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275600,"owners_count":21882333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T08:00:20.562Z","updated_at":"2025-05-09T15:31:24.970Z","avatar_url":"https://github.com/cloudflare.png","language":"JavaScript","readme":"# cf-ui (not maintained)\n\n***\n**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.\n***\n\n[![Build Status](https://travis-ci.org/cloudflare/cf-ui.svg?branch=master)](https://travis-ci.org/cloudflare/cf-ui)\n\n\u003e Cloudflare UI Framework\n\ncf-ui is a set of over 50 packages used to build UIs at Cloudflare using\nprojects such as [React](https://facebook.github.io/react/),\n[Fela](http://fela.js.org), [Lerna](https://lernajs.io) and more.\n\n- **[Read the introductory blog post \u0026rarr;](https://blog.cloudflare.com/cf-ui/)**\n- **[Interested in more of our technical decisions? See `cf-ui/discussions` \u0026rarr;](discussions)**\n\n## Usage\n\nWhilst 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.\n\n## cf-ui meets CSS in JS\n\nWe 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).\n\n## Getting Started\n\nTo 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/).\n\n## CSS in JS setup\n\ncf-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 `\u003cstyle\u003e\u003c/style\u003e` node. **You have to use Fela in your project if you want to use cf-ui.** Here's the code example how:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { StyleProvider } from 'cf-style-provider';\nimport { Button } from 'cf-component-button';\n\nReactDOM.render(\n  \u003cStyleProvider\u003e\n    \u003cButton type=\"primary\" onClick={() =\u003e console.log('clicked')}\u003e\n      Primary Button\n    \u003c/Button\u003e\n  \u003c/StyleProvider\u003e,\n  document.getElementById('react-app')\n);\n```\n\nDo you want to try for yourself?\n\n```sh\ngit clone git@github.com:cloudflare/cf-ui.git\ncd cf-ui/packages/example\nnpm install\nnpm run build\nopen index.html\n```\n\n## Contributing\n\nTo get started contributing please see [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## License\n\ncf-ui is [BSD Licensed](LICENSE)\n","funding_links":[],"categories":["React","Design system examples","Uncategorized"],"sub_categories":["Colors","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/cloudflare.github.io%2Fcf-ui%2F","html_url":"https://awesome.ecosyste.ms/projects/cloudflare.github.io%2Fcf-ui%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/cloudflare.github.io%2Fcf-ui%2F/lists"}