MushyBook
cnfast logo

cnfast

Fast drop in replacement for `cn`

ClsxCnDeveloper ToolsTailwindcssTypeScriptNOASSERTION 1.1k 13Health 87
npmcnfast.svg
GitHub

What is it?

What it is

Fast drop-in replacement for the `cn` utility that merges Tailwind CSS class names with byte-identical output to `tailwind-merge` but runs significantly faster.

Why it exists

To provide a drop-in replacement for `cn`/`clsx`/`tailwind-merge` that reduces the cost of class merging in UI rendering loops, keeping frames within budget on data-grids, virtualized tables, live dashboards, and server-rendered pages while preserving the same API and output.

Who should use it

Developers using Tailwind CSS who need a faster class utility library replacement for clsx or tailwind-merge, especially in performance-sensitive applications like SPAs, server-rendered apps, or data grids.

Who should avoid it

Users who don't require performance optimizations, or those already satisfied with clsx/tailwind-merge without needing faster computation. Also unsuitable for non-Tailwind CSS projects.

How it works

A quick walkthrough in plain English

How cnfast works

Step 1 of 3

You interact with it

Open cnfast, send a request, or connect it to your stack.

Features

Fast drop‑in replacement for the popular `cn` utility with identical API
3.8× faster on average and up to 7× faster on component‑heavy code
Byte‑identical output to `tailwind‑merge`
Supports both function and tagged template syntax with call‑site caching
Built on top of `clsx`, `twMerge`, and `twJoin` and re‑exports them
Provides a one‑command migration tool (`npx cnfast migrate`) for projects using `clsx`, `classnames`, or `tailwind‑merge`
Integrates seamlessly with shadcn/ui by replacing the `cn` helper via the registry
Small bundle size (9.43 KB gzipped) comparable to the baseline
TypeScript support with type definitions
Extensive benchmark suite covering multiple JavaScript engines

Advantages

  • Significant performance gains, especially for re‑rendering call sites
  • Zero code changes required due to identical API
  • Built‑in caching reduces runtime overhead
  • Easy migration with a single command
  • Compatibility with existing tooling and libraries
  • Maintains exact output semantics of `tailwind‑merge`
  • Lightweight footprint
  • Type safety via TypeScript
  • Well‑documented and actively maintained

Disadvantages

  • Performance benefits may vary across JavaScript engines (e.g., V8 vs. Bun)
  • Requires migration command for legacy projects, which may add a step
  • Relies on underlying `clsx` and `tailwind‑merge` implementations; any bugs there propagate
  • Not as widely adopted as the original `cn` utility, potentially limiting community support
  • License is marked `NOASSERTION`, which may keep some users uncertain about legal clarity

Installation

native

npm install cnfast
npx cnfast migrate
npx shadcn@latest add aidenybai/cnfast/cn

FAQ

What is cnfast?

cnfast is an open-source project licensed under NOASSERTION.

What language is cnfast built with?

Primary language: TypeScript.

Is it free to use?

Yes. Licensed under NOASSERTION. Check the license for commercial use.

Loading documentation…
View on GitHub

Featured in Videos

YouTube tutorials and walkthroughs for cnfast

Alternatives

Similar projects ranked by category, topics, and text overlap.

Compare
ui logo

ui

TypeScript

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

119.3k·Health 90

Compare
cuelume logo

cuelume

TypeScript

Cuelume provides fourteen pre‑designed sounds (chime, sparkle, droplet, bloom, whisper, tick, press, release, toggle, success, error, page, loading, ready) that can be triggered via data‑cuelume-* attributes or an imperative play() API. It lazily creates a shared AudioContext, uses delegated listeners for hover/press/release/toggle, is ESM‑only, SSR‑safe, and works in any HTML‑based project (plain HTML, React, Vue, Astro, etc.).

951·Health 82

Compare
blume logo

blume

TypeScript

Blume is a documentation engine that automates the creation of feature-rich sites including navigation, search, and SEO. It uses a hidden Astro project to drive development and builds, offering features like local search, AI-readiness (llms.txt, MCP server), and a rich component library without requiring manual framework management. Users can 'eject' at any time to gain full control over the underlying Astro application.

918·Health 82

Compare
Tracearr logo

Tracearr

TypeScript

Tracearr delivers a comprehensive, real‑time view of media server activity across Plex, Jellyfin, and Emby. It captures full session history, geolocation, transcoding details, and library metrics, while detecting suspicious account sharing and providing trust scores. The platform supports live TV, music, and map visualizations, and offers a public REST API, bulk actions, and import from legacy tools. Built as a monorepo, the stack includes a React/TypeScript frontend with Tailwind and shadcn/ui, a Fastify backend, TimescaleDB for time‑series session data, Redis for caching, Socket.io for real‑time updates, and SSE for instant Plex session detection. Docker and supervised images enable easy deployment, and the architecture supports scaling via separate containers or a single all‑in‑one image.

2.1k·Health 87

Compare
lore logo

lore

Rust

Lore delivers a next‑generation version control experience: quick local setup that can scale to large teams, fast and efficient data handling through content‑addressed storage and chunked binary files, free and lightweight branching, verifiable immutable history, intuitive CLI access, and a full‑surface API for integration in C/C++, C#, Rust, Go, Python, or JavaScript. It is built to support both developers and artists working on large, binary‑heavy projects.

8.1k·Health 85

Compare
cnfast | MushyBook