Use without Tailwind

@nexub/react ships its styles prebuilt. Import one stylesheet and the components work in any React app, with no Tailwind, preset or content globs.

// app entry (layout.tsx, main.tsx …)
import '@nexub/react/styles.css';

It has everything the components need: the light and dark themes, glass, the product brands (data-product="payub" and the rest), the Inter and Plus Jakarta Sans fonts, and the utility classes the components use. It's about 31 kB gzipped, and browsers download only the font subsets a page uses.

Using @nexub/patterns too? Add its stylesheet after the react one. It only carries the classes the patterns add (about 4 kB gzipped):

import '@nexub/react/styles.css';
import '@nexub/patterns/styles.css';

Your CSS still wins

Everything in the stylesheet sits in CSS cascade layers (theme, base, components, utilities). Styles outside a layer always beat layered ones, so your own CSS overrides ours, including the small CSS reset it carries, without !important or extra specificity.

Already using Tailwind?

Keep the preset setup from Getting Started. Tailwind then generates the classes alongside yours, so you don't need this stylesheet, and importing both only duplicates CSS.

Bigger text for people who ask for it (rem)

Spacing, radius, type and control heights are set in px today. To have them follow the user's browser font size, add the rem layer after the stylesheet:

import '@nexub/react/styles.css';
import '@nexub/tokens/css/rem';

At the browser default (16px) nothing changes. When someone raises their default font size, text, spacing and controls grow together, so nothing clips. Hairlines, pill shapes, shadows, icon sizes and breakpoints stay in px. The rem layer works with the Tailwind setup too, and becomes the default in 3.0.

If your app sets html { font-size: 62.5% }, the rem layer shrinks everything: leave it out until you drop that rule.