Docs
utilities

UI Utilities & Variants

High-level UI helpers and variants such as ui-solid, ui-soft, ui-subtle, ui-card, and other composable utilities.

Prerequisites

Create a dedicated file such as utilities.css for reusable theme utilities. Keep these utilities separate from component files to avoid duplicated style logic.

Import utility definitions after theme tokens so utility classes can consume final variable values.

Variants

Utility variants mirror the same semantic intent system used across themed components. Choose a variant family, then apply the intent classes that match your use case.

Solid variants

@utility ui-solid-gray {
    --ui-solid-bg: var(--color-gray-100);
    --ui-solid-text: var(--color-gray-700);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-gray-900);
        --ui-solid-text: var(--color-gray-300);
    }
}
@utility ui-solid-success {
    --ui-solid-bg: var(--color-success-600);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-success-500);
    }
}

@utility ui-solid-warning {
    --ui-solid-bg: var(--color-warning-600);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-warning-500);
    }
}

@utility ui-solid-danger {
    --ui-solid-bg: var(--color-danger-600);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-danger-500);
    }
}

@utility ui-solid-neutral {
    --ui-solid-bg: var(--color-gray-900);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-white);
        --ui-solid-text: var(--color-gray-900);
    }
}
@utility ui-solid-success {
    --ui-solid-bg: var(--color-success-600);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-success-500);
    }
}

@utility ui-solid-warning {
    --ui-solid-bg: var(--color-warning-600);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-warning-500);
    }
}

@utility ui-solid-danger {
    --ui-solid-bg: var(--color-danger-600);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-danger-500);
    }
}

@utility ui-solid-neutral {
    --ui-solid-bg: var(--color-gray-900);
    --ui-solid-text: var(--color-white);

    &:is(.dark *) {
        --ui-solid-bg: var(--color-white);
        --ui-solid-text: var(--color-gray-900);
    }
}

@utility ui-solid-gray {
    --ui-solid-bg: var(--color-gray-100);
    --ui-solid-text: var(--color-gray-700);
}
@utility ui-solid-success {
    --ui-solid-bg: var(--color-success-600);
    --ui-solid-text: var(--color-white);
}

@utility ui-solid-warning {
    --ui-solid-bg: var(--color-warning-600);
    --ui-solid-text: var(--color-white);
}

@utility ui-solid-danger {
    --ui-solid-bg: var(--color-danger-600);
    --ui-solid-text: var(--color-white);
}

@utility ui-solid-neutral {
    --ui-solid-bg: var(--color-gray-900);
    --ui-solid-text: var(--color-white);
}

@utility ui-solid-gray {
    --ui-solid-bg: var(--color-gray-900);
    --ui-solid-text: var(--color-gray-300);
}
@utility ui-solid-success {
    --ui-solid-text: var(--color-white);
    --ui-solid-bg: var(--color-success-500);
}

@utility ui-solid-warning {
    --ui-solid-text: var(--color-white);
    --ui-solid-bg: var(--color-warning-500);

}

@utility ui-solid-danger {
    --ui-solid-text: var(--color-white);
    --ui-solid-bg: var(--color-danger-500);
}

@utility ui-solid-neutral {
`   --ui-solid-bg: var(--color-white);
    --ui-solid-text: var(--color-gray-900);`
}

12% 50% You're reaching out your limit

Outline variants

@utility ui-outline-success {
    --ui-outline-border: var(--color-success-600);
    --ui-outline-text: var(--color-success-600);

    &:is(.dark *) {
        --ui-outline-border: var(--color-secondary-500);
        --ui-outline-text: var(--color-secondary-500);
    }
}

@utility ui-outline-warning {
    --ui-outline-border: var(--color-warning-600);
    --ui-outline-text: var(--color-warning-600);

    &:is(.dark *) {
        --ui-outline-border: var(--color-warning-500);
        --ui-outline-text: var(--color-warning-500);
    }
}

@utility ui-outline-danger {
    --ui-outline-border: var(--color-danger-600);
    --ui-outline-text: var(--color-danger-600);

    &:is(.dark *) {
        --ui-outline-border: var(--color-danger-500);
        --ui-outline-text: var(--color-danger-500);
    }
}

@utility ui-outline-success {
    --ui-outline-border: var(--color-success-600);
    --ui-outline-text: var(--color-success-600);
}

@utility ui-outline-warning {
    --ui-outline-border: var(--color-warning-600);
    --ui-outline-text: var(--color-warning-600);
}

@utility ui-outline-danger {
    --ui-outline-border: var(--color-danger-600);
    --ui-outline-text: var(--color-danger-600);
}

@utility ui-outline-success {
    --ui-outline-border: var(--color-secondary-500);
    --ui-outline-text: var(--color-secondary-500);
}

@utility ui-outline-warning {
    --ui-outline-border: var(--color-warning-500);
    --ui-outline-text: var(--color-warning-500);
}

@utility ui-outline-danger {
    --ui-outline-border: var(--color-danger-500);
    --ui-outline-text: var(--color-danger-500);
}

12% 50% You're reaching out your limit

Soft variants

@utility ui-soft-success {
    --ui-soft-bg: --alpha(var(--color-success-100) / 40%);
    --ui-soft-text: var(--color-success-600);

    &:is(.dark *) {
        --ui-soft-bg: --alpha(var(--color-success-900) / 30%);
        --ui-soft-text: var(--color-success-300);
    }
}

@utility ui-soft-warning {
    --ui-soft-bg: --alpha(var(--color-warning-100) / 40%);
    --ui-soft-text: var(--color-warning-600);

    &:is(.dark *) {
        --ui-soft-bg: --alpha(var(--color-warning-900) / 30%);
        --ui-soft-text: var(--color-warning-300);
    }
}

