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

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

npm install @heroicons/react

Various RFUI components use heroicons so 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.

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.

If you're using Tailwind, below the @import "tailwindcss"; directive include the following:

@import "rfui-package/dist/rfui-tailwind.css";
@source '../node_modules/rfui-package/dist/**/*.{js,ts}';

The first line will include some RFUI styles and theme information. The second will make sure that Tailwind doesn't purge styles that RFUI uses.

If you're not using Tailwind add the following to your CSS file to import the RFUI styles:

@import "rfui-package/dist/rfui.css";

You can also see that rfui.css file on GitHub here.

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".