Installation

Install @fwenthehunter/friendly-ui in your Next.js App Router application. React 19 and React DOM 19 are required. Friendly UI is MIT licensed.

Choose your package manager

npm, pnpm, Yarn, and Bun install the same @fwenthehunter/friendly-ui package. Choose one command above and keep using your application’s existing manager and lockfile. React 19 and React DOM 19 are peer dependencies.

The package includes compiled JavaScript, types, CSS, and the MIT license. No install-time build or documentation server is required. You do not need to clone this repository to use Friendly UI.

Test local changes before a release

For development of Friendly UI itself, this repository uses npm workspaces. Build and pack the package, then install the tarball into a separate application. Replace the paths below with your actual tarball path.

# In the Friendly UI repository
npm install
npm run build -w @fwenthehunter/friendly-ui
npm pack -w @fwenthehunter/friendly-ui

# In your own app, choose ONE
npm install /path/to/fwenthehunter-friendly-ui-0.4.0.tgz
pnpm add /path/to/fwenthehunter-friendly-ui-0.4.0.tgz
yarn add file:/path/to/fwenthehunter-friendly-ui-0.4.0.tgz
bun add /path/to/fwenthehunter-friendly-ui-0.4.0.tgz

Load the styles once

In your global CSS, import Tailwind, the component styles, the optional Tailwind bridge, and then your own theme.

@import "tailwindcss";
@import "@fwenthehunter/friendly-ui/styles.css";
@import "@fwenthehunter/friendly-ui/tailwind.css";
@import "./theme.css";

Import that global CSS from your root layout. With plain CSS, skip both Tailwind imports. No provider or package-source scanning is needed.

Use a component

import { Button } from '@fwenthehunter/friendly-ui';

export default function Page() {
  return <Button>Get started</Button>;
}