# Frictionless Components

<Meta title="Frictionless Components" />

[![Build](https://img.shields.io/github/workflow/status/frictionlessdata/components/general/main)](https://github.com/frictionlessdata/components/actions)
[![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/components/main)](https://codecov.io/gh/frictionlessdata/components)
[![Registry](https://img.shields.io/npm/v/frictionless-components.svg)](https://www.npmjs.com/package/frictionless-components)
[![Codebase](https://img.shields.io/badge/github-main-brightgreen)](https://github.com/frictionlessdata/components)
[![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discordapp.com/invite/Sewv6av)

Data integration components for TypeScript/React that implement Frictionless Data concepts in visual UI.

## Purpose

- **Visualize Frictionless**: With Frictionless Framework and other Frictionless libraries you can create and edit various metadata structures. Frictionless Components allows to visualize them and provide a user friendly UI to work with them.

## Features

- Open Source (MIT)
- Reusable React Components

## Example

```javascript
const element = document.getElementById('app')
frictionlessComponents.render(frictionlessComponents.Report, {report}, element)
```

## Documentation

Please visit our documentation portal:
- https://components.frictionlessdata.io