# @gnist/component-utils

> `@gnist/component-utils` currently contains a single utility function for easily creating React components from css classes (e.g. created with [`style(...)`](https://vanilla-extract.style/documentation/api/style/) from `@vanilla-extract/css`) or recipes c

Latest version **3.0.16** (published 2026-08-24) · 0 weekly downloads

## Install

```sh
npm install @gnist/component-utils
pnpm add @gnist/component-utils
yarn add @gnist/component-utils
bun add @gnist/component-utils
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.16 |
| Published | 2026-08-24 |
| First published | 2024-03-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 52.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | b050eny, andersli, haalmarc, kristiankrogenes |

## Links

- npm: https://www.npmjs.com/package/@gnist/component-utils
- npm.io page: https://npm.io/package/@gnist/component-utils

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@vanilla-extract/css](https://npm.io/package/@vanilla-extract/css.md) 1.20.1
- [@vanilla-extract/recipes](https://npm.io/package/@vanilla-extract/recipes.md) ^0.5.7

## Recent versions

- 3.0.16 (latest) — 2026-08-24
- 3.0.15 — 2026-06-03
- 3.0.14 — 2026-04-17
- 3.0.13 — 2025-12-12
- 3.0.12 — 2025-12-10
- 3.0.11 — 2025-12-10
- 3.0.10 — 2025-09-16
- 3.0.9 — 2025-08-22
- 3.0.8 — 2025-08-11
- 3.0.7 — 2025-04-29
- 3.0.6 — 2025-03-21
- 3.0.5 — 2025-02-28
- 3.0.4 — 2025-02-21
- 3.0.3 — 2025-02-21
- 3.0.2 — 2025-02-14
- … 12 more at https://npm.io/package/@gnist/component-utils/versions

## README

# Component utilities for @gnist/design-system

`@gnist/component-utils` currently contains a single utility function for easily creating React components
from css classes (e.g. created with [`style(...)`](https://vanilla-extract.style/documentation/api/style/)
from `@vanilla-extract/css`) or recipes created with
[`@vanilla-extract/recipes`](https://vanilla-extract.style/documentation/packages/recipes/).

## Overview

The function `component` has two overloads, for use with either a `className` string or a recipe function.

### Using a className string

```ts
// Heading.css.ts
import { atoms } from "@gnist/themes/atoms.css.js";
import { style } from "@vanilla-extract/css";

export const heading = style([
    { float: "left" },
    atoms({ margin: "none", typography: "subtitle-small" }),
]);
```

```tsx
// Heading.tsx
import { component } from "@gnist/component-utils";
import { bannerHeading } from "./Heading.css.js";

export const Heading = component("Heading", heading, "h2");
//                                   │         │       │
// The display name of the component ┘         │       │
// The className to use for the element ───────┘       │
// The default HTML element or React component to use ─┘

// ...later...

<Heading $as="h4" href="#anchor">
    Now this is a h4
</Heading>;
```

### Using a recipe function

```ts
// Box.css.ts
import { recipe } from "@vanilla-extract/recipes";
import { atoms } from "@gnist/themes/atoms.css.js";

export const box = recipe({
    base: atoms({ display: "flex" }),
    variants: {
        density: {
            default: atoms({ padding: "s" }),
            compact: atoms({ padding: "xxs" }),
        },
    },
    defaultVariants: { density: "default" },
});
```

```tsx
// Box.tsx
import { component } from "@gnist/component-utils";
import { box } from "./Box.css.js";

export const Box = component("Box", box, "div");
//                             │     │     │
// The display name ───────────┘     │     │
// The recipe function  ─────────────┘     │
// The default element or component ───────┘

// ...later...

<Box $as="span" density="compact">
    Now the box has xxs padding and is a span
</Box>;
```

### Use with other React components

Note that `component` can be used with any React component that has a `className` prop,
not just HTML elements.

---
_Source: https://npm.io/package/@gnist/component-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._