FlairUp — CSS-in-JS for packages that ship styles

01 · The problem

Why packages need their own styling

FlairUp is a CSS-in-JS library for UI package authors. Applications can dictate their stack; packages cannot — a shared component must bring its styles along and behave in bundlers, frameworks, and server runtimes it has never seen. FlairUp is designed for exactly that job.

The package problem

Manual style imports: Consumers have to import CSS files or configure style loaders before a single component renders. Every extra setup step loses adopters.
Bundler-specific configuration: Webpack, Rollup, Vite and others each handle styles differently. A package that works everywhere needs styling with no build pipeline at all.
Style conflicts: Shared class names and CSS variables leak across packages. Two dependencies can silently override each other with no warning.
SSR as an afterthought: Server rendering needs the same styles as strings, in every framework, with no DOM available. Most solutions bolt this on late — or never.

How FlairUp answers

Zero configuration: Styles ship inside the JavaScript. Consumers install the package and render — nothing to import, nothing to configure.
No build pipeline: FlairUp computes plain CSS at runtime and injects it once. It works under any bundler, or none.
Scoped atomic classes: Every declaration becomes its own hashed, deduplicated class. Packages cannot collide, and repeated styles are inserted once.
SSR from day one: sheet.getStyle() returns the whole stylesheet as a string. Render it into a <style> tag on the server; the client picks it up.

02 · Concepts

Core concepts

One sheet per name and target

createSheet('name') gives a package its own stylesheet; calls with the same name and mount target share it. A null root always creates an isolated sheet, so server requests never share styles. Identical declarations deduplicate into a single class, so popular styles cost nothing extra no matter how many components use them.

Atomic classes, composed with cx()

Every scope returns a set of classes — one per declaration. Pass sets, strings, arrays, and { name: boolean } maps to cx() and get one class string back.

Conditions travel with the style

Pseudo selectors, parent markers, media queries, and CSS variables live inside the style object next to the declarations they modify. No separate files, no selector bookkeeping.

SSR is just a string

sheet.getStyle() returns the full stylesheet as text. Create the sheet with a null root on the server, inject the string into a <style> tag, and the client continues from the same CSS.

1import { createSheet, cx } from 'flairup';
2
3const sheet = createSheet('my-package');
4
5const styles = sheet.create({
6  button: {
7    color: '#fff',
8    backgroundColor: '#9c1a24',
9    padding: '10px 20px',
10    borderRadius: '8px',
11    '&:hover': {
12      backgroundColor: '#7e1420',
13    },
14  },
15  block: {
16    display: 'block',
17    width: '100%',
18  },
19});
20
21function Button({ block, className }) {
22  return (
23    <button className={cx(styles.button, block && styles.block, className)}>
24      Save changes
25    </button>
26  );
27}

03 · Features

Built for shipping

≈6 KB minified and gzipped, zero dependencies

Small enough to bundle into any package without a second thought.

TypeScript throughout

Style objects are typed; scopes come back as named sets of classes.

Scoped by construction

Hashed atomic classes mean two packages never fight over a name.

Framework-agnostic SSR

Styles render to a string anywhere JavaScript runs — no DOM required.

04 · Install

Installation

1npm install flairup
2# or
3yarn add flairup

05 · API

API reference

createSheet(name, rootNode?)

Creates a named stylesheet and returns { create, keyframes, getStyle, isApplied }. Pass an element to mount into it, null to keep styles as strings only (the SSR pattern), or nothing to mount into <head>. An options object { rootNode, nonce } covers the rest.

1const sheet = createSheet('my-package');
2// SSR only:
3const serverSheet = createSheet('my-package', null);

sheet.create(styles)

Defines named scopes of camelCase declarations. Each scope returns a set with one class per declaration. Nest :hover, ::before, .parent markers, &.compound selectors, @media queries, and a -- block of CSS variables.

1const styles = sheet.create({
2  card: {
3    padding: '16px',
4    '--accent': '#9c1a24',
5    '&:hover': { borderColor: 'var(--accent)' },
6    '@media (min-width: 700px)': { padding: '24px' },
7  },
8});

cx(...args)

Combines class sets, strings, arrays, and { className: boolean } maps into a single class string for className. When two classes set the same declaration the later one wins and removes the earlier one from the output; non-conflicting and unknown classes are preserved. Atomic shorthands resolve as one unit, so give each visual state its own complete scope (see Variants) when overriding them.

1cx(styles.card, isActive && styles.active, extraClass);

sheet.keyframes(frames)

