Why FUNSTACK UI

React 19 added actions, transitions, useOptimistic, Suspense for data and <ViewTransition>. FUNSTACK UI is a headless component library that uses them for you, so the async work around every button, tab and dialog is already done.

What you stop writing

• No pending flags

  Every component with an action sets data-pending while the action runs, until its result is on screen. Style it in CSS.

• No onChange + useTransition + useOptimistic

  Pass an async function as an action prop. The component runs it in a transition, shows the new value at once, and rolls it back if the action fails. Errors go to your Error Boundary.

• No races between fast clicks

  The display always shows the latest click. Uncontrolled state commits only the latest one, so a slow response to an older click never overwrites a newer choice.

• No fallback flashes

  When the next tab, accordion item or dialog loads data, the current screen stays as it is and the trigger shows pending until the new content is ready.

• No JavaScript copies of the browser

  Popups use the Popover API, <dialog> and CSS Anchor Positioning; form controls are native inputs. The browser handles the top layer and Escape, and popovers close on a click outside natively.

• No animation glue

  Pass transition to a part and it renders React's <ViewTransition>. Each change is tagged with a transition type, such as fsui-tabs-next, so you can animate by direction.

Before and after

A favourite button that saves to a server. By hand:

const [pressed, setPressed] = useState(initial);
const [optimistic, setOptimistic] = useOptimistic(pressed);
const [isPending, startTransition] = useTransition();

<button
  aria-pressed={optimistic}
  data-pending={isPending ? "" : undefined}
  onClick={() => {
    const next = !optimistic;
    startTransition(async () => {
      setOptimistic(next);
      await saveFavorite(next);
      startTransition(() => setPressed(next));
    });
  }}
>
  Favorite
</button>
// ...and a slow save from an earlier click can still overwrite a later one.

With FUNSTACK UI:

<Toggle defaultPressed={initial} pressedChangeAction={(next) => saveFavorite(next)}>
  Favorite
</Toggle>

Same optimistic flip and data-pending, plus latest-click-wins and transition types for animation. Try it on the home page.

Compared with other headless libraries

Most established headless React libraries were designed before React's async features, and support a wide range of browsers. They are mature and a safe choice. FUNSTACK UI takes a different approach:

Who it is for

Next

• Getting started: install, import, style.
• Action props: the idea everything else builds on.
• Using with AI agents: give your coding agent the full docs.