npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

classifyx

v2.0.3

Published

<h1 align="center">ClassifyX</h1>

Downloads

41

Readme

Features

  • Dynamic Class Generation: Generate class names dynamically based on conditions, values, and configurations. This allows for flexible and powerful styling logic that adapts to different use cases.

  • Variant-Based Styling: Support for defining styling variants, enabling dynamic styling based on different variant properties. You can define default variants and apply them with the flexibility of using variant-specific properties.

  • Class Merging: Automatically merge classes with a built-in conflict resolution mechanism. This ensures that multiple class names, including those with Tailwind CSS, are merged efficiently, removing duplicate classes and resolving conflicting styles.

  • Conditional Classes: Apply classes conditionally based on boolean values or dynamic properties. This allows you to toggle styles without the need for complex logic.

  • Additional Classes Support: You can pass additional classes as arguments, making it easy to extend the base and variant classes with extra styling without any hassle.

  • CSS Module Integration: Seamlessly integrate with CSS Modules, allowing you to use scoped styles in modular fashion, while still benefiting from the dynamic class generation and merging features.

  • TypeScript Support: Fully typed, offering enhanced developer experience with improved code completion, type safety, and error checking in TypeScript environments.

  • Server-Side Rendering (SSR) Compatibility: Designed to work well with server-side rendering environments, ensuring that class names are generated and handled correctly during the SSR process.

  • Inline Boolean Expressions: Easily include class names based on inline boolean expressions, enabling simple and concise syntax for conditional styling.

Installation

Install ClassifyX using your preferred package manager:

bun

bun add classifyx

npm

npm install classifyx

pnpm

pnpm add classifyx

yarn

yarn add classifyx

API Reference

cfx(baseStyles, variantsConfigOrClassName?, variantProps?, ...additionalClasses)

| Parameter | Type | Description | | --------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | baseStyles | string \| ClassValue | Base class or classes to apply. | | variantsConfigOrClassName | Record<string, any> \| ClassValue | Variant configuration object or additional class name(s). | | variantProps | VariantProps<any> | Variant properties for applying conditional variant-based styles. A configuration object for managing dynamic styling based on variants. | | additionalClasses | ClassValue[] | Additional class names to merge and apply conditionally. |

Usage

Basic Class Merging

import { cfx } from 'classifyx';

const Button = ({ isActive }) => (
  <button className={cfx('base-btn', isActive && 'active-btn')}>
    {isActive ? 'Active' : 'Inactive'}
  </button>
);

Variants: Dynamic Styling Example

Define a Component with Variants

import { cfx } from 'classifyx';

const AlertBox = ({ type }) => (
  <div
    className={cfx(
      'alert',
      {
        variants: {
          type: {
            success: 'alert-success',
            error: 'alert-error',
            warning: 'alert-warning',
          },
        },
        defaultVariants: { type: 'success' },
      },
      { type },
    )}
  >
    This is a {type} alert!
  </div>
);

Example

<AlertBox type="error" />
<AlertBox type="warning" />
<AlertBox /> {/* Defaults to 'success' */}

Combining Base Styles, Variants, and Additional Classes

const Card = ({ isSelected, size }) => (
  <div
    className={cfx(
      'base-card',
      {
        variants: {
          size: {
            small: 'card-small',
            large: 'card-large',
          },
          selected: {
            true: 'card-selected',
          },
        },
        defaultVariants: {
          size: 'small',
        },
      },
      { size, selected: isSelected },
      'extra-shadow',
    )}
  >
    Card Content
  </div>
);

Example

<Card size="large" isSelected={true} />
<Card /> {/* small and not selected by default */}

Conditional Class Merging

const NavItem = ({ isActive }) => (
  <a
    className={cfx('nav-item', {
      active: isActive,
      inactive: !isActive,
    })}
  >
    {isActive ? 'Active' : 'Inactive'}
  </a>
);

Merging Tailwind CSS Classes with Conflict Resolution

const ProfilePic = ({ isRounded }) => (
  <img
    className={cfx('h-12 w-12 border', isRounded && 'rounded-full')}
    src="/profile.jpg"
    alt="Profile"
  />
);

Complex Variant-Based Styling with Custom Properties

const Badge = ({ type, size, isOutlined }) => (
  <span
    className={cfx(
      'badge',
      {
        variants: {
          type: {
            success: 'bg-green-500',
            error: 'bg-red-500',
            info: 'bg-blue-500',
          },
          size: {
            small: 'text-sm px-2',
            large: 'text-lg px-4',
          },
        },
        defaultVariants: {
          type: 'info',
          size: 'small',
        },
      },
      { type, size },
      isOutlined && 'border border-current',
    )}
  >
    Badge
  </span>
);

Usage

<Badge type="error" size="large" isOutlined />
<Badge type="success" />
<Badge size="small" />

Dynamic Class Names for Lists

const TaskList = ({ tasks }) => (
  <ul>
    {tasks.map((task) => (
      <li
        key={task.id}
        className={cfx('task-item', task.completed ? 'completed' : 'pending')}
      >
        {task.name}
      </li>
    ))}
  </ul>
);

Inline Boolean Expressions for Conditional Styles

const Button = ({ disabled }) => (
  <button
    className={cfx(
      'btn',
      disabled && 'cursor-not-allowed opacity-50',
      !disabled && 'hover:bg-blue-500',
    )}
    disabled={disabled}
  >
    Click Me
  </button>
);

License

This project is licensed under the GPL-3.0-or-later License.