PHP code example of feature-ninja / cva

1. Go to this page and download the library: Download feature-ninja/cva library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

feature-ninja / cva example snippets


use FeatureNinja\Cva\ClassVarianceAuthority;

$button = ClassVarianceAuthority::new(
    ['font-semibold', 'border', 'rounded'],
    [
        'variants' => [
            'intent' => [
                'primary' => ['bg-blue-500', 'text-white', 'border-transparent', 'hover:bg-blue-600'],
                'secondary' => 'bg-white text-gray-800 border-gray-400 hover:bg-gray-100',
            ],
            'size' => [
                'small' => ['text-sm', 'py-1', 'px-2'],
                'medium' => 'text-base py-2 px-4',
            ],
        ],
        'compoundVariants' => [
            [
                'intent' => 'primary',
                'size' => 'medium',
                'class' => 'uppercase',
            ],
        ],
        'defaultVariants' => [
            'intent' => 'primary',
            'size' => 'medium',
        ],
    ],
);

# Or by using the cva helper function

$button = fn\cva(
    ['font-semibold', 'border', 'rounded'],
    [
        'variants' => [
            'intent' => [
                'primary' => ['bg-blue-500', 'text-white', 'border-transparent', 'hover:bg-blue-600'],
                'secondary' => 'bg-white text-gray-800 border-gray-400 hover:bg-gray-100',
            ],
            'size' => [
                'small' => ['text-sm', 'py-1', 'px-2'],
                'medium' => 'text-base py-2 px-4',
            ],
        ],
        'compoundVariants' => [
            [
                'intent' => 'primary',
                'size' => 'medium',
                'class' => 'uppercase',
            ],
        ],
        'defaultVariants' => [
            'intent' => 'primary',
            'size' => 'medium',
        ],
    ],
);