Friendly UI0.4Storybook Documentation
Start here

Server & client

Keep the page on the server. Add interaction where it belongs.

Preview

Get started

'use client';

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

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <Button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </Button>
  );
}

The default entry point exports server-compatible components built from native HTML. Modal, Tabs, and Toast live in the explicit @fwenthehunter/friendly-ui/client entry point. A Server Component can render those client components while keeping the rest of the page on the server.

Opt into interaction

Add 'use client' to a small wrapper when you need state or event callbacks. Import the same components there. A prop cannot switch the server/client boundary; Next.js determines it from the module graph.

Ordinary event callbacks cannot cross from a Server Component to a Client Component. Define them inside your client wrapper. Client components can still be prerendered to HTML.

Native behavior comes first

Input fields and the Accordion disclosure work with browser-native behavior. A disclosure does not require hydration simply to open and close.

This documentation is static

On GitHub Pages, Server Components run at build time. Client previews hydrate in the browser. Server Actions, request-time rendering, and other features needing a running server cannot be demonstrated live on this host.