Refraction UI - Component Documentation

397167

734236

7495233

6891155

4917274

332871

349398

1741265

284735

119326

2061306

3614161

4506204

6598156

2034296

5461204

5608158

4909196

931284

6057258

6770297

1710222

7610296

6805100

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