@utility ui-soft-danger {
    --ui-soft-bg: --alpha(var(--color-danger-100) / 40%);
    --ui-soft-text: var(--color-danger-600);

    &:is(.dark *) {
        --ui-soft-bg: --alpha(var(--color-danger-900) / 30%);
        --ui-soft-text: var(--color-danger-300);
    }
}

@utility ui-soft-success {
    --ui-soft-bg: --alpha(var(--color-success-100) / 40%);
    --ui-soft-text: var(--color-success-600);
}

@utility ui-soft-warning {
    --ui-soft-bg: --alpha(var(--color-warning-100) / 40%);
    --ui-soft-text: var(--color-warning-600);
}

@utility ui-soft-danger {
    --ui-soft-bg: --alpha(var(--color-danger-100) / 40%);
    --ui-soft-text: var(--color-danger-600);
}

@utility ui-soft-success {
        --ui-soft-bg: --alpha(var(--color-success-900) / 30%);
        --ui-soft-text: var(--color-success-300);
}

@utility ui-soft-warning {
    --ui-soft-bg: --alpha(var(--color-warning-900) / 30%);
    --ui-soft-text: var(--color-warning-300);
}

@utility ui-soft-danger {
    --ui-soft-bg: --alpha(var(--color-danger-900) / 30%);
    --ui-soft-text: var(--color-danger-300);
}

12% 50% You're reaching out your limit

Subtle variants

@utility ui-subtle-success {
    --ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
    --ui-subtle-text: var(--color-success-600);
    --ui-subtle-border: var(--color-success-300);

    &:is(.dark *) {
        --ui-subtle-bg: --alpha(var(--color-success-900) / 30%);
        --ui-subtle-text: var(--color-success-300);
        --ui-subtle-border: --alpha(var(--color-success-900) / 60%);
    }
}

@utility ui-subtle-warning {
    --ui-subtle-bg: --alpha(var(--color-warning-100) / 40%);
    --ui-subtle-text: var(--color-warning-600);
    --ui-subtle-border: var(--color-warning-300);

    &:is(.dark *) {
        --ui-subtle-bg: --alpha(var(--color-warning-900) / 30%);
        --ui-subtle-text: var(--color-warning-300);
        --ui-subtle-border: --alpha(var(--color-warning-900) / 60%);
    }
}

@utility ui-subtle-danger {
    --ui-subtle-bg: --alpha(var(--color-danger-100) / 40%);
    --ui-subtle-text: var(--color-danger-600);
    --ui-subtle-border: var(--color-danger-300);

    &:is(.dark *) {
        --ui-subtle-bg: --alpha(var(--color-danger-900) / 30%);
        --ui-subtle-text: var(--color-danger-300);
        --ui-subtle-border: --alpha(var(--color-danger-900) / 60%);
    }
}

@utility ui-subtle-success {
    --ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
    --ui-subtle-text: var(--color-success-600);
    --ui-subtle-border: var(--color-success-300);
}

@utility ui-subtle-warning {
    --ui-subtle-bg: --alpha(var(--color-warning-100) / 40%);
    --ui-subtle-text: var(--color-warning-600);
    --ui-subtle-border: var(--color-warning-300);
}

@utility ui-subtle-danger {
    --ui-subtle-bg: --alpha(var(--color-danger-100) / 40%);
    --ui-subtle-text: var(--color-danger-600);
    --ui-subtle-border: var(--color-danger-300);
}

@utility ui-subtle-success {
    --ui-subtle-bg: --alpha(var(--color-success-900) / 30%);
    --ui-subtle-text: var(--color-success-300);
    --ui-subtle-border: --alpha(var(--color-success-900) / 60%);
}

@utility ui-subtle-warning {
    --ui-subtle-bg: --alpha(var(--color-warning-900) / 30%);
    --ui-subtle-text: var(--color-warning-300);
    --ui-subtle-border: --alpha(var(--color-warning-900) / 60%);
}

@utility ui-subtle-danger {
    --ui-subtle-bg: --alpha(var(--color-danger-900) / 30%);
    --ui-subtle-text: var(--color-danger-300);
    --ui-subtle-border: --alpha(var(--color-danger-900) / 60%);
}

12% 50% You're reaching out your limit

Utilities

Card Utility

ui-card applies shared card spacing and radius using theme variables. Use it as a base utility when you want cards to follow token-driven sizing.

Prop	Description
`ui-card`	Applies padding and radius from `--card-padding` and `--card-radius` .

How it works:

Uses p-(--card-padding) for internal spacing
Uses rounded-(--card-radius) for outer radius
Can be overridden per component when needed

Customization:

Override --card-padding for compact or spacious layouts
Override --card-radius for roundness style changes
Keep variable names stable so utility class usage stays unchanged

Inner Radius Utility

inner-radius keeps inner elements aligned with the card's inner curve. It subtracts card padding from the outer radius to avoid visual overflow.

Prop	Description
`inner-radius`	Computes `calc(var(--card-radius) - var(--card-padding))` for inner content blocks.

Why it's useful:

Prevents inner surfaces from clipping beyond the card shape
Keeps nested UI visually aligned with outer radius
Works well for media blocks, nested actions, and inset containers

Usage example:

inner-radius-example.blade.php

<!-- Card with custom padding and radius -->
<x-ui.card class="[--ui-padding:--spacing(6)] [--ui-radius:1rem]">
    <!-- Inner element with calculated radius -->
    <div class="inner-radius bg-primary text-white p-4">
        Content that fits perfectly
    </div>
</x-ui.card>

Edit this page

Components

Browse all Flexiwind...

Prerequisites

Variants

Solid variants

Outline variants

Soft variants

Subtle variants

Utilities

Card Utility

Inner Radius Utility

Community