Defines named keyframe animations. Returns animation names to reference from the animation property.

1const { fadeIn } = sheet.keyframes({
2  fadeIn: { from: { opacity: '0' }, to: { opacity: '1' } },
3});
4// animation: `${fadeIn} 300ms ease-out`

sheet.getStyle()

Returns the entire stylesheet as CSS text. Inject it into a <style> tag on the server; the client-side sheet continues from the same rules. See the SSR section below.

sheet.isApplied()

Reports whether the sheet has mounted a <style> tag. Tells a live browser sheet apart from a detached, strings-only server sheet.

1if (!sheet.isApplied()) {
2  // strings-only mode: ship sheet.getStyle() to the client
3}

06 · Examples

Basic usage

The whole loop: define scopes with sheet.create, get a set of classes back per scope, and combine them with cx() where the element renders.

1const styles = sheet.create({
2  "button": {
3    "font": "inherit",
4    "fontWeight": "600",
5    "color": "var(--btn-fg)",
6    "backgroundColor": "var(--btn-bg)",
7    "padding": "10px 20px",
8    "border": "none",
9    "borderRadius": "8px",
10    "cursor": "pointer",
11    "transition": "background-color 0.15s ease",
12    "&:hover": {
13      "backgroundColor": "var(--accent-strong)"
14    },
15    "&:active": {
16      "transform": "translateY(1px)"
17    },
18    "&:focus-visible": {
19      "outline": "2px solid var(--focus)",
20      "outlineOffset": "2px"
21    },
22    "&:disabled": {
23      "opacity": "0.5",
24      "cursor": "not-allowed"
25    }
26  }
27});

1function SaveButton() {
2  return (
3    <button className={cx(styles.button)}>
4      Save changes
5    </button>
6  );
7}

Variants and scopes

Each variant is a complete scope with everything the button needs. Variants never layer, so there is no question which rule wins — pick one per state and let cx() handle the rest.

1const styles = sheet.create({
2  "variantPrimary": {
3    "font": "inherit",
4    "fontWeight": "600",
5    "padding": "10px 20px",
6    "borderRadius": "8px",
7    "border": "1px solid transparent",
8    "cursor": "pointer",
9    "color": "var(--btn-fg)",
10    "backgroundColor": "var(--btn-bg)",
11    "transition": "background-color 0.15s ease",
12    "&:hover": {
13      "backgroundColor": "var(--accent-strong)"
14    }
15  },
16  "variantSecondary": {
17    "font": "inherit",
18    "fontWeight": "600",
19    "padding": "10px 20px",
20    "borderRadius": "8px",
21    "border": "1px solid var(--field-border)",
22    "cursor": "pointer",
23    "color": "var(--ink)",
24    "backgroundColor": "transparent",
25    "transition": "background-color 0.15s ease",
26    "&:hover": {
27      "backgroundColor": "var(--card)"
28    }
29  },
30  "variantQuiet": {
31    "font": "inherit",
32    "fontWeight": "600",
33    "padding": "10px 20px",
34    "borderRadius": "8px",
35    "border": "1px solid transparent",
36    "cursor": "pointer",
37    "color": "var(--accent)",
38    "backgroundColor": "transparent",
39    "transition": "background-color 0.15s ease",
40    "&:hover": {
41      "backgroundColor": "var(--card)"
42    }
43  }
44});

1function Actions({ kind }: { kind: 'primary' | 'secondary' | 'quiet' }) {
2  const variants = {
3    primary: styles.variantPrimary,
4    secondary: styles.variantSecondary,
5    quiet: styles.variantQuiet,
6  };
7  return (
8    <div className={cx(styles.buttonGroup)}>
9      <button className={cx(variants[kind])}>Publish</button>
10    </div>
11  );
12}

CSS variables

A scope can set variables instead of declarations, and one class carries all of them. Each tone is a literal hex value, with its dark-mode counterpart nested in a media query — override --tone per instance and every declaration that reads it follows.

Payment failed

Your card was declined. Try another payment method.

Payment received

Thanks — a receipt is on its way to your inbox.

Trial ends in 3 days

Add a payment method to keep your workspace running.

