Theme

Radius

Border radius system with 5-step scale for consistent corner rounding. Kookie UI uses custom radius values that differ from Radix Themes.View source →

Border radius system with 5-step scale for consistent corner rounding. The radius infrastructure (5-step scale, factor system) is from Radix Themes, but Kookie UI uses custom radius values that differ from Radix Themes.

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

Installation

shell
npm install @kushagradhawan/kookie-ui

Usage

Set radius prop on the Theme component to control border radius across all components. Use consistent radius values to create visual hierarchy and polish.

tsx
import { Theme } from '@kushagradhawan/kookie-ui';
 
<Theme radius="medium"><YourApp /></Theme>

Tokens

Radius tokens with their base CSS values:

css
/* Radius tokens (base values) */
var(--radius-1)  /* 6px */
var(--radius-2)  /* 8px */
var(--radius-3)  /* 10px */
var(--radius-4)  /* 12px */
 
var(--radius-5)  /* 16px */
var(--radius-6)  /* 20px */
var(--radius-7)  /* 24px */
var(--radius-8)  /* 28px */
 
var(--radius-9)  /* 32px */
var(--radius-10) /* 40px */
var(--radius-11) /* 48px */
var(--radius-12) /* 56px */

Radius Scale

None

No border radius for sharp, geometric interfaces.

tsx
<Theme radius="none"><YourApp /></Theme>

Small

Subtle rounding with 0.75x radius factor.

tsx
<Theme radius="small"><YourApp /></Theme>

Medium

Standard rounding with 1x radius factor (default).

tsx
<Theme radius="medium"><YourApp /></Theme>

Large

Prominent rounding with 1.5x radius factor.

tsx
<Theme radius="large"><YourApp /></Theme>

Full

Maximum rounding with 2x radius factor and pill-shaped elements.

tsx
<Theme radius="full"><YourApp /></Theme>

Radius Factor System

Theme component uses radius factors that multiply base radius values:

css
/* Radius factor system */
[data-radius='none']   { --radius-factor: 0; }     /* 0x multiplier */
[data-radius='small']  { --radius-factor: 0.75; }  /* 0.75x multiplier */
[data-radius='medium'] { --radius-factor: 1; }     /* 1x multiplier */
[data-radius='large']  { --radius-factor: 1.5; }   /* 1.5x multiplier */
[data-radius='full']   { --radius-factor: 2.0; }   /* 2x multiplier */
tsx
<Theme radius="none" />    {/* All radius values become 0px */}
<Theme radius="small" />   {/* All radius values × 0.75 */}
<Theme radius="medium" />  {/* All radius values × 1 (default) */}
<Theme radius="large" />   {/* All radius values × 1.5 */}
<Theme radius="full" />    {/* All radius values × 2 */}

Component Overrides

Individual components can override theme radius settings using their radius prop:

tsx
<Theme radius="medium">
  <Button radius="large">Large radius button</Button>
  <Card radius="small">Small radius card</Card>
</Theme>

Credits

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

© 2026 Kushagra Dhawan. Licensed under MIT. GitHub.

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background