Skip to main content
Installing @fanvue/ui takes four steps: the package, its peer dependencies, the CSS entry point, and the Inter typeface. This page covers all four and ends with a working component.

​
Requirements

Tailwind CSS v4 is required, not optional
@fanvue/ui publishes no compiled stylesheet. Components render Tailwind utility classes and a token stylesheet written in Tailwind v4 syntax (@theme, @utility, @variant). Without Tailwind v4 compiling your CSS, every component renders unstyled. If your app is on Tailwind v3, upgrade to v4 before installing. See Tailwind setup.

​
Install

1

Install the package

2

Install the required peer dependencies

npm and yarn install missing peer dependencies automatically; pnpm does not, so install them explicitly.
3

Set up your CSS entry point

Install the animation utilities the overlays need, then write four lines into your CSS entry point, in this order:
app.css
@fanvue/ui/styles/theme.css defines every design token and the typography utilities, and pulls in base.css itself.The @source line tells Tailwind to scan the package for the class names the components use, which it skips by default because the package lives in node_modules. Adjust the relative path so it resolves from your CSS file to your node_modules directory.tw-animate-css supplies the animate-in / animate-out utilities that Dialog, Drawer, Select, DropdownMenu, Autocomplete, and Toast apply on open and close. Tailwind v4 core does not ship them and neither does @fanvue/ui, so without a package that provides them those overlays appear and disappear with no motion. Any package supplying the same utility names works.Every line is explained in Tailwind setup.
You do not need to declare the cascade layer order
@import "tailwindcss" opens with @layer theme, base, components, utilities;, so the order is already registered by the time theme.css is read. Repeating that line in your own entry point changes nothing.
4

Load Inter

The typography utilities declare font-family: Inter. Load the typeface from Google Fonts:
index.html
Or self-host it:
Self-hosting registers a different family name
@fontsource-variable/inter registers the family as Inter Variable, and the library’s typography utilities ask for Inter. Re-declare the same font files under the name Inter with an @font-face rule, or the browser falls back to a system sans-serif.

​
Optional peer dependencies

Three features depend on packages that are declared optional in the library’s peerDependenciesMeta. Your package manager will not install them, and nothing warns you until you import the subpath that needs one. Install a package only when you use the feature it powers.
The package root never imports any of the three. See Subpath exports for what each entry point contains.

​
Your first component

App.tsx
If the button renders with no styling, Tailwind is not picking up the library’s class names. Check the @source line from step 3 against Tailwind setup.

​
TypeScript

Types ship with the package as dist/index.d.ts, bundled per entry point, so no @types/fanvue__ui package exists or is needed. Every component exports its props type and its variant and size unions alongside it:
Both ESM and CommonJS builds are published, and the exports map points each at the same type declarations, so import and require resolve identically.

​
React Server Components

Every built module carries a "use client" banner, so importing a component into a React Server Components tree (the Next.js App Router, for example) marks it as a client component without any wrapper file of your own. Server components can import from @fanvue/ui directly.

​
Next steps

Tailwind setup

Class detection, the @source line, and the animation utilities overlays need.

Theming

Turn on dark mode and override tokens to match your brand.