{"id":17561940,"url":"https://github.com/jonambas/panda-plugin-crv","last_synced_at":"2025-07-12T03:04:00.531Z","repository":{"id":234591935,"uuid":"789138205","full_name":"jonambas/panda-plugin-crv","owner":"jonambas","description":"🐼 A Panda CSS plugin for responsive variants","archived":false,"fork":false,"pushed_at":"2025-06-23T07:37:05.000Z","size":568,"stargazers_count":17,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-23T08:34:12.939Z","etag":null,"topics":["cva","panda","pandacss","plugin","responsive"],"latest_commit_sha":null,"homepage":"https://panda-plugin-crv.vercel.app/","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/jonambas.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,"zenodo":null}},"created_at":"2024-04-19T19:22:28.000Z","updated_at":"2025-05-27T13:35:34.000Z","dependencies_parsed_at":"2024-10-03T10:35:21.270Z","dependency_job_id":"4038bd00-c096-4bea-a97e-7c08bfc97ee8","html_url":"https://github.com/jonambas/panda-plugin-crv","commit_stats":{"total_commits":94,"total_committers":2,"mean_commits":47.0,"dds":"0.46808510638297873","last_synced_commit":"02995b296c33212ec485dd6ec3db691dbbcc0fbf"},"previous_names":["jonambas/panda-plugin-crv"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/jonambas/panda-plugin-crv","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonambas%2Fpanda-plugin-crv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonambas%2Fpanda-plugin-crv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonambas%2Fpanda-plugin-crv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonambas%2Fpanda-plugin-crv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonambas","download_url":"https://codeload.github.com/jonambas/panda-plugin-crv/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonambas%2Fpanda-plugin-crv/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264928571,"owners_count":23684673,"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":["cva","panda","pandacss","plugin","responsive"],"created_at":"2024-10-21T12:09:52.603Z","updated_at":"2025-07-12T03:04:00.468Z","avatar_url":"https://github.com/jonambas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# panda-plugin-crv\n\nA [Panda CSS](https://panda-css.com) plugin for responsive `cva` variants. This plugin allows you to to use Panda's responsive syntax, without config recipes, such as:\n\n```tsx\n\u003cComponent variant={{ base: 'secondary', lg: 'primary' }} /\u003e\n```\n\n---\n\n### Installation\n\n```sh\nnpm i panda-plugin-crv\n```\n\n```ts\n// panda.config.ts\n\nimport { defineConfig } from '@pandacss/dev';\nimport { pluginResponsiveVariants } from 'panda-plugin-crv';\n\nexport default defineConfig({\n  plugins: [pluginResponsiveVariants()],\n});\n```\n\n---\n\n### Usage\n\nThis plugin removes the boilerplate required to build responsive variants within `cva`. This allows you to (1) co-locate variants near your components instead of in Panda's config, and (2) generate atomic class names.\n\nExample component styles:\n\n```tsx\nimport { crv, cva } from '@/styled-system/css';\n\nconst styles = cva({\n  variants: {\n    // Create responsive variants\n    ...crv('variant', {\n      primary: { bg: 'blue.500' },\n      secondary: { bg: 'gray.500' },\n      destructive: { bg: 'red.500' },\n    }),\n  },\n});\n```\n\nThis plugins ships two helpers to parse responsive variants in your components.\n\n- `ResponsiveVariant` – creates appropriate types, with your theme's breakpoints\n- `splitResponsiveVariant` – translates the incoming responsive object into variants generated by `crv`\n\n```tsx\nimport {\n  splitResponsiveVariant,\n  type ResponsiveVariant,\n} from '@/styled-system/css';\n\ntype ComponentProps = PropsWithChildren\u003c{\n  variant?: ResponsiveVariant\u003c'primary' | 'secondary' | 'destructive'\u003e;\n}\u003e;\n\nconst Component: FC\u003cComponentProps\u003e = (props) =\u003e {\n  const { children, variant = 'secondary' } = props;\n  const variants = splitResponsiveVariant('variant', variant);\n\n  return \u003cdiv className={styles({ ...variants })}\u003e{children}\u003c/div\u003e;\n};\n```\n\nUsing your component will look like this:\n\n```tsx\n\u003cComponent variant=\"primary\" /\u003e\n\u003cComponent variant={{ base: 'secondary', lg: 'primary' }} /\u003e\n```\n\n---\n\n### Compound Variants (experimental)\n\nThis plugin supports responsive compound variants, through the `ccv` function.\n\n```tsx\nimport { ccv, crv, cva } from '@/styled-system/css';\n\nconst styles = cva({\n  variants: {\n    ...crv('variant1', {\n      primary: { bg: 'blue.500' },\n      secondary: { bg: 'gray.500' },\n      destructive: { bg: 'red.500' },\n    }),\n    ...crv('variant2', {\n      true: { opacity: 1 },\n      false: { opacity: 0 },\n    }),\n  },\n  compoundVariants: [\n    // Create compound variants\n    ...ccv({\n      variant1: 'primary',\n      variant2: true,\n      css: {\n        color: 'green.500',\n      },\n    }),\n  ],\n});\n```\n\nThe above code will render `\"green.500\"` if `variant1` is `\"primary\"` and if `variant2` is `true`\n\n```tsx\n\u003cComponent variant1=\"primary\" variant2\u003e\n// -\u003e opacity_1 bg_blue.500 text_green.500\n\n\u003cComponent\n  variant1={{ base: 'secondary', lg: 'primary' }}\n  variant2={{ base: false, lg: true }}\n/\u003e\n// -\u003e opacity_0 lg:opacity_1 lg:bg_blue.500 bg_gray.500 lg:text_green.500\n```\n\n**Note**: Compound variants with `ccv` don't infer a variants' value unless the same keys are specified for all variants used in the compound variant. For example:\n\n```tsx\n// ✅ `md` is specified on both\n\u003cComponent variant1={{ base: 'secondary', md: 'primary' }} variant2={{ base: 'false', md: true  }}\u003e\n\n// ⛔️ `variant1` at `md` is inferred, this won't work\n\u003cComponent variant1=\"primary\" variant2={{ base: 'false', md: true  }}\u003e\n```\n\n---\n\n### Should I use this plugin?\n\nThis plugin solves a specific use case that Panda's config recipes and atomic (cva) recipes do not cover. Generally, if you maintain a component library, and need to support **responsive variants**, with **responsive compound variants**, this plugin is for you.\n\nSee Panda's documenation on [config recipes vs. atomic recipes (cva)](https://panda-css.com/docs/concepts/recipes#should-i-use-atomic-or-config-recipes-).\n\n|                                     | config | cva | cva + crv |\n| ----------------------------------- | ------ | --- | --------- |\n| Theme tokens, utilities, conditions | ✅     | ✅  | ✅        |\n| Generated JIT                       | ✅     | ❌  | ❌        |\n| Preset sharing                      | ✅     | ❌  | ❌        |\n| Colocation                          | ❌     | ✅  | ✅        |\n| Atomic classes                      | ❌     | ✅  | ✅        |\n| Can be composed at runtime          | ❌     | ✅  | ✅        |\n| Responsive variants                 | ✅     | ❌  | ✅        |\n| Responsive compound variants        | ❌     | ❌  | ✅        |\n\n### Current Limitations\n\n- The plugin generates variants for all breakpoints defined in your theme, and does not include Panda's generated breakpoints, such as `mdDown`, `mdOnly`, `mdToLg`.\n- There is currently no way to limit or pick which breakpoints you wish to generate.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonambas%2Fpanda-plugin-crv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonambas%2Fpanda-plugin-crv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonambas%2Fpanda-plugin-crv/lists"}