1const styles = sheet.create({
2  "alert": {
3    "--tone": "#9c1a24",
4    "backgroundColor": "var(--card)",
5    "borderLeft": "4px solid var(--tone)",
6    "borderRadius": "8px",
7    "padding": "12px 16px",
8    "marginBottom": "12px",
9    "@media (prefers-color-scheme: dark)": {
10      "--tone": "#ec9aae"
11    }
12  },
13  "alertTitle": {
14    "fontWeight": "650",
15    "color": "var(--tone)",
16    "marginBottom": "0.25em"
17  },
18  "alertText": {
19    "color": "var(--muted)",
20    "fontSize": "0.95rem"
21  },
22  "toneSuccess": {
23    "--tone": "#237a4b",
24    "@media (prefers-color-scheme: dark)": {
25      "--tone": "#7fc79b"
26    }
27  },
28  "toneWarning": {
29    "--tone": "#8a5a00",
30    "@media (prefers-color-scheme: dark)": {
31      "--tone": "#d9a93f"
32    }
33  }
34});

1function Notices() {
2  return (
3    <>
4      <div className={cx(styles.alert)}>
5        <p className={cx(styles.alertTitle)}>Payment failed</p>
6        <p className={cx(styles.alertText)}>Your card was declined.</p>
7      </div>
8      <div className={cx(styles.alert, styles.toneSuccess)}>
9        <p className={cx(styles.alertTitle)}>Payment received</p>
10        <p className={cx(styles.alertText)}>Receipt sent to your inbox.</p>
11      </div>
12    </>
13  );
14}

Media queries

Nest @media blocks inside the scope they modify. One card, five breakpoints: spacing grows at 480px, it turns horizontal at 720px, settles into a centered measure at 1024px, and gains an accent edge with larger type at 1280px. The badge names the active breakpoint as you resize. Each step uses distinct values: under flairup 1.1.0, identical declarations share one class, so a repeated value would apply at every width.

Viewport: base · under 480px

New in 1.1

Deterministic cx()

Overrides resolve in cx() order, not creation order.

1const styles = sheet.create({
2  "badge": {
3    "color": "var(--muted)",
4    "fontSize": "0.9rem",
5    "marginBottom": "1em"
6  },
7  "badgeValue": {
8    "fontWeight": "650",
9    "color": "var(--ink)"
10  },
11  "card": {
12    "backgroundColor": "var(--paper)",
13    "border": "1px solid var(--line)",
14    "borderRadius": "8px",
15    "padding": "16px",
16    "display": "flex",
17    "flexDirection": "column",
18    "gap": "8px",
19    "@media (min-width: 480px)": {
20      "padding": "22px",
21      "gap": "10px"
22    },
23    "@media (min-width: 720px)": {
24      "flexDirection": "row",
25      "gap": "16px",
26      "padding": "22px 26px"
27    },
28    "@media (min-width: 1024px)": {
29      "maxWidth": "60rem",
30      "marginInline": "auto",
31      "padding": "28px"
32    },
33    "@media (min-width: 1280px)": {
34      "borderLeft": "4px solid var(--accent)",
35      "padding": "28px 32px"
36    }
37  },
38  "cardBody": {
39    "minWidth": "0",
40    "@media (min-width: 720px)": {
41      "flex": "1 1 auto"
42    }
43  },
44  "cardEyebrow": {
45    "fontSize": "0.8rem",
46    "fontWeight": "650",
47    "letterSpacing": "0.08em",
48    "textTransform": "uppercase",
49    "color": "var(--accent)"
50  },
51  "cardTitle": {
52    "fontFamily": "var(--font-display)",
53    "fontSize": "1.25rem",
54    "fontWeight": "700",
55    "@media (min-width: 480px)": {
56      "fontSize": "1.4rem"
57    },
58    "@media (min-width: 1280px)": {
59      "fontSize": "2rem"
60    }
61  },
62  "cardText": {
63    "color": "var(--muted)",
64    "fontSize": "0.95rem"
65  },
66  "cardButton": {
67    "font": "inherit",
68    "fontWeight": "600",
69    "color": "var(--btn-fg)",
70    "backgroundColor": "var(--btn-bg)",
71    "padding": "10px 20px",
72    "border": "none",
73    "borderRadius": "8px",
74    "cursor": "pointer",
75    "alignSelf": "flex-start",
76    "&:hover": {
77      "backgroundColor": "var(--accent-strong)"
78    },
79    "@media (min-width: 720px)": {
80      "marginLeft": "auto",
81      "alignSelf": "center"
82    }
83  }
84});

1function Announcement() {
2  return (
3    <div className={cx(styles.card)}>
4      <div className={cx(styles.cardBody)}>
5        <p className={cx(styles.cardEyebrow)}>New in 1.1</p>
6        <p className={cx(styles.cardTitle)}>Deterministic cx()</p>
7        <p className={cx(styles.cardText)}>
8          Overrides resolve in cx() order, not creation order.
9        </p>
10      </div>
11      <button type="button" className={cx(styles.cardButton)}>
12        Read the notes
13      </button>
14    </div>
15  );
16}

