@fanvue/ui

@fanvue/ui

React component library built with Tailwind CSS for the Fanvue ecosystem.

Features

• Tailwind CSS v4 - Modern CSS-first theming with design tokens
• Accessible - WCAG 2.1 AA compliant with Radix UI primitives
• Tree-shakable - Import only what you use
• Dark mode - Built-in light/dark theme support
• TypeScript - Full type definitions included
• Tested - Unit tests with Vitest, E2E with Playwright

Setup

1. Install

npm i @fanvue/ui

2. Peer dependencies

# Required
npm i react react-dom tailwindcss

# Only if using DatePicker
npm i react-day-picker

3. Configure CSS

Add the following to your CSS entry point (e.g. app.css):

@import "tailwindcss";
@source "../node_modules/@fanvue/ui";
@import "@fanvue/ui/styles/theme.css";

4. Load Inter font

Load the Inter typeface via Google Fonts or @fontsource-variable/inter:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />

or

npm i @fontsource-variable/inter

Usage

import { Button } from "@fanvue/ui";

function App() {
  return (
    <Button variant="primary" size="40">
      Click me
    </Button>
  );
}

Theming

Customize the theme by overriding CSS variables:

:root {
  --color-primary-500: #00aeef;
  --color-neutral-500: #6b7280;
  --color-background-0: #ffffff;
}

Development

Prerequisites

• Node.js 20+
• pnpm 9+

Installation

pnpm install
pnpm dev
pnpm storybook

Scripts

Command	Description
Development
pnpm dev	Start Vite dev server
pnpm dev:watch	Rebuild dist/ on change (live-reload into apps)
pnpm build	Build the library for production
pnpm preview	Preview production build
Testing
pnpm test	Run unit tests
pnpm test:watch	Run tests in watch mode
pnpm test:coverage	Run tests with coverage report
pnpm test:storybook	Run Storybook interaction tests
pnpm test:e2e	Run Playwright E2E tests
pnpm typecheck	Run TypeScript type checking
Linting & Formatting
pnpm lint	Check for lint errors (Biome)
pnpm lint:fix	Auto-fix lint errors
pnpm format	Format code
Storybook
pnpm storybook	Start Storybook dev server on port 6006
pnpm build-storybook	Build Storybook static site
Tokens & Build
pnpm build:dictionary	Generate styles from design tokens
pnpm build:showcase	Build the showcase site
pnpm size-limit	Check bundle size
Publishing
pnpm publish:dry-run	Build and dry-run npm publish

Live-reloading into pandora/eden

To iterate on a component and see it live in eden (local.fanvue.com) without publishing:

• Easiest: from the pandora repo root, run pnpm dev:local-ui. It runs this library's watch build automatically and points eden at this checkout's dist/. See pandora's README ("Live-reloading @fanvue/ui") — the pandora wiring ships in a companion PR.
• Manual: run pnpm dev:watch here, and start eden with USE_LOCAL_FANVUE_UI=1 (or pnpm --filter @pandora/eden start:local-ui).

Requires this repo checked out beside pandora (or FANVUE_UI_PATH set in pandora). Component markup and Tailwind classes hot-reload; design tokens in theme.css are loaded by eden from the installed package, so local theme.css edits aren't reflected — test those via a published (pre)release.

Figma + Storybook Integration

This library is integrated with Figma through Chromatic Connect. View the complete documentation in Storybook:

pnpm storybook
# Navigate to "Documentation > Figma Integration"

Commit Convention

This project uses Conventional Commits. Commit messages are validated by commitlint.

# Examples
feat(button): add loading state
fix: resolve focus ring issue
docs: update installation guide

For guided commit messages, install Commitizen globally:

npm i -g commitizen

Then use cz instead of git commit.

Contributing

See CONTRIBUTING.md for guidelines.

Security

See SECURITY.md for reporting vulnerabilities.

License

Apache 2.0 Shift Holdings Ltd