https://github.com/lukonik/ngx-classed
https://github.com/lukonik/ngx-classed
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/lukonik/ngx-classed
- Owner: lukonik
- Created: 2025-09-23T08:57:42.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-09-23T09:02:31.000Z (about 1 month ago)
- Last Synced: 2025-09-23T11:16:59.145Z (about 1 month ago)
- Language: TypeScript
- Size: 259 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-classed - A library allows you to dynamically add or remove classes based on state. (Development Utilities / Styling)
- fucking-awesome-angular - ngx-classed - A library allows you to dynamically add or remove classes based on state. (Development Utilities / Styling)
README
`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.
✨ **Key Features:**
- 🔒 **Type-safe**: Full TypeScript support
- ⚡ **Angular Signals**: Built on Angular's reactive computed signals
- 🎨 **Variant-based**: Define multiple styling variants with ease
- 🧩 **Compound Variants**: Handle complex styling combinations
- 🧠 **TailwindCSS IntelliSense**: Full IDE support with autocomplete and syntax highlighting
- 🌐 **SSR Compatible**: Works seamlessly with server-side rendering
- 📦 **Zero Dependencies**: Lightweight with no external dependencies
## Installation
**supports >= Angular@17**
```bash
npm install ngx-classed
```
## TailwindCSS IntelliSense Support (Optional)
If you use TailwindCSS, you can enable IntelliSense for better developer experience:
### VSCode
Add this configuration to your `.vscode/settings.json`:
```json
{
"tailwindCSS.classFunctions": ["classed"]
}
```
### WebStorm
_Available for WebStorm 2023.1 and later_
1. Open Settings → Languages and Frameworks → Style Sheets → Tailwind CSS
2. Add the following to your Tailwind configuration:
```json
{
"classFunctions": ["classed"]
}
```
## Usage
Use `classed` function to configure set of classes, depending on different variants:
```typescript
import { classed } from 'ngx-classed';
const buttonClassed = classed({
base: 'px-4 py-2 rounded font-medium', // Base classes that will be applied always
variants: {
// Variant based configuration
variant: {
primary: 'bg-blue-500 text-white',
secondary: 'bg-gray-200 text-gray-900',
},
size: {
sm: 'text-sm px-2 py-1',
lg: 'text-lg px-6 py-3',
},
},
compoundVariants: [
// Compount based configuration (all variants must match)
{
variant: 'primary',
size: 'sm',
className: 'hover:bg-blue-100',
},
{
variant: 'secondary',
size: 'lg',
className: 'shadow-red-100',
},
],
});
```
It 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:
```typescript
@Component({
template: `Click me`,
})
export class MyComponent {
variant = input<'primary' | 'secondary'>('primary');
size = input<'sm' | 'lg'>('sm');
buttonClass = buttonClassed(() => ({
variant: this.variant(),
size: this.size(),
}));
}
```
## Examples
### Basic Button Component
```typescript
import { Component, input } from '@angular/core';
import { classed } from 'ngx-classed';
@Component({
selector: 'app-button',
template: ``,
})
export class ButtonComponent {
variant = input<'primary' | 'secondary'>('primary');
size = input<'sm' | 'md' | 'lg'>('md');
private buttonClassed = classed({
base: 'font-medium rounded-lg transition-colors',
variants: {
variant: {
primary: 'bg-blue-600 text-white hover:bg-blue-700',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
},
size: {
sm: 'px-3 py-1.5 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-6 py-3 text-lg',
},
},
});
buttonClass = this.buttonClassed(() => ({
variant: this.variant(),
size: this.size(),
}));
}
```
### Card Component with Compound Variants
```typescript
import { Component, input } from '@angular/core';
import { classed } from 'ngx-classed';
@Component({
selector: 'app-card',
template: `
{{ title() }}
{{ content() }}
`,
})
export class CardComponent {
title = input('');
content = input('');
variant = input<'default' | 'primary' | 'danger'>('default');
elevated = input(false);
interactive = input(false);
private cardClassed = classed({
base: 'rounded-lg p-6 border transition-all',
variants: {
variant: {
default: 'bg-white border-gray-200',
primary: 'bg-blue-50 border-blue-200',
danger: 'bg-red-50 border-red-200',
},
elevated: {
true: 'shadow-lg',
false: 'shadow-sm',
},
interactive: {
true: 'cursor-pointer hover:shadow-xl',
false: '',
},
},
compoundVariants: [
{
variant: 'primary',
interactive: true,
className: 'hover:bg-blue-100',
},
{
variant: 'danger',
elevated: true,
className: 'shadow-red-100',
},
],
});
private titleClassed = classed({
base: 'text-xl font-semibold mb-2',
variants: {
variant: {
default: 'text-gray-900',
primary: 'text-blue-900',
danger: 'text-red-900',
},
},
});
cardClass = this.cardClassed(() => ({
variant: this.variant(),
elevated: this.elevated(),
interactive: this.interactive(),
}));
titleClass = this.titleClassed(() => ({
variant: this.variant(),
}));
}
```
### Reusable Button Styles
```typescript
// shared/button.styles.ts
import { classed } from 'ngx-classed';
export const buttonClassed = classed({
base: 'inline-flex items-center justify-center font-medium rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
variants: {
variant: {
primary: 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500',
secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-indigo-500',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
},
size: {
xs: 'px-2.5 py-1.5 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-sm',
lg: 'px-4 py-2 text-base',
xl: 'px-6 py-3 text-base',
},
disabled: {
true: 'opacity-50 cursor-not-allowed',
false: '',
},
},
compoundVariants: [
{
variant: 'primary',
disabled: true,
className: 'bg-gray-400 hover:bg-gray-400',
},
],
});
// Usage in components
@Component({
selector: 'save-button',
template: `Save`,
})
export class SaveButtonComponent {
loading = input(false);
buttonClass = buttonClassed(() => ({
variant: 'primary' as const,
size: 'md' as const,
disabled: this.loading(),
}));
onSave() {
// Save logic
}
}
```
## Inspiration
This 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.
## License
MIT
---
Built with ❤️ for the Angular community