Pseudo selectors and elements

States live next to the declarations they change: :hover and :active on the button, :focus-visible and ::placeholder on the input. No separate selectors to keep in sync.

Work email

1const styles = sheet.create({
2  "invite": {
3    "maxWidth": "24rem"
4  },
5  "field": {
6    "display": "flex",
7    "flexDirection": "column",
8    "gap": "6px",
9    "marginBottom": "12px"
10  },
11  "label": {
12    "fontWeight": "600",
13    "fontSize": "0.95rem"
14  },
15  "input": {
16    "font": "inherit",
17    "color": "var(--ink)",
18    "backgroundColor": "var(--paper)",
19    "border": "1px solid var(--field-border)",
20    "borderRadius": "8px",
21    "padding": "10px 12px",
22    "&:hover": {
23      "borderColor": "var(--muted)"
24    },
25    "&:focus-visible": {
26      "outline": "2px solid var(--focus)",
27      "outlineOffset": "1px"
28    },
29    "&::placeholder": {
30      "color": "var(--muted)",
31      "opacity": "1"
32    },
33    "&:disabled": {
34      "opacity": "0.55",
35      "cursor": "not-allowed"
36    }
37  },
38  "button": {
39    "font": "inherit",
40    "fontWeight": "600",
41    "color": "var(--btn-fg)",
42    "backgroundColor": "var(--btn-bg)",
43    "padding": "10px 20px",
44    "border": "none",
45    "borderRadius": "8px",
46    "cursor": "pointer",
47    "&:hover": {
48      "backgroundColor": "var(--accent-strong)"
49    },
50    "&:active": {
51      "transform": "translateY(1px)"
52    }
53  }
54});

1function Invite() {
2  return (
3    <div className={cx(styles.invite)}>
4      <div className={cx(styles.field)}>
5        <label className={cx(styles.label)} htmlFor="invite-email">
6          Work email
7        </label>
8        <input
9          id="invite-email"
10          type="email"
11          placeholder="teammate@company.com"
12          className={cx(styles.input)}
13        />
14      </div>
15      <button type="button" className={cx(styles.button)}>
16        Send invite
17      </button>
18    </div>
19  );
20}

Parent selectors

Scope a whole subtree under a host class like .theme-dark. The same card renders light or dark depending on where it lands — handy when your component has to respect theming it doesn't own. The deeper idea is a contract: name the host classes your package responds to — .theme-dark, .density-compact — and document them. Consumers opt in by wrapping your components, no configuration objects or prop drilling required.

Starter

Unlimited projects
Export to any format

Pro

$29

Unlimited projects
Export to any format

1const styles = sheet.create({
2  ".theme-dark": {
3    "plan": {
4      "backgroundColor": "#241c13",
5      "borderColor": "#4a3f30",
6      "color": "#f2eada"
7    },
8    "planPrice": {
9      "color": "#f2eada"
10    },
11    "planFeatures": {
12      "color": "#c9bda6"
13    },
14    "planButton": {
15      "backgroundColor": "#ec9aae",
16      "color": "#2a1216",
17      "&:hover": {
18        "backgroundColor": "#f6c2cf"
19      }
20    }
21  },
22  "plans": {
23    "display": "grid",
24    "gridTemplateColumns": "1fr",
25    "gap": "12px",
26    "@media (min-width: 640px)": {
27      "gridTemplateColumns": "1fr 1fr"
28    }
29  },
30  "plan": {
31    "backgroundColor": "var(--paper)",
32    "border": "1px solid var(--line)",
33    "borderRadius": "8px",
34    "padding": "20px",
35    "color": "var(--ink)"
36  },
37  "planName": {
38    "fontWeight": "650",
39    "fontSize": "0.95rem",
40    "color": "var(--accent)",
41    "marginBottom": "0.25em"
42  },
43  "planPrice": {
44    "fontFamily": "var(--font-display)",
45    "fontSize": "1.75rem",
46    "fontWeight": "700",
47    "color": "var(--ink)",
48    "marginBottom": "0.35em"
49  },
50  "planFeatures": {
51    "color": "var(--muted)",
52    "fontSize": "0.95rem",
53    "marginTop": "0",
54    "marginBottom": "1em",
55    "paddingLeft": "1.2em"
56  },
57  "planButton": {
58    "font": "inherit",
59    "fontWeight": "600",
60    "color": "var(--btn-fg)",
61    "backgroundColor": "var(--btn-bg)",
62    "padding": "10px 20px",
63    "border": "none",
64    "borderRadius": "8px",
65    "cursor": "pointer",
66    "&:hover": {
67      "backgroundColor": "var(--accent-strong)"
68    }
69  }
70});

