### Setup: Clone, Install, Build, and Open Example

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

This snippet outlines the steps to clone the cf-ui repository, install dependencies, build the example project, and open it in a browser. It requires Git, Yarn, and a web browser.

```Shell
git clone git@github.com:cloudflare/cf-ui.git
cd cf-ui/example
yarn install
yarn run build
open index.html
```

--------------------------------

### Cloning and Running cf-ui Example

Source: https://github.com/cloudflare/cf-ui/blob/master/README.md

This command-line snippet shows how to clone the cf-ui repository, navigate to the example package, install dependencies, build the example, and open it in a browser. This is useful for trying out the components locally.

```sh
git clone git@github.com:cloudflare/cf-ui.git
cd cf-ui/packages/example
npm install
npm run build
open index.html
```

--------------------------------

### Bootstrap Monorepo with Lerna

Source: https://github.com/cloudflare/cf-ui/blob/master/discussions/cf-ui-monorepo.md

This snippet demonstrates the initial setup commands for a monorepo managed by Lerna. It involves cloning the repository, installing dependencies, and bootstrapping the packages to link cross-dependencies.

```Shell
git clone <repository-url>
npm install
npm run bootstrap
```

--------------------------------

### Setup and Install Dependencies

Source: https://github.com/cloudflare/cf-ui/blob/master/CONTRIBUTING.md

Clones the cf-ui repository, navigates into the directory, and installs project dependencies using Yarn. It also runs the bootstrap command for Lerna package management.

```sh
git clone git@github.com:cloudflare/cf-ui.git
cd cf-ui
yarn install
yarn run bootstrap
```

--------------------------------

### Install cf-util-adwords

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-adwords/README.md

Installs the cf-util-adwords package using npm.

```shell
$ npm install cf-util-adwords
```

--------------------------------

### Install cf-style-container

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-style-container/README.md

Installs the cf-style-container package using npm. This is the initial step to integrate the library into your project.

```sh
npm install cf-style-container
```

--------------------------------

### Install cf-component-tooltip

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-tooltip/README.md

Installs the cf-component-tooltip package using npm. This is the first step to using the tooltip component in your project.

```sh
npm install cf-component-tooltip
```

--------------------------------

### Install cf-component-dynamic-content using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-dynamic-content/README.md

This snippet shows the command to install the cf-component-dynamic-content package using npm. It's a straightforward installation process.

```sh
$ npm install cf-component-dynamic-content
```

--------------------------------

### Install cf-component-table

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-table/README.md

Installs the cf-component-table package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-table
```

--------------------------------

### Install cf-component-box

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-box/README.md

Installs the cf-component-box package using npm.

```sh
npm install cf-component-box
```

--------------------------------

### Install cf-util-http-file

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-http-file/README.md

Installs the cf-util-http-file package using npm. This is the primary method for integrating the utility into your project.

```shell
npm install cf-util-http-file
```

--------------------------------

### Install cf-util-route-handler

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-route-handler/README.md

Installs the cf-util-route-handler package using npm. This is the first step to using the routing utilities in your project.

```shell
$ npm install cf-util-route-handler
```

--------------------------------

### Install cf-component-pagination

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-pagination/README.md

Installs the Cloudflare Pagination Component using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-pagination
```

--------------------------------

### Install cf-component-input using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-input/README.md

This snippet shows the command to install the cf-component-input package from npm, which is the first step to using it in a project.

```sh
$ npm install cf-component-input
```

--------------------------------

### Install cf-component-modal

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-modal/README.md

Installs the cf-component-modal and its dependency, react-gateway, using npm.

```sh
$ npm install --save cf-component-modal react-gateway
```

--------------------------------

### Install cf-test-www-api

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-test-www-api/README.md

Installs the `cf-test-www-api` package using npm. This is the first step to using the utility in your project.

```sh
$ npm install cf-test-www-api
```

--------------------------------

### Modal Confirmation Example

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

Provides an example of how to implement a confirmation modal using the Modal component. It includes controlling the modal's open state and handling close requests.

