{"id":31367374,"url":"https://github.com/lukonik/ngx-classed","last_synced_at":"2026-01-20T17:36:01.282Z","repository":{"id":316212796,"uuid":"1062438097","full_name":"lukonik/ngx-classed","owner":"lukonik","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-23T09:02:31.000Z","size":265,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-23T11:16:59.145Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukonik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-09-23T08:57:42.000Z","updated_at":"2025-09-23T09:02:35.000Z","dependencies_parsed_at":"2025-09-23T15:18:32.182Z","dependency_job_id":null,"html_url":"https://github.com/lukonik/ngx-classed","commit_stats":null,"previous_names":["lukonik/ngx-classed"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/lukonik/ngx-classed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fngx-classed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fngx-classed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fngx-classed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fngx-classed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukonik","download_url":"https://codeload.github.com/lukonik/ngx-classed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fngx-classed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277551126,"owners_count":25837605,"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","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"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":[],"created_at":"2025-09-27T13:14:03.953Z","updated_at":"2025-09-29T17:03:30.836Z","avatar_url":"https://github.com/lukonik.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Styling"],"readme":"![NPM Version](https://img.shields.io/npm/v/ngx-classed)\n\n`ngx-classed` library allows you to dynamically add or remove classes based on state. It especially perfectly suits frameworks like Tailwind where you have utility classes and need to apply them based on some states.\n\n✨ **Key Features:**\n\n- 🔒 **Type-safe**: Full TypeScript support\n- ⚡ **Angular Signals**: Built on Angular's reactive computed signals\n- 🎨 **Variant-based**: Define multiple styling variants with ease\n- 🧩 **Compound Variants**: Handle complex styling combinations\n- 🧠 **TailwindCSS IntelliSense**: Full IDE support with autocomplete and syntax highlighting\n- 🌐 **SSR Compatible**: Works seamlessly with server-side rendering\n- 📦 **Zero Dependencies**: Lightweight with no external dependencies\n\n## Installation\n\n**supports \u003e= Angular@17**\n\n```bash\nnpm install ngx-classed\n```\n\n## TailwindCSS IntelliSense Support (Optional)\n\nIf you use TailwindCSS, you can enable IntelliSense for better developer experience:\n\n### VSCode\n\nAdd this configuration to your `.vscode/settings.json`:\n\n```json\n{\n  \"tailwindCSS.classFunctions\": [\"classed\"]\n}\n```\n\n### WebStorm\n\n_Available for WebStorm 2023.1 and later_\n\n1. Open Settings → Languages and Frameworks → Style Sheets → Tailwind CSS\n2. Add the following to your Tailwind configuration:\n\n```json\n{\n  \"classFunctions\": [\"classed\"]\n}\n```\n\n## Usage\n\nUse `classed` function to configure set of classes, depending on different variants:\n\n```typescript\nimport { classed } from 'ngx-classed';\n\nconst buttonClassed = classed({\n  base: 'px-4 py-2 rounded font-medium', // Base classes that will be applied always\n  variants: {\n    // Variant based configuration\n    variant: {\n      primary: 'bg-blue-500 text-white',\n      secondary: 'bg-gray-200 text-gray-900',\n    },\n    size: {\n      sm: 'text-sm px-2 py-1',\n      lg: 'text-lg px-6 py-3',\n    },\n  },\n  compoundVariants: [\n    // Compount based configuration (all variants must match)\n    {\n      variant: 'primary',\n      size: 'sm',\n      className: 'hover:bg-blue-100',\n    },\n    {\n      variant: 'secondary',\n      size: 'lg',\n      className: 'shadow-red-100',\n    },\n  ],\n});\n```\n\nIt will return a callable function that expects to pass the object with variants [key, values] that you described. The function returns a computed signal that will automatically trigger on any change of the state:\n\n```typescript\n@Component({\n  template: `\u003cbutton [class]=\"buttonClass()\"\u003eClick me\u003c/button\u003e`,\n})\nexport class MyComponent {\n  variant = input\u003c'primary' | 'secondary'\u003e('primary');\n  size = input\u003c'sm' | 'lg'\u003e('sm');\n\n  buttonClass = buttonClassed(() =\u003e ({\n    variant: this.variant(),\n    size: this.size(),\n  }));\n}\n```\n\n## Examples\n\n### Basic Button Component\n\n```typescript\nimport { Component, input } from '@angular/core';\nimport { classed } from 'ngx-classed';\n\n@Component({\n  selector: 'app-button',\n  template: `\u003cbutton [class]=\"buttonClass()\"\u003e\u003cng-content\u003e\u003c/ng-content\u003e\u003c/button\u003e`,\n})\nexport class ButtonComponent {\n  variant = input\u003c'primary' | 'secondary'\u003e('primary');\n  size = input\u003c'sm' | 'md' | 'lg'\u003e('md');\n\n  private buttonClassed = classed({\n    base: 'font-medium rounded-lg transition-colors',\n    variants: {\n      variant: {\n        primary: 'bg-blue-600 text-white hover:bg-blue-700',\n        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',\n      },\n      size: {\n        sm: 'px-3 py-1.5 text-sm',\n        md: 'px-4 py-2 text-base',\n        lg: 'px-6 py-3 text-lg',\n      },\n    },\n  });\n\n  buttonClass = this.buttonClassed(() =\u003e ({\n    variant: this.variant(),\n    size: this.size(),\n  }));\n}\n```\n\n### Card Component with Compound Variants\n\n```typescript\nimport { Component, input } from '@angular/core';\nimport { classed } from 'ngx-classed';\n\n@Component({\n  selector: 'app-card',\n  template: `\n    \u003cdiv [class]=\"cardClass()\"\u003e\n      \u003ch3 [class]=\"titleClass()\"\u003e{{ title() }}\u003c/h3\u003e\n      \u003cp\u003e{{ content() }}\u003c/p\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class CardComponent {\n  title = input\u003cstring\u003e('');\n  content = input\u003cstring\u003e('');\n  variant = input\u003c'default' | 'primary' | 'danger'\u003e('default');\n  elevated = input\u003cboolean\u003e(false);\n  interactive = input\u003cboolean\u003e(false);\n\n  private cardClassed = classed({\n    base: 'rounded-lg p-6 border transition-all',\n    variants: {\n      variant: {\n        default: 'bg-white border-gray-200',\n        primary: 'bg-blue-50 border-blue-200',\n        danger: 'bg-red-50 border-red-200',\n      },\n      elevated: {\n        true: 'shadow-lg',\n        false: 'shadow-sm',\n      },\n      interactive: {\n        true: 'cursor-pointer hover:shadow-xl',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        interactive: true,\n        className: 'hover:bg-blue-100',\n      },\n      {\n        variant: 'danger',\n        elevated: true,\n        className: 'shadow-red-100',\n      },\n    ],\n  });\n\n  private titleClassed = classed({\n    base: 'text-xl font-semibold mb-2',\n    variants: {\n      variant: {\n        default: 'text-gray-900',\n        primary: 'text-blue-900',\n        danger: 'text-red-900',\n      },\n    },\n  });\n\n  cardClass = this.cardClassed(() =\u003e ({\n    variant: this.variant(),\n    elevated: this.elevated(),\n    interactive: this.interactive(),\n  }));\n\n  titleClass = this.titleClassed(() =\u003e ({\n    variant: this.variant(),\n  }));\n}\n```\n\n### Reusable Button Styles\n\n```typescript\n// shared/button.styles.ts\nimport { classed } from 'ngx-classed';\n\nexport const buttonClassed = classed({\n  base: 'inline-flex items-center justify-center font-medium rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',\n  variants: {\n    variant: {\n      primary: 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500',\n      secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-indigo-500',\n      danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',\n    },\n    size: {\n      xs: 'px-2.5 py-1.5 text-xs',\n      sm: 'px-3 py-2 text-sm',\n      md: 'px-4 py-2 text-sm',\n      lg: 'px-4 py-2 text-base',\n      xl: 'px-6 py-3 text-base',\n    },\n    disabled: {\n      true: 'opacity-50 cursor-not-allowed',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      disabled: true,\n      className: 'bg-gray-400 hover:bg-gray-400',\n    },\n  ],\n});\n\n// Usage in components\n@Component({\n  selector: 'save-button',\n  template: `\u003cbutton [class]=\"buttonClass()\" (click)=\"onSave()\"\u003eSave\u003c/button\u003e`,\n})\nexport class SaveButtonComponent {\n  loading = input\u003cboolean\u003e(false);\n\n  buttonClass = buttonClassed(() =\u003e ({\n    variant: 'primary' as const,\n    size: 'md' as const,\n    disabled: this.loading(),\n  }));\n\n  onSave() {\n    // Save logic\n  }\n}\n```\n\n## Inspiration\n\nThis library draws inspiration from [CVA (Class Variance Authority)](https://cva.style/) 🎨, bringing similar variant-based styling patterns to the Angular ecosystem with full integration into Angular's reactive system.\n\n## License\n\nMIT\n\n---\n\nBuilt with ❤️ for the Angular community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukonik%2Fngx-classed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukonik%2Fngx-classed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukonik%2Fngx-classed/lists"}