1function Pricing() {
2  return (
3    <div className={cx(styles.plans)}>
4      <PlanCard name="Starter" price="$9" />
5      {/* Same card, restyled by the host's theme class */}
6      <div className="theme-dark">
7        <PlanCard name="Pro" price="$29" />
8      </div>
9    </div>
10  );
11}

Keyframe animations

Define keyframes once, reference the returned names from animation. Pick an animation above — the typing dots add staggered delays to the same pattern. This site disables animation under prefers-reduced-motion, so all three go still for users who ask.

1const keyframes = sheet.keyframes({
2  spin: {
3    from: { transform: 'rotate(0deg)' },
4    to: { transform: 'rotate(360deg)' },
5  },
6  shimmer: {
7    from: { opacity: '0.45' },
8    to: { opacity: '1' },
9  },
10  bounce: {
11    '0%': { transform: 'translateY(0)' },
12    '50%': { transform: 'translateY(-4px)' },
13    '100%': { transform: 'translateY(0)' },
14  },
15});
16
17const styles = sheet.create({
18  spinner: {
19    width: '28px',
20    height: '28px',
21    borderRadius: '50%',
22    border: '3px solid var(--line)',
23    borderTopColor: 'var(--accent)',
24    animation: `${keyframes.spin} 0.9s linear infinite`,
25  },
26  skeletonLine: {
27    height: '12px',
28    borderRadius: '6px',
29    backgroundColor: 'var(--line)',
30    animation: `${keyframes.shimmer} 1.2s ease-in-out infinite alternate`,
31  },
32  dot: {
33    width: '10px',
34    height: '10px',
35    borderRadius: '50%',
36    backgroundColor: 'var(--accent)',
37    animation: `${keyframes.bounce} 1.2s ease-in-out infinite`,
38  },
39  dotDelayed: {
40    animationDelay: '0.15s',
41  },
42});

1function Loading({ kind }: { kind: 'spinner' | 'skeleton' | 'typing' }) {
2  if (kind === 'spinner') {
3    return <div role="status" aria-label="Loading" className={cx(styles.spinner)} />;
4  }
5  if (kind === 'typing') {
6    return (
7      <div className={cx(styles.typing)} role="status" aria-label="Someone is typing">
8        <span className={cx(styles.dot)} />
9        <span className={cx(styles.dot, styles.dotDelayed)} />
10        <span className={cx(styles.dot, styles.dotLate)} />
11      </div>
12    );
13  }
14  return (
15    <div className={cx(styles.skeleton)} aria-hidden="true">
16      <div className={cx(styles.skeletonLine, styles.skeletonLong)} />
17      <div className={cx(styles.skeletonLine, styles.skeletonShort)} />
18    </div>
19  );
20}

07 · SSR

Server-side rendering

On the server there is no DOM to inject into, so create the sheet detached and read the CSS out as a string:

1import { createSheet } from 'flairup';
2
3// null root: no <style> tag is touched, styles stay in memory
4const sheet = createSheet('my-package', null);
5renderMyComponents();
6
7// inline the result wherever the server renders <head>
8const css = sheet.getStyle();
9// <style>{css}</style>

The same calls run unchanged in the browser, where the sheet mounts a <style> tag and keeps it in sync. This very page renders its stylesheets this way.

Styles that ship with your components.

Why packages need their own styling

The package problem

How FlairUp answers

Core concepts

One sheet per name and target

Atomic classes, composed with cx()

Conditions travel with the style

SSR is just a string

Built for shipping

≈6 KB minified and gzipped, zero dependencies

TypeScript throughout

Scoped by construction

Framework-agnostic SSR

Installation

API reference

createSheet(name, rootNode?)

sheet.create(styles)

cx(...args)

sheet.keyframes(frames)

sheet.getStyle()

sheet.isApplied()

Basic usage

Basic usage

Variants and scopes

Variants and scopes

CSS variables

CSS variables

Media queries

Media queries

Pseudo selectors and elements

Pseudo selectors and elements

Parent selectors

Parent selectors

Keyframe animations

Keyframe animations

Server-side rendering