```javascript
import React, { useState } from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, ModalClose } from '@cloudflare/components/Modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal
        type="confirm"
        isOpen={isOpen}
        onRequestClose={handleClose}
        closeOnEsc={true}
        closeOnBackdropClick={true}
        width="500px"
      >
        <ModalHeader>Confirm Action</ModalHeader>
        <ModalBody>Are you sure you want to proceed?</ModalBody>
        <ModalFooter>
          <ModalClose onClick={handleClose} label="Cancel" />
          <button onClick={handleClose}>Confirm</button>
        </ModalFooter>
      </Modal>
    </div>
  );
}
```

--------------------------------

### Install cf-util-http with npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-http/README.md

This command installs the cf-util-http library using npm, the Node Package Manager. It is the first step to using the library in your project.

```sh
$ npm install cf-util-http
```

--------------------------------

### Install cf-util-async with npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-async/README.md

This command installs the cf-util-async package using npm, the Node Package Manager. It is a prerequisite for using the library in your project.

```sh
$ npm install cf-util-async
```

--------------------------------

### Toggle Component - Example

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

The Toggle component provides a switch UI element. This example shows a basic functional toggle.

```JavaScript
import Toggle from './Toggle';

<Toggle />
```

--------------------------------

### Install cf-component-progress using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-progress/README.md

Installs the cf-component-progress package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-progress
```

--------------------------------

### Install cf-test-focus using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-test-focus/README.md

Installs the cf-test-focus package using npm. This is the first step to using the focus testing utility in your project.

```sh
$ npm install cf-test-focus
```

--------------------------------

### Install cf-builder-table with npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-builder-table/README.md

This command installs the cf-builder-table package using npm, making it available for use in your project.

```sh
npm install cf-builder-table
```

--------------------------------

### Install cf-component-copyable-textarea using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-copyable-textarea/README.md

This snippet shows the command to install the cf-component-copyable-textarea package using npm.

```sh
$ npm install cf-component-copyable-textarea
```

--------------------------------

### Install cf-component-text using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-text/README.md

Installs the cf-component-text package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-text
```

--------------------------------

### Install cf-util-markdown using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-markdown/README.md

This snippet shows the command to install the cf-util-markdown library using npm, the Node Package Manager. This is a prerequisite for using the library in a Node.js project.

```shell
$ npm install cf-util-markdown
```

--------------------------------

### Install cf-builder-pagination using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-builder-pagination/README.md

This command installs the cf-builder-pagination package using npm, making it available for use in your Node.js project.

```sh
$ npm install cf-builder-pagination
```

--------------------------------

### Install cf-component-select

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-select/README.md

This command installs the cf-component-select package using npm. It's a prerequisite for using the component in your React project.

```sh
npm install cf-component-select
```

--------------------------------

### Install cf-style-provider

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-style-provider/README.md

This command installs the cf-style-provider package using npm. It's the first step to integrate Cloudflare's Fela-based styling into your project.

```sh
npm install cf-style-provider
```

--------------------------------

### Install cf-component-list using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-list/README.md

Installs the cf-component-list package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-list
```

--------------------------------

### Install cf-component-checkbox using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-checkbox/README.md

This snippet shows the command to install the cf-component-checkbox package using npm, which is the first step to using it in a project.

```sh
$ npm install cf-component-checkbox
```

--------------------------------

### Install cf-component-dropdown using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-dropdown/README.md

This command installs the cf-component-dropdown package using npm, making it available for use in your project.

```sh
$ npm install cf-component-dropdown
```

--------------------------------

### Install cf-builder-card using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-builder-card/README.md

This snippet shows the command to install the cf-builder-card package using npm. It's a prerequisite for using the library in your project.

```sh
$ npm install cf-builder-card
```

--------------------------------

### Install cf-component-card using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-card/README.md

Installs the cf-component-card package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-card
```

--------------------------------

### Install cf-component-tabs using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-tabs/README.md

