Refraction UI - Component Documentation

Your story

sophia_art

mike.travels

cooking_with_j

fit.emma

alex.dev

natalie.photo

james_music

sophia_art

2,847 likes

sophia_art Golden hour at the studio. New collection dropping this Friday.

2h ago

mike.travels

5,621 likes

mike.travels Lost in the Swiss Alps. This planet never stops amazing me.

4h ago

cooking_with_j

1,203 likes

cooking_with_j Homemade pasta from scratch. Recipe in bio! #foodie #homemade #pasta

5h ago

alex.dev

892 likes

alex.dev Late night coding session. Building something cool with React Server Components.

7h ago

fit.emma

3,456 likes

fit.emma Morning run done. 10K in under 45 min - new personal best! Who else ran today?

9h ago

natalie.photo

7,234 likes

natalie.photo Portrait session with @sophia_art. Natural light only. No retouching needed.

12h ago

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