Refraction UI - Component Documentation

807239

190458

231420

810274

4969241

683104

97754

5246131

5839230

7597145

223975

692875

813819

5500171

4589143

317737

487269

3855218

4070120

4527257

641123

6658309

7319264

305274

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — sunset orange */
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 24 90% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 24 10% 96%;
  --secondary-foreground: 0 0% 40%;
  --accent: 24 50% 95%;
  --accent-foreground: 24 90% 40%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 10%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 340 82% 52%;
  --chart-1: 340 82% 52%;
  --chart-2: 25 95% 55%;
  --chart-3: 280 60% 55%;
  --chart-4: 200 70% 50%;
  --chart-5: 160 60% 45%;

/* Sidebar */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 10%;
  --sidebar-primary: 340 82% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 340 50% 95%;
  --sidebar-accent-foreground: 340 82% 42%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 340 82% 52%;

/* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-heading: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

/* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 6px -1px rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-lg: 0 8px 16px -3px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --shadow-xl: 0 16px 28px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);

/* Glass & overlay */
  --overlay-opacity: 0.5;
  --backdrop-blur: 10px;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);

/* Spacing & density — playful */
  --spacing-scale: 1;
  --container-max-width: 1280px;
  --container-padding: 2rem;
  --card-padding: 1rem;
  --input-height: 2.5rem;
  --button-height: 2.25rem;
  --section-gap: 4rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --heading-weight: 700;
  --heading-letter-spacing: -0.015em;
  --heading-line-height: 1.2;

/* Shape — rounded, playful */
  --radius: 0.5rem;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  --avatar-radius: 9999px;
  --badge-radius: 9999px;
  --button-radius: 0.5rem;
  --input-radius: 0.5rem;
  --card-radius: 0.5rem;
  --tooltip-radius: 0.375rem;

/* Component shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
  --dropdown-shadow: 0 8px 16px -3px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --dialog-shadow: 0 16px 28px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
  --button-shadow: none;

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.1;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.45;

/* Buttons */
  --button-style: filled;
  --button-weight: 600;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.5;

/* Links */
  --link-style: color-only;
  --link-weight: 600;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1.5;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);

/* Selection */
  --selection-background: 340 82% 52%;
  --selection-foreground: 0 0% 100%;

/* Tooltips */
  --tooltip-style: dark;

/* Tables */
  --table-style: clean;
  --table-header-weight: 600;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 200ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: fast;
  --hover-transition: 200ms ease;
  --enter-transition: 250ms ease-out;
  --exit-transition: 200ms ease-in;
}

RBuilt with Refraction UI