Here's what you need to get going.
This is a how-to guide, not a tutorial.
rfui-package
1) Install The RFUI library is hosted as an NPM package.
npm install rfui-package
@headlessui/react
2) Install The RFUI library has a peer dependency on @headlessui/react
.
npm install @headlessui/react
@heroicons/react
3) Install 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".