{"id":15470986,"url":"https://github.com/jackardios/react-classname-variants","last_synced_at":"2026-04-27T12:02:31.746Z","repository":{"id":65919657,"uuid":"602305587","full_name":"Jackardios/react-classname-variants","owner":"Jackardios","description":"Stitches-like styled components with plain class names","archived":false,"fork":false,"pushed_at":"2023-02-17T04:20:30.000Z","size":242,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-17T06:56:49.155Z","etag":null,"topics":["radix-ui","react","stitches","variants"],"latest_commit_sha":null,"homepage":"","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/Jackardios.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}},"created_at":"2023-02-15T23:32:28.000Z","updated_at":"2023-12-07T03:01:38.000Z","dependencies_parsed_at":"2023-03-02T00:45:59.105Z","dependency_job_id":null,"html_url":"https://github.com/Jackardios/react-classname-variants","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"1d7cfaabb4b158a85d3c79e3f8bbd0a6009bdf0b"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Jackardios/react-classname-variants","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Freact-classname-variants","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Freact-classname-variants/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Freact-classname-variants/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Freact-classname-variants/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jackardios","download_url":"https://codeload.github.com/Jackardios/react-classname-variants/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Freact-classname-variants/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32335297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["radix-ui","react","stitches","variants"],"created_at":"2024-10-02T02:08:16.536Z","updated_at":"2026-04-27T12:02:31.719Z","avatar_url":"https://github.com/Jackardios.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-classname-variants\n\n[![npm package][npm-img]][npm-url]\n[![npm bundle size][bundle-size-img]][bundle-size-url]\n[![Downloads][downloads-img]][downloads-url]\n[![Commitizen Friendly][commitizen-img]][commitizen-url]\n[![Semantic Release][semantic-release-img]][semantic-release-url]\n\nThis is a helper for creating react components with [Stitches-like](https://github.com/stitchesjs/stitches) variants using [classname-variants](https://github.com/fgnass/classname-variants) under the hood.\n\n## Features:\n\n- Lightweight (1.2Kb minzipped)\n- Fully type-safe\n- [Stitches-like](https://github.com/stitchesjs/stitches) variants API\n\n### Main differences from [classname-variants/react](https://github.com/fgnass/classname-variants#bonus-styled-components-but-for-static-css-):\n\n- Instead of polymorphism (`as` prop), this package uses [@radix-ui/react-slot](https://www.radix-ui.com/docs/primitives/utilities/slot) (`asChild` prop) which concatenates component props with its immediate child\n- Correct implementation of `VariantPropsOf` utility type that only returns variant props of react component\n- Ability to extract the configuration from a `styled` react component using the `extractVariantsConfig` function\n\n## Install\n\n```bash\nnpm install react-classname-variants\n```\n\n## Usage\n\nThings can be taken even a step further, resulting in a _styled-components_ like way of defining reusable components. Under the hood, this does basically the same as the example above, but also handles _refs_ correctly:\n\n```ts\nimport { styled, tw } from 'react-classname-variants';\nconst Button = styled('button', {\n  variants: {\n    size: {\n      small: tw`text-xs px-4`,\n      large: tw`text-base px-6`,\n    },\n  },\n});\n```\n\nAgain, this is not limited to tailwind, so you could do the same with CSS modules:\n\n```ts\nimport { styled } from 'react-classname-variants';\nimport styles from './styles.module.css';\nconst Button = styled('button', {\n  variants: {\n    size: {\n      small: styles.small,\n      large: styles.large,\n    },\n  },\n});\n```\n\nYou can also use the `VariantPropsOf` utility type to get the prop type for variants only:\n\n```ts\nimport { VariantPropsOf, styled, tw } from 'react-classname-variants';\n\nconst Button = styled('button', {\n  base: tw`px-5 py-2 text-white disabled:bg-gray-400 disabled:text-gray-300`,\n  variants: {\n    color: {\n      neutral: tw`bg-slate-500 hover:bg-slate-400`,\n      accent: tw`bg-teal-500 hover:bg-teal-400`,\n    },\n    outlined: {\n      true: tw`border-2`,\n    },\n    size: {\n      small: tw`text-xs px-4`,\n      large: tw`text-base px-6`,\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { color: 'accent', outlined: true },\n      className: tw`border-teal-600`,\n    },\n  ],\n  defaultVariants: {\n    size: 'small',\n  },\n});\n\ntype ButtonProps = VariantPropsOf\u003ctypeof Button\u003e;\n// is equivalent to this:\ntype ButtonProps = {\n  color: 'neutral' | 'accent';\n  outlined: boolean | undefined; // boolean properties can be undefined\n  size: 'small' | 'large' | undefined; // can be undefined because it has a default variant\n};\n```\n\n\u003e **Note**\n\u003e You can also style other custom React components as long as they accept a `className` prop.\n\n## Styled components without variants\n\nYou can also use the `styled` function to create styled components without any variants at all:\n\n```ts\nimport { styled } from 'react-classname-variants';\nconst Button = styled(\n  'button',\n  'border-none rounded px-3 font-sans bg-green-600 text-white hover:bg-green-500'\n);\n```\n\n## Polymorphic components with \"asChild\"\n\nIf you want to keep all the variants you have defined for a component but want to render a different HTML tag or a different custom component, you can use the \"asChild\" prop to do so:\n\n```tsx\nimport { styled } from 'react-classname-variants';\nconst Button = styled('button', {\n  variants: {\n    //...\n  },\n});\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cButton\u003eI'm a button\u003c/Button\u003e\n      \u003cButton asChild\u003e\n        \u003ca href=\"/\"\u003eI'm a link!\u003c/a\u003e\n      \u003c/Button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n# Tailwind IntelliSense\n\nIn order to get auto-completion for the CSS classes themselves, you can use the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code. In order to make it recognize the strings inside your variants-config, you have to somehow mark them and configure the plugin accordingly.\n\nOne way of doing so is by using tagged template literals:\n\n```ts\nimport { variants, tw } from 'cvariants';\nconst Button = styled('button', {\n  base: tw`px-5 py-2 text-white`,\n  variants: {\n    color: {\n      neutral: tw`bg-slate-500 hover:bg-slate-400`,\n      accent: tw`bg-teal-500 hover:bg-teal-400`,\n    },\n  },\n});\n```\n\nYou can then add the following line to your `settings.json`:\n\n```\n\"tailwindCSS.experimental.classRegex\": [\"tw`(\\\\`|[^`]+?)`\"]\n```\n\n\u003e **Note**\n\u003e The `tw` helper function is just an alias for [`String.raw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw).\n\u003e In order to get type coverage even for your Tailwind classes you can use a tool like [tailwind-ts](https://github.com/mathieutu/tailwind-ts).\n\n# License\n\nMIT\n\n[npm-img]: https://img.shields.io/npm/v/react-classname-variants\n[npm-url]: https://www.npmjs.com/package/react-classname-variants\n[bundle-size-img]: https://img.shields.io/bundlephobia/minzip/react-classname-variants\n[bundle-size-url]: https://bundlephobia.com/package/react-classname-variants\n[downloads-img]: https://img.shields.io/npm/dt/react-classname-variants\n[downloads-url]: https://www.npmtrends.com/react-classname-variants\n[semantic-release-img]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-release-url]: https://github.com/semantic-release/semantic-release\n[commitizen-img]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\n[commitizen-url]: http://commitizen.github.io/cz-cli/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackardios%2Freact-classname-variants","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackardios%2Freact-classname-variants","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackardios%2Freact-classname-variants/lists"}