- 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
You must have a dedicated file name utilities.css
where to put all your utilities.
Variants
There's 4 variants, and each variant has its intents, you can customize each one as you want.
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);
}
}
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);
}
}
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);
}
}
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%);
}
}
12%
50%
You're reaching out your limit
Utilities
Card Utilities
The ui-card
utility provides base styling for card components using CSS variables.
| Prop | Description |
|---|---|
ui-card
|
Applies padding and border radius to card elements using
--card-padding
and --card-radius
variables.
|
How it works:
-
Uses
p-(--card-padding)for padding -
Uses
rounded-(--card-radius)for border radius - Both variables are inherited from the card component's props or can be overridden
Customization:
-
Override
--card-paddingto change padding size -
Override
--card-radiusto change border radius - Use CSS custom properties for fine-tuned control
Inner Radius Utility
The inner-radius
utility calculates border radius for elements inside cards, accounting for the card's padding.
| Prop | Description |
|---|---|
inner-radius
|
Calculates border radius as
calc(var(--card-radius) - var(--card-padding))
for elements that need to fit perfectly inside card boundaries.
|
Why it's needed:
- Ensures inner elements don't overflow card boundaries
- Creates perfect visual alignment with card border radius
- Prevents visual gaps between card content and border
- Useful for buttons, images, or other components inside cards
Usage example:
inner-radius-example.blade.php
<!-- Card with custom padding and radius -->
<x-ui.card class="[--card-padding:--spacing(6)] [--card-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>