<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://fluid-design.io/docs/" rel="noopener" target="_blank"><img width="150" src="https://user-images.githubusercontent.com/13263720/205263424-c7458db9-a1ea-4b7c-8c0b-cfdc811fb5f4.png" alt="Fluid UI logo"></a>
</p>

<h1 align="center">Fluid UI</h1>

<div align="center">

[![NPM](https://img.shields.io/npm/v/@fluid-design/fluid-ui.svg)](https://www.npmjs.com/package/@fluid-design/fluid-ui)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/fluid-design-io/fluid-ui/blob/main/LICENSE)

</div>

Fluid UI is an elegant component library for React. It is built on top of mordern libraries like [tailwindcss](https://tailwindcss.com/), [headlessui](https://headlessui.dev/) and [framer-motion](https://www.framer.com/motion/).

### Getting Started

Start a new project by following our quick [Getting Started guide](http://fluid-design.io/docs/usage).

We would love to hear from you! If you have any feedback or run into issues using our library, please file

an [issue](https://github.com/fluid-design-io/fluid/issues/new) on this repository.

### Examples

The [Example Page](http://fluid-design.io/docs/examples) provides many possiple ways to group components into a nice-looking ui.

It is the perfect starting point for learning and building your own app.

### Future Goals

Fluid will keep adding new components and provide more customizations to exisiting ones.
