Shadows

Custom shadow system with 6-step scale for elevation and hierarchy. The shadow infrastructure (6-step scale, token structure) is from Radix Themes, but Kookie UI uses custom shadow values that differ from Radix Themes.

For complete shadow documentation and advanced usage, visit the Radix Themes Shadows documentation. Note that Kookie UI's shadow values are customized and may not match Radix Themes exactly.

Installation

npm install @kushagradhawan/kookie-ui

Usage

Use shadow tokens to create elevation and hierarchy. Each shadow level provides meaningful depth for different interface elements.

/* Card with subtle elevation */
.my-card {
  box-shadow: var(--shadow-2);
}

/* Elevated button */
.my-button {
  box-shadow: var(--shadow-3);
}

Components can also use the shadow prop for direct shadow application:

<Card shadow="3">Content</Card>

Tokens

Shadow tokens with their usage guidelines:

var(--shadow-1)  /* Subtle ring + inset; pressed states */
var(--shadow-2)  /* Light elevation; classic cards */
var(--shadow-3)  /* Medium elevation; raised cards, buttons */
var(--shadow-4)  /* Small overlays, hover cards */
var(--shadow-5)  /* Popovers, dropdowns */
var(--shadow-6)  /* Large overlays, dialogs */

Shadow Scale

Shadow 1

Inset shadow for subtle depth and pressed states. Use for form inputs, pressed buttons, or elements that need to appear recessed.

box-shadow: var(--shadow-1);

Shadow 2

Classic panel and card shadows for subtle elevation. Perfect for cards, panels, and surfaces that need minimal depth.

box-shadow: var(--shadow-2);

Shadow 3

Elevated cards and buttons with more prominent depth. Use for raised cards, elevated buttons, or elements that need to stand out from the background.

box-shadow: var(--shadow-3);

Shadow 4

Small overlays and hover cards with medium elevation. Ideal for hover states, small popovers, or temporary overlays.

box-shadow: var(--shadow-4);

Shadow 5

Popovers and dropdowns with strong elevation. Use for dropdown menus, popovers, and floating panels that need clear separation.

box-shadow: var(--shadow-5);

Shadow 6

Large overlays and dialogs with maximum elevation. Reserved for modals, dialogs, and major overlays that need the highest visual priority.

box-shadow: var(--shadow-6);

Dark Mode

All shadows automatically adapt to dark mode when using the Theme component's appearance prop. Shadow values are carefully tuned to maintain proper depth perception in both light and dark themes.

<Theme appearance="dark"><YourApp /></Theme>

Component Usage

Many components support the shadow prop for direct shadow application:

<Card shadow="2">Subtle elevation</Card>
<Card shadow="4">Medium elevation</Card>

The shadow prop also supports responsive values:

<Card shadow={{ initial: '2', md: '4' }}>Responsive shadow</Card>

Credits

The shadow infrastructure (6-step scale system and token structure) is from Radix Themes by WorkOS. However, Kookie UI uses custom shadow values that have been modified from the original Radix Themes values. The shadow system structure and approach credit goes to Radix Themes, while the specific shadow values are custom to Kookie UI.