{"id":13447064,"url":"https://github.com/lukeed/clsx","last_synced_at":"2025-05-13T20:03:29.990Z","repository":{"id":37706491,"uuid":"163027171","full_name":"lukeed/clsx","owner":"lukeed","description":"A tiny (239B) utility for constructing `className` strings conditionally.","archived":false,"fork":false,"pushed_at":"2024-06-10T15:48:22.000Z","size":139,"stargazers_count":8995,"open_issues_count":13,"forks_count":153,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-06T19:51:55.293Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukeed.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lukeed"}},"created_at":"2018-12-24T22:33:11.000Z","updated_at":"2025-05-06T15:49:01.000Z","dependencies_parsed_at":"2023-02-10T18:46:35.397Z","dependency_job_id":"6ee0d17d-1d7c-4dbc-8758-610018509edb","html_url":"https://github.com/lukeed/clsx","commit_stats":{"total_commits":82,"total_committers":14,"mean_commits":5.857142857142857,"dds":0.1585365853658537,"last_synced_commit":"925494cf31bcd97d3337aacd34e659e80cae7fe2"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fclsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fclsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fclsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fclsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukeed","download_url":"https://codeload.github.com/lukeed/clsx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252940918,"owners_count":21828769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:07.228Z","updated_at":"2025-05-13T20:03:29.960Z","avatar_url":"https://github.com/lukeed.png","language":"JavaScript","funding_links":["https://github.com/sponsors/lukeed"],"categories":["JavaScript","Uncategorized","Tools","Framework agnostic packages","Utilities"],"sub_categories":["Uncategorized","🎃ClassName","General utilities","Syntax highlighting"],"readme":"# clsx [![CI](https://github.com/lukeed/clsx/workflows/CI/badge.svg)](https://github.com/lukeed/clsx/actions?query=workflow%3ACI) [![codecov](https://badgen.net/codecov/c/github/lukeed/clsx)](https://codecov.io/gh/lukeed/clsx) [![licenses](https://licenses.dev/b/npm/clsx)](https://licenses.dev/npm/clsx)\n\n\u003e A tiny (239B) utility for constructing `className` strings conditionally.\u003cBr\u003eAlso serves as a [faster](bench) \u0026 smaller drop-in replacement for the `classnames` module.\n\nThis module is available in three formats:\n\n* **ES Module**: `dist/clsx.mjs`\n* **CommonJS**: `dist/clsx.js`\n* **UMD**: `dist/clsx.min.js`\n\n\n## Install\n\n```\n$ npm install --save clsx\n```\n\n\n## Usage\n\n```js\nimport clsx from 'clsx';\n// or\nimport { clsx } from 'clsx';\n\n// Strings (variadic)\nclsx('foo', true \u0026\u0026 'bar', 'baz');\n//=\u003e 'foo bar baz'\n\n// Objects\nclsx({ foo:true, bar:false, baz:isTrue() });\n//=\u003e 'foo baz'\n\n// Objects (variadic)\nclsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });\n//=\u003e 'foo --foobar'\n\n// Arrays\nclsx(['foo', 0, false, 'bar']);\n//=\u003e 'foo bar'\n\n// Arrays (variadic)\nclsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);\n//=\u003e 'foo bar baz hello there'\n\n// Kitchen sink (with nesting)\nclsx('foo', [1 \u0026\u0026 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');\n//=\u003e 'foo bar hello world cya'\n```\n\n\n## API\n\n### clsx(...input)\nReturns: `String`\n\n#### input\nType: `Mixed`\n\nThe `clsx` function can take ***any*** number of arguments, each of which can be an Object, Array, Boolean, or String.\n\n\u003e **Important:** _Any_ falsey values are discarded!\u003cbr\u003eStandalone Boolean values are discarded as well.\n\n```js\nclsx(true, false, '', null, undefined, 0, NaN);\n//=\u003e ''\n```\n\n## Modes\n\nThere are multiple \"versions\" of `clsx` available, which allows you to bring only the functionality you need!\n\n#### `clsx`\n\u003e **Size (gzip):** 239 bytes\u003cbr\u003e\n\u003e **Availability:** CommonJS, ES Module, UMD\n\nThe default `clsx` module; see [API](#API) for info.\n\n```js\nimport { clsx } from 'clsx';\n// or\nimport clsx from 'clsx';\n```\n\n#### `clsx/lite`\n\u003e **Size (gzip):** 140 bytes\u003cbr\u003e\n\u003e **Availability:** CommonJS, ES Module\u003cbr\u003e\n\u003e **CAUTION:** Accepts **ONLY** string arguments!\n\nIdeal for applications that ***only*** use the string-builder pattern.\n\nAny non-string arguments are ignored!\n\n```js\nimport { clsx } from 'clsx/lite';\n// or\nimport clsx from 'clsx/lite';\n\n// string\nclsx('hello', true \u0026\u0026 'foo', false \u0026\u0026 'bar');\n// =\u003e \"hello foo\"\n\n// NOTE: Any non-string input(s) ignored\nclsx({ foo: true });\n//=\u003e \"\"\n```\n\n## Benchmarks\n\nFor snapshots of cross-browser results, check out the [`bench`](bench) directory~!\n\n## Support\n\nAll versions of Node.js are supported.\n\nAll browsers that support [`Array.isArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray#Browser_compatibility) are supported (IE9+).\n\n\u003e**Note:** For IE8 support and older, please install `clsx@1.0.x` and beware of [#17](https://github.com/lukeed/clsx/issues/17).\n\n## Tailwind Support\n\nHere some additional (optional) steps to enable classes autocompletion using `clsx` with Tailwind CSS.\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  Visual Studio Code\n\u003c/summary\u003e\n\n1. [Install the \"Tailwind CSS IntelliSense\" Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)\n\n2. Add the following to your [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings):\n\n  ```json\n   {\n    \"tailwindCSS.experimental.classRegex\": [\n      [\"clsx\\\\(([^)]*)\\\\)\", \"(?:'|\\\"|`)([^']*)(?:'|\\\"|`)\"]\n    ]\n   }\n  ```\n\u003c/details\u003e\n\nYou may find the [`clsx/lite`](#clsxlite) module useful within Tailwind contexts. This is especially true if/when your application **only** composes classes in this pattern:\n\n```js\nclsx('text-base', props.active \u0026\u0026 'text-primary', props.className);\n```\n\n## Related\n\n- [obj-str](https://github.com/lukeed/obj-str) - A smaller (96B) and similiar utility that only works with Objects.\n\n## License\n\nMIT © [Luke Edwards](https://lukeed.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukeed%2Fclsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukeed%2Fclsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukeed%2Fclsx/lists"}