1. Components
  2. theme
  3. utilities

Introduction

JK-ui is a TailwindCSS v4 + React Aria Components

Prerequisites

You must have a dedicated file name utilities.css where to put all your ui 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.
UtilityDescription
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-padding to change padding size
  • Override --card-radius to 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.
UtilityDescription
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
import { Card } from "@/components/ui/card"
        
const ProfileCard = () => {
  return (
      <Card className="[--card-padding:--spacing(2)] [--card-radius:var(--radius-2xl)]">
          // Inner element with calculated radius 
          <div className="inner-radius bg-primary text-white p-4">
              Content that fits perfectly
          </div>
      </Card>
  )
}
Prev
Components

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

Next
On this page