Skip to main content
These pages document @fanvue/ui v3.30.0.
@fanvue/ui is the React component library Fanvue builds its own product interface with, published on npm under Apache-2.0. These pages cover installing it, wiring up Tailwind CSS v4, theming it, and choosing the right entry point.

​
What you get

  • 82 components, from Button and TextField up to Dialog, Drawer, Table, ChatMessage, and Chart, each with its own reference page. Alongside them: 172 static icons, 69 animated twins, and flag artwork for 265 country codes.
  • Design tokens as CSS custom properties, the same values Fanvue’s product renders with, shipped as a Tailwind v4 theme stylesheet.
  • Light and dark themes driven by a single .dark class on an ancestor element.
  • Accessible primitives: interactive components are built on Radix UI, so focus management, keyboard behaviour, and ARIA wiring come with them.
  • TypeScript types for every component and every public prop, variant, and size type.
  • Tree-shakeable named exports, with heavy or optional features split onto their own subpaths.

​
Who this is for

Builders of Fanvue Apps, embedded or off-platform, who want their interface to match the platform rather than approximate it. If your app renders inside Fanvue’s UI, using these components is the shortest path to looking native. If it runs on your own infrastructure, they are still a normal npm dependency in any React 18 or React 19 app. The library is public and unrestricted: nothing in it is gated on being a Fanvue partner.

​
Start here

Installation

Install the package, add the required peer dependencies, import the stylesheet, and render your first Button.

Tailwind setup

The library ships no compiled CSS. Tailwind CSS v4 in your app is what turns its class names into styles.

Theming

Switch between light and dark, read the design tokens, and override them safely.

Subpath exports

Five entry points: root, /charts, /date-picker, /flags, and /animated-icons. Which to import from and why.

​
Browse the components

Every component has a live page in Storybook with rendered examples, an interactive controls panel, and generated prop tables.

Open Storybook

The published Storybook for the current main build of @fanvue/ui.
Component reference pages also live in these docs, one per component, at /ui/components/<name>. For example, Button.

​
How these docs are maintained

The component reference pages are generated from the source of the library itself: prop tables come from the TypeScript types and the JSDoc on each component, so they track the published package rather than being written by hand. The guide pages you are reading now are hand-written. Both live in the library’s repository, github.com/fanvue/fanv-ui. File issues and pull requests there, including for docs corrections. Bug reports go to github.com/fanvue/fanv-ui/issues.
Component behaviour is documented in the source
Props, variants, and per-component gotchas are documented as JSDoc on the exported types, so your editor shows them on hover and on autocomplete. Reach for that before searching the docs for a prop.