{"id":26514558,"url":"https://github.com/defvova/cva_rails","last_synced_at":"2026-02-20T17:31:56.763Z","repository":{"id":276791460,"uuid":"930020126","full_name":"defvova/cva_rails","owner":"defvova","description":"A lightweight gem for managing dynamic class names and variants in Rails applications.","archived":false,"fork":false,"pushed_at":"2025-02-11T13:29:44.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T23:02:58.041Z","etag":null,"topics":["actionview","component-variant","cva","rails","ruby","ui-state-management","view-components"],"latest_commit_sha":null,"homepage":"https://github.com/defvova/cva_rails","language":"Ruby","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/defvova.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-09T23:06:18.000Z","updated_at":"2025-02-11T13:30:57.000Z","dependencies_parsed_at":"2025-02-10T13:47:27.979Z","dependency_job_id":null,"html_url":"https://github.com/defvova/cva_rails","commit_stats":null,"previous_names":["defvova/cva_rails"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/defvova/cva_rails","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defvova%2Fcva_rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defvova%2Fcva_rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defvova%2Fcva_rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defvova%2Fcva_rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/defvova","download_url":"https://codeload.github.com/defvova/cva_rails/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/defvova%2Fcva_rails/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29658373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T16:33:43.953Z","status":"ssl_error","status_checked_at":"2026-02-20T16:33:43.598Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["actionview","component-variant","cva","rails","ruby","ui-state-management","view-components"],"created_at":"2025-03-21T05:18:29.368Z","updated_at":"2026-02-20T17:31:56.745Z","avatar_url":"https://github.com/defvova.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cva_rails [![Gem Version](https://badge.fury.io/rb/cva_rails.svg?icon=si%3Arubygems)](https://badge.fury.io/rb/cva_rails) [![codecov](https://codecov.io/gh/defvova/cva_rails/branch/main/graph/badge.svg?token=SUOCE7FAYF)](https://codecov.io/gh/defvova/cva_rails) [![CI](https://github.com/defvova/cva_rails/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/defvova/cva_rails/actions?query=workflow%3ACI) [![GitHub License](https://img.shields.io/github/license/defvova/cva_rails)](LICENSE.txt)\n\n\u003e A tiny and simple gem for variant-based styling logic.\n\nThis gem offers a lightweight and straightforward solution for managing dynamic class names and\nstyle variants in Ruby on Rails applications. It draws inspiration from the popular\n[\u003cstrong\u003eC\u003c/strong\u003elass \u003cstrong\u003eV\u003c/strong\u003eariance \u003cstrong\u003eA\u003c/strong\u003euthority (CVA)](https://github.com/joe-bell/cva) package from the JavaScript ecosystem.\n\nBy defining a collection of named style rules, the gem helps developers easily handle conditional styling based on schemas and runtime parameters. It’s particularly useful when working with complex UI states requiring dynamic styling.\n\n## Supported Ruby and Rails versions\n\nRuby 3.1+ and Rails 7.0+ are supported.\n\n\u003cstrong\u003eDependency: [clsx-rails](https://github.com/svyatov/clsx-rails)\u003c/strong\u003e\n\n## Installation\n\nInstall the gem and add to the application's Gemfile by executing:\n\n```bash\nbundle add cva_rails\n```\n\nOr add it manually to the Gemfile:\n\n```ruby\ngem 'cva_rails', '~\u003e 1.0'\n```\n\n## Usage\n\nThe cva method allows you to define and manage class variants for your components efficiently.\n\nSyntax\n```ruby\ncva(base_classes, variants)\n```\n\n1.  base_classes (String or Array)\nA set of base CSS classes applied to the component by default.\n2.  variants (Hash)\nDefines the available style variants and their possible values.\n\nExample Usage\n```ruby\n# app/components/alert_component.rb\nclass Alert\n  include Cva::Helper\n\n  cva(\"relative w-full rounded-lg border px-4 py-3 text-sm \"\\\n      \"[\u0026\u003esvg+div]:translate-y-[-3px] [\u0026\u003esvg]:absolute [\u0026\u003esvg]:left-4 [\u0026\u003esvg]:top-4 [\u0026\u003esvg]:text-foreground [\u0026\u003esvg~*]:pl-7\", {\n    variants: {\n      variant: {\n        primary: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [\u0026\u003esvg]:text-destructive\",\n      },\n      size: {\n        small: \"px-3 py-2\",\n        medium: \"px-5 py-4\"\n      }\n    },\n  })\nend\n```\n\nRendered in a view as:\n\n```erb\n\u003cdiv class=\"\u003c%= Alert.variants({ variant: :primary, size: :small }) %\u003e\"\u003e\u003c/div\u003e\n\u003cdiv class=\"\u003c%= Alert.variants({ variant: :destructive, size: :medium }) %\u003e\"\u003e\u003c/div\u003e\n```\n\nHow it works\n```ruby\nAlert.variants({ variant: :primary, size: :small })\n```\nThis method call combines the base classes of the Alert component with the classes defined for the :primary and :small variants.\n- The base classes are always applied to the component.\n- The selected variant classes (:primary and :small) are conditionally added, resulting in a combined class list.\n\nThis approach helps manage styling variations cleanly and efficiently.\n\n## Compound Components\n\nFor larger, more complex components, you may end up wanting to create a set of composable components that work together.\n\n```ruby\nclass BtnComponent\n  include Cva::Helper\n\n  cva(\"border px-4 py-2\", {\n    variants: {\n      size: {\n        small: \"text-sm\",\n        medium: \"text-base\"\n      },\n      color: {\n        green: \"text-green-100\",\n        blue: \"text-blue-100\"\n      }\n    },\n    compound_variants: [\n      {\n        size: :small,\n        class: \"h-10\"\n      }\n    ]\n  })\nend\n\nBtnComponent.variants({ size: :medium, color: :green }) # =\u003e border px-4 py-2 text-green-100 text-base\nBtnComponent.variants({ size: :small, color: :green })  # =\u003e border px-4 py-2 text-green-100 text-base h-10\n```\n\n## Default Variants\n\nYou can define default variants in the schema to\nautomatically apply specific styles when no variant is explicitly provided.\n\n```ruby\nclass BtnComponent\n  include Cva::Helper\n\n  cva(\"border px-4 py-2\", {\n    variants: {\n      size: {\n        small: \"text-sm\",\n        medium: \"text-base\"\n      },\n      color: {\n        green: \"text-green-100\",\n        blue: \"text-blue-100\"\n      }\n    },\n    compound_variants: [\n      {\n        size: :small,\n        class: \"h-10\"\n      }\n    ],\n    default_variants: {\n      size: :medium,\n      color: :green\n    }\n  })\nend\n\nBtnComponent.variants # =\u003e border px-4 py-2 text-green-100 text-base\n```\n\n## Example with TailwindCSS, [ViewComponent](https://viewcomponent.org/) and [TailwindMerge](https://github.com/gjtorikian/tailwind_merge)\n\nViewComponent is a framework for creating reusable, testable \u0026 encapsulated view components, built to integrate seamlessly with Ruby on Rails.\nTailwindMerge is utility function to efficiently merge Tailwind CSS classes without style conflicts.\n\n```ruby\n# app/components/button_component.rb\n\nclass ButtonComponent \u003c ViewComponent::Base\n  include Cva::Helper\n\n  cva(\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm \"\\\n      \"font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 \"\\\n      \"focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 \"\\\n      \"[\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0\", {\n        variants: {\n          variant: {\n            default:\n              \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n            destructive:\n              \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n            outline:\n              \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n            secondary:\n              \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n            ghost: \"hover:bg-accent hover:text-accent-foreground\",\n            link: \"text-primary underline-offset-4 hover:underline\",\n          },\n          size: {\n            default: \"h-9 px-4 py-2\",\n            sm: \"h-8 rounded-md px-3 text-xs\",\n            lg: \"h-10 rounded-md px-8\",\n            icon: \"h-9 w-9\",\n          },\n        }\n      })\n\n  erb_template \u003c\u003c-ERB\n  \t\u003c%= link_to content, @href, class: TailwindMerge::Merger.new.merge(self.class.variants(@style_variants)) %\u003e\n  ERB\n\n  def initialize(href = \"#\", style_variants = {})\n    @href = href\n    @style_variants = style_variants\n  end\nend\n```\n\nRendered in a view as:\n\n```erb\n\u003c%= render(ButtonComponent.new(href: submit_path, { variant: :outline, size: :lg })) do %\u003e\n  Submit\n\u003c% end %\u003e\n```\n\nReturning:\n```html\n\u003ca href=\"/submit\" class=\"base classes + outline classes + size classes\"\u003eSubmit\u003c/a\u003e\n```\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests.\nYou can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`.\nTo release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`,\nwhich will create a git tag for the version, push git commits and the created tag,\nand push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Conventional Commits\n\nThis project uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages.\n\nTypes of commits are:\n- `feat`: a new feature\n- `fix`: a bug fix\n- `perf`: code that improves performance\n- `chore`: updating build tasks, configs, formatting etc; no code change\n- `docs`: changes to documentation\n- `refactor`: refactoring code\n- `test`: changes to test\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/defvova/cva_rails.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefvova%2Fcva_rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdefvova%2Fcva_rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefvova%2Fcva_rails/lists"}