Getting started

Here's what you need to get going.

The RFUI library is hosted as an NPM package.

npm install rfui-package

The RFUI library has a peer dependency on @headlessui/react.

npm install @headlessui/react

RFUI gives you components that use classes like flex-col. For example, the Stack component outputs the following HTML:

<div class="flex flex-col"></div>

In order for things to look as they're expected to look, you'll need to make sure that you have the corresponding CSS:

.flex { display: flex; }
.flex-col { flex-direction: column; }

Most of the styles you'll need come from Tailwind CSS. Others come from RFUI. The bottom of this file has the styles that come from RFUI .

If you are using Tailwind in your app, make sure that you have a CSS file like this one. Note the @tailwind directives at the top, the @layer directive in the middle, and the RFUI styles at the bottom. They are all needed. You will also need to have:

"./node_modules/rfui-package/dist/**/*.{js,ts}"

in your tailwind.config.ts's content array so that Tailwind doesn't purge the classes that RFUI needs.

If you aren't using Tailwind you can use this rfui.css file:

<link rel="stylesheet" href="https://github.com/rfui-library/rfui-package/blob/master/rfui.css" />

Something like this:

import { Button } from "rfui-package";

<Button>Example</Button>

It is usually a good idea to decide upfront on how serious or playful you want the tone of your website to be. See "Choose a personality".

Various RFUI components use heroicons. If you end up having a need for more icons, to maintain a consistent look and feel, you probably will want to use heroicons in your project as well.