{"id":20289932,"url":"https://github.com/nberlette/clsx","last_synced_at":"2025-04-11T10:58:48.805Z","repository":{"id":135619276,"uuid":"581950568","full_name":"nberlette/clsx","owner":"nberlette","description":"Modern TypeScript rewrite of the popular `clsx` package by Luke Edwards, with type-level previews of compiled class strings.","archived":false,"fork":false,"pushed_at":"2024-06-28T08:24:25.000Z","size":78,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T17:16:28.412Z","etag":null,"topics":["bun","classes","classnames","clsx","compile-time-reflection","css","deno","jsr","node","typescript","utility","web"],"latest_commit_sha":null,"homepage":"http://jsr.io/@nick/clsx","language":"TypeScript","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/nberlette.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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":{"ko_fi":"nberlette"}},"created_at":"2022-12-25T02:22:17.000Z","updated_at":"2025-02-23T20:25:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"913c063a-7deb-40eb-8e8b-7736a5d354fb","html_url":"https://github.com/nberlette/clsx","commit_stats":null,"previous_names":["nberlette/clsx"],"tags_count":4,"template":false,"template_full_name":"deno911/kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nberlette%2Fclsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nberlette%2Fclsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nberlette%2Fclsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nberlette%2Fclsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nberlette","download_url":"https://codeload.github.com/nberlette/clsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248381696,"owners_count":21094525,"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":["bun","classes","classnames","clsx","compile-time-reflection","css","deno","jsr","node","typescript","utility","web"],"created_at":"2024-11-14T15:05:33.841Z","updated_at":"2025-04-11T10:58:48.784Z","avatar_url":"https://github.com/nberlette.png","language":"TypeScript","funding_links":["https://ko-fi.com/nberlette"],"categories":[],"sub_categories":[],"readme":"# [![][letter-m] `@nick/clsx`][GitHub]\n\nThis is a utility for constructing conditional class names in JavaScript and\nTypeScript from a set of mixed inputs. It's based on the popular\n[`clsx`](https://github.com/lukeed/clsx) package by\n[Luke Edwards](https://github.com/lukeed), re-written and enhanced by\n[Nicholas Berlette] in 100% TypeScript using modern language features.\n\nIn addition to being a drop-in replacement for the original, this package also\nintroduces an advanced type-level implementation of the `clsx` function. It\nleverages nearly identical logic as the runtime function, at a purely type\nlevel.\n\nThat type-level implementation affords you with a compile-time preview of the\nclassName strings that `clsx` expects to generate at runtime, without ever\nleaving your editor. This is quite useful for catching typos and errors before\nthey occur.\n\n## Usage\n\n### 📦 Install\n\nThis package is distributed through **[JSR]**, **[NPM]**, and **[Deno]**.\n\nIt can be installed using your package manager of choice:\n\n```sh\ndeno add @nick/clsx\n```\n\n```sh\nnpx jsr add @nick/clsx\n```\n\n```sh\nbun add @nberlette/clsx\n# or\npnpm add @nberlette/clsx\n# or\nyarn add @nberlette/clsx\n# or\nnpm install @nberlette/clsx\n```\n\n### 📜 Import\n\nThe package exports a single function, [`clsx`](#clsx), which can be imported as\nfollows:\n\n```ts\nimport { clsx } from \"@nick/clsx\";\n\nconst className = clsx(\"foo\", \"bar\", \"baz\");\n```\n\nIf you're using the NPM package:\n\n```ts\nimport { clsx } from \"@nberlette/clsx\";\n\nconst className = clsx(\"foo\", \"bar\", \"baz\");\n```\n\nOr, if you're importing from [deno.land][Deno]:\n\n```ts\nimport { clsx } from \"https://deno.land/x/clsx/mod.ts\";\n\nconst className = clsx(\"foo\", \"bar\", \"baz\");\n```\n\n---\n\n# API\n\n## ![][letter-f] `clsx`\n\nConstructs a composite className string from a given set of mixed inputs.\n\n#### Signature\n\n```ts\nfunction clsx\u003cT extends ClassInputs\u003e(...classes: T): Clsx\u003cT\u003e;\n```\n\n#### Parameters\n\n| Name          | Info                                      |\n| :------------ | :---------------------------------------- |\n| **`classes`** | The class names to compile into a string. |\n\n#### Returns\n\n| Type                                 | Info                                                 |\n| :----------------------------------- | :--------------------------------------------------- |\n| [`Clsx\u003cT, string\u003e`](#clsxt-fallback) | Composite className string generated from the input. |\n\n---\n\n## ![][letter-t] `Clsx\u003cT, Fallback\u003e`\n\n```ts\ntype Clsx\u003cT, Fallback = string\u003e = T extends ClassInputs\n  ? T[\"length\"] extends 0 ? Fallback\n  : IsValidwInput\u003c\n    T,\n    MergeValues\u003cT, Fallback\u003e extends infer S ? S extends \"\" ? Fallback : S\n      : Fallback,\n    Fallback\n  \u003e\n  : Fallback;\n```\n\nThe type-level equivalent of the [`clsx`](#clsx \"clsx\") function, which is used\nto render a compile-time preview of the className string expected to be\ngenerated.\n\nFor your convenience, an optional `Fallback` type parameter can be specified,\nwhich will be used in an event where a suitable type cannot be inferred. The\ndefault fallback type is the generic `string` type, since the `clsx` function\nwill always return a string at runtime.\n\n#### Type Parameters\n\n| Name       | Extends | Default  |\n| :--------- | :------ | :------- |\n| `T`        | `--`    | `--`     |\n| `Fallback` | `--`    | `string` |\n\n---\n\n## Examples\n\n```ts\nimport { clsx } from \"@nick/clsx\";\n\nconst cn = clsx(\"foo\", \"bar\", \"baz\");\n//     ^? const cn: \"foo bar baz\"\n\nconst cn2 = clsx(\"foo\", { bar: true, baz: false });\n//     ^? const cn2: \"foo bar\"\n\nconst cn3 = clsx(\"nested\", [\"deep\", { no: null }, [\"yuh\"]]);\n//     ^? const cn3: \"nested deep yuh\"\n```\n\n```ts\nimport { clsx } from \"@nick/clsx\";\n\nconst dark = matchMedia(\"(prefers-color-scheme: dark)\").matches;\n\nconst bgs = [\"bg-white\", \"bg-black\"] as const;\n\n// This type is correctly inferred as a union of two possible class names:\nconst cn = clsx(\"w-1/2\", \"h-full\", bgs[+dark]);\n//     ^? const cn: \"w-1/2 h-full bg-white\" | \"w-1/2 h-full bg-black\"\n```\n\n\u003e For more examples, refer to the [test suite](./mod.test.ts).\n\n---\n\n## Further Reading\n\n### 🧑🏽‍💻 Contributing\n\nThis project is open-source, and I welcome contributions of any kind. Feel free\nto [open an issue] or [pull request] in the [GitHub Repository][GitHub] if you\nhave any suggestions, bug reports, or feature requests.\n\n### 🐛 Bugs and Issues\n\nIf you encounter any bugs or unexpected behavior, please [open an issue] in the\n[GitHub Repository][GitHub] so it can be addressed promptly. Thank you!\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n##### [MIT] © [Nicholas Berlette]. All rights reserved.\n\n###### [GitHub] · [JSR] · [NPM] · [Deno] · [Docs]\n\n\u003c/div\u003e\n\n[MIT]: https://nick.mit-license.org \"MIT License. Copyright © 2023-2024+ Nicholas Berlette. All rights reserved.\"\n[Nicholas Berlette]: https://n.berlette.com \"Nicholas Berlette's Personal Website\"\n[GitHub]: https://github.com/nberlette/clsx \"GitHub Repository: nberlette/clsx\"\n[open an issue]: https://github.com/nberlette/clsx/issues/new \"Open a new issue on GitHub\"\n[JSR]: https://jsr.io/@nick/clsx \"View the @nick/clsx package on jsr.io\"\n[NPM]: https://npmjs.com/package/@nberlette/clsx \"View the @nberlette/clsx package on NPM\"\n[Deno]: https://deno.land/x/clsx \"View the clsx module on deno.land/x\"\n[Docs]: https://nberlette.github.io/clsx \"View the @nick/clsx documentation\"\n[Contributing Guide]: https://github.com/nberlette/clsx/blob/main/.github/CONTRIBUTING.md \"View the Contributing Guide\"\n[pull request]: https://github.com/nberlette/clsx/pulls \"Open a new pull request on GitHub\"\n[letter-m]: https://api.iconify.design/tabler:square-letter-m.svg?width=1.5rem\u0026height=1.5rem\u0026color=seagreen\u0026inline=true\n[letter-t]: https://api.iconify.design/tabler:square-letter-t.svg?width=1.5rem\u0026height=1.5rem\u0026color=orchid\u0026inline=true\n[letter-f]: https://api.iconify.design/tabler:square-letter-f.svg?width=1.5rem\u0026height=1.5rem\u0026color=dodgerblue\u0026inline=true\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnberlette%2Fclsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnberlette%2Fclsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnberlette%2Fclsx/lists"}