# @hulla/style

> Define class variants once and infer the component props from their keys, in any framework.

## Useful when

- You want one small API for conditional classes and named variants.
- Your components run in more than one framework or styling system.
- You need to decide whether class composition should deduplicate or merge utilities.

`@hulla/style` combines class names and gives components named choices such as `small` or `large`. It works with your existing CSS and framework.

**Interactive example: **Edit the actual style module. Preview three consumers, inspect composition output, and measure 10,000 calls to your compose() function.

The browser executes the editable TypeScript style module in a disposable worker using installed @hulla/style helpers and cn. Failed edits retain the last working preview. Its 10,000-composition timing is a local measurement, not a comparison benchmark.

```ts
import { style } from '@hulla/style'
import { cn as mergeClasses } from 'cn'

export const { cn, vn } = style({ composer: mergeClasses })
const $space = vn({ roomy: ['px-2', 'px-4'] })

$space('roomy') // 'px-4'
cn($space('roomy'), 'px-6') // 'px-6'
type Space = typeof $space.infer // 'roomy'
```

[Build the working example](https://hulla.dev/guides/style/quick-start.md)

## Combine classes

Create the helpers once, then pass classes and conditions to `cn()`:

```ts
import { style } from '@hulla/style'

const { cn } = style()
const isActive = true

cn('button', { active: isActive }) // 'button active'
```

Use [`vn()`](https://hulla.dev/docs/style/variants.md) to map names to classes. For Tailwind conflict resolution, [configure a custom composer](https://hulla.dev/docs/style/custom-merging.md).

## Which page should I read first?

| If you need to…                                            | Start here                                                       |
| ---------------------------------------------------------- | ---------------------------------------------------------------- |
| Install the package and create shared helpers              | [Quick start](https://hulla.dev/guides/style/quick-start.md)     |
| Type a component prop from a finite set of styles          | [Variants](https://hulla.dev/docs/style/variants.md)             |
| Combine shared classes, variants, and caller classes       | [Composition](https://hulla.dev/docs/style/composition.md)       |
| Choose exact-token deduplication or Tailwind-aware merging | [Custom merging](https://hulla.dev/docs/style/custom-merging.md) |

For accepted inputs, signatures, and serializer behavior, see the [API reference](https://hulla.dev/docs/style/reference.md).