Installs the Cloudflare Tabs Component package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-tabs
```

--------------------------------

### Usage Example: React Table Component

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-table/README.md

Demonstrates how to use the cf-component-table component in a React application. It shows importing necessary components from 'cf-component-table' and rendering a basic table with data.

```jsx
import React from 'react';
import {
  Table,
  TableHead,
  TableBody,
  TableFoot,
  TableRow,
  TableHeadCell,
  TableCell
} from 'cf-component-table';

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const TableComponent = () => (
  <Table>
    <TableHead>
      <TableRow>
        <TableHeadCell>One</TableHeadCell>
        <TableHeadCell>Two</TableHeadCell>
        <TableHeadCell>Three</TableHeadCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map((row, r) => (
        <TableRow key={r}>
          {row.map((cell, c) => (
            <TableCell key={c}>
              {cell}
            </TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  </Table>
);

export default TableComponent;
```

--------------------------------

### JavaScript UI Component Example

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

Demonstrates the usage of a JavaScript-based UI component within the CF UI framework. This snippet highlights how to instantiate and interact with a common UI element, likely requiring specific CSS for styling and potentially HTML for structure.

```JavaScript
import React from 'react';
import { Button } from '@cloudflare/cf-ui';

function MyComponent() {
  return (
    <Button onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
}

export default MyComponent;
```

--------------------------------

### Basic Usage of cf-util-http

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-http/README.md

Demonstrates how to use the cf-util-http library to make a POST request. It shows how to intercept and modify request options using `beforeSend` to prepend a base URL, and how to handle responses and errors.

```javascript
import * as http from 'cf-util-http';

http.beforeSend(opts => {
  opts.url = '/api/v4' + opts.url;
});

http.post('/posts', {
  body: {
    title: 'A New Post',
    content: 'Contents of the new post.'
  }
}, (err, res) => {
  if (err) {
    console.log(err.body); // > { errors: [{ message: 'Error!' }] }
  } else {
    console.log(res.body); // > { result: { id: 1, title: 'A New Post', content: 'Contents of the new post.' } }
  }
});
```

--------------------------------

### Install cf-component-toggle

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-toggle/README.md

Installs the cf-component-toggle package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-toggle
```

--------------------------------

### Install cf-component-radio with npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-radio/README.md

This command installs the cf-component-radio package using npm, making it available for use in your project.

```sh
$ npm install cf-component-radio
```

--------------------------------

### Install cf-component-icon using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-icon/README.md

This command installs the cf-component-icon package from npm, making it available for use in your project.

```sh
npm install cf-component-icon
```

--------------------------------

### Install cf-component-textarea with npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-textarea/README.md

Installs the cf-component-textarea package using npm. This is the first step to using the component in your project.

```sh
$ npm install cf-component-textarea
```

--------------------------------

### Basic Markdown Conversion with cf-util-markdown

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-markdown/README.md

Demonstrates the basic usage of the cf-util-markdown library. It imports the library and uses the markdown function to convert a simple markdown string ('# Hello World') into an HTML string.

```javascript
import markdown from 'cf-util-markdown';

markdown('# Hello World');
// >> <h1>Hello World</h1>
```

--------------------------------

### Responsive Styles with Media Queries

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-style-provider/README.md

This JavaScript example shows how to define responsive styles using media queries within Fela. The `cf-style-provider` package supports predefined media queries like 'desktop', allowing styles to adapt based on screen size.

```js
const Column = createComponent(() => ({
  color: 'black',
  desktop: {
    color: 'white'
  }
}))
```

--------------------------------

### Install cf-component-link using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-link/README.md

This command installs the cf-component-link package using npm, making it available for use in your project.

```sh
$ npm install cf-component-link
```

--------------------------------

### Cloudflare UI Component Navigation

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

This snippet demonstrates the structure of a documentation page for the Cloudflare UI library. It uses HTML anchors to link to different UI components, allowing for easy navigation within the documentation.

```HTML
### cf-ui

*   [Box](#cf-component-box)
*   [Button](#cf-component-button)
*   [Callout](#cf-component-callout)
*   [Card](#cf-component-card)
*   [Card Builder](#cf-builder-card)
*   [Checkbox](#cf-component-checkbox)
*   [Code](#cf-component-code)
*   [Copyable Textarea](#cf-component-copyable-textarea)
*   [Dropdown](#cf-component-dropdown)
*   [Dynamic Content](#cf-component-dynamic-content)
*   [Form](#cf-component-form)
*   [Heading](#cf-component-heading)
*   [Icon](#cf-component-icon)
*   [Input](#cf-component-input)
*   [Label](#cf-component-label)
*   [Link](#cf-component-link)
*   [List](#cf-component-list)
*   [Loading](#cf-component-loading)
*   [Modal](#cf-component-modal)
*   [Notifications](#cf-component-notifications)
*   [Page](#cf-component-page)
*   [Pagination](#cf-component-pagination)
*   [Pagination Builder](#cf-builder-pagination)
*   [Progress](#cf-component-progress)
*   [Radio](#cf-component-radio)
*   [Select](#cf-component-select)
*   [Table](#cf-component-table)
*   [Table Builder](#cf-builder-table)
*   [Tabs](#cf-component-tabs)
*   [Text](#cf-component-text)
*   [Textarea](#cf-component-textarea)
*   [Toggle](#cf-component-toggle)
```

--------------------------------

### Run Tests

Source: https://github.com/cloudflare/cf-ui/blob/master/CONTRIBUTING.md

Executes all project tests, requiring a prior build. It also demonstrates how to run tests for a single package or in watch mode.

```sh
yarn test
yarn test -- --testPathPattern cf-component-button
yarn test -- --watchAll
```

--------------------------------

### HTML Structure for UI Integration

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

Illustrates the basic HTML structure required to integrate CF UI components into a web page. This typically involves a root element where the JavaScript application will mount, and potentially includes links to necessary CSS files.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CF UI Example</title>
  <link rel="stylesheet" href="path/to/cf-ui.css">
</head>
<body>
  <div id="root"></div>
  <script src="path/to/your/app.js"></script>
</body>
</html>
```

--------------------------------

### Create Table Structures

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

Offers components for building tables, including `Table`, `TableBody`, `TableCell`, `TableFoot`, `TableHead`, `TableHeadCell`, and `TableRow`. `Table` accepts props for styling like `striped`, `hover`, `bordered`, and `condensed`. `TableCell` allows alignment, and `TableRow` supports custom types.

```javascript
### TableTable.js

Name

Type

Default value

Description

striped

bool

false

hover

bool

false

bordered

bool

true

condensed

bool

false

children

node

### TableBodyTableBody.js

Name

Type

Default value

Description

children

node

### TableCellTableCell.js

Name

Type

Default value

Description

align

enum

One of: left, center, right

children

node

### TableFootTableFoot.js

Name

Type

Default value

Description

children

node

### TableHeadTableHead.js

Name

Type

Default value

Description

children

node

### TableHeadCellTableHeadCell.js

Name

Type

Default value

Description

children

node

### TableRowTableRow.js

Name

Type

Default value

Description

type

custom

default

accent

custom

false

children

node
```

--------------------------------

### Install cf-util-http-poll using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-util-http-poll/README.md

Installs the cf-util-http-poll package using npm. This is the first step to using the utility in your project.

```bash
$ npm install cf-util-http-poll
```

--------------------------------

### Install cf-component-notifications

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-notifications/README.md

Installs the Cloudflare Notifications Component using npm. This is the first step to integrate notification functionality into your React application.

```sh
$ npm install cf-component-notifications
```

--------------------------------

### Install cf-component-form using npm

Source: https://github.com/cloudflare/cf-ui/blob/master/packages/cf-component-form/README.md

Installs the cf-component-form package using npm. This is the first step to using the form component in your project.

```sh
$ npm install cf-component-form
```

--------------------------------

### Create a Link with a 'to' prop

Source: https://github.com/cloudflare/cf-ui/blob/master/docs/index.html

Demonstrates how to create a navigation link using the 'to' prop. This is the standard way to define internal navigation within the application.

```javascript
import React from 'react';
import Link from '@cloudflare/components/Link';

function App() {
  return (
    <Link to="/">
      Link to /
    </Link>
  );
}
```