@yeeroen/use-bem

A lightweight utility for generating BEM (Block Element Modifier) class names in TypeScript/JavaScript.

Installation

npm install @yeeroen/use-bem

Usage

import useBem from '@yeeroen/use-bem'

const { block, element, modifier } = useBem('button')

// Block with modifiers
block(
    modifier('primary', true),
    modifier('size', 'large')
) // ['button', 'button--primary', 'button--size-large']

// Element with modifiers
element(
    'icon',
    modifier('color', 'red')
) // ['button__icon', 'button__icon--color-red']

AI Agent Support

If you use an AI coding agent, run npx @tanstack/intent install to load library-specific skills that help your agent generate correct BEM class names with this library.