{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "eased", "homepage": "https://eased.dev", "description": "Eased is a library of motion-first React components for shadcn, installed with the shadcn CLI. Built on React 19, Tailwind CSS v4 and Motion, with free components under the MIT licence; the source lands in your project.", "items": [ { "name": "eased-tokens", "type": "registry:item", "title": "Eased stylesheet", "description": "The colours, shadows, radius roles, UI type sizes, springs, utilities (radius-nested, hit-area, focus-ring …) and variants (hover-fine, reduced) every Eased component reads. Installs into your global CSS without touching shadcn/ui's theme or Tailwind's defaults: every raw variable is prefixed --eased-, light follows :root, dark follows .dark.", "docs": "Merged into your global CSS: there is no eased.css to import. Light follows :root and dark follows a .dark class or data-theme=\"dark\" on an ancestor.", "cssVars": { "theme": { "color-bg": "var(--eased-bg)", "color-surface": "var(--eased-surface)", "color-surface-sunken": "var(--eased-surface-sunken)", "color-surface-raised": "var(--eased-surface-raised)", "color-surface-hover": "var(--eased-surface-hover)", "color-surface-active": "var(--eased-surface-active)", "color-line-subtle": "var(--eased-line-subtle)", "color-line": "var(--eased-line)", "color-line-strong": "var(--eased-line-strong)", "color-text": "var(--eased-text)", "color-text-secondary": "var(--eased-text-secondary)", "color-text-muted": "var(--eased-text-muted)", "color-text-disabled": "var(--eased-text-disabled)", "color-text-on-brand": "var(--eased-text-on-brand)", "color-brand": "var(--eased-brand)", "color-brand-hover": "var(--eased-brand-hover)", "color-brand-active": "var(--eased-brand-active)", "color-brand-subtle": "var(--eased-brand-subtle)", "color-brand-line": "var(--eased-brand-line)", "color-brand-text": "var(--eased-brand-text)", "color-success": "var(--eased-success)", "color-success-subtle": "var(--eased-success-subtle)", "color-success-text": "var(--eased-success-text)", "color-text-on-success": "var(--eased-text-on-success)", "color-warning": "var(--eased-warning)", "color-warning-subtle": "var(--eased-warning-subtle)", "color-warning-text": "var(--eased-warning-text)", "color-text-on-warning": "var(--eased-text-on-warning)", "color-danger": "var(--eased-danger)", "color-danger-hover": "var(--eased-danger-hover)", "color-danger-active": "var(--eased-danger-active)", "color-danger-subtle": "var(--eased-danger-subtle)", "color-danger-text": "var(--eased-danger-text)", "color-text-on-danger": "var(--eased-text-on-danger)", "color-info": "var(--eased-info)", "color-info-subtle": "var(--eased-info-subtle)", "color-info-text": "var(--eased-info-text)", "color-text-on-info": "var(--eased-text-on-info)", "color-focus": "var(--eased-focus)", "color-selection": "var(--eased-selection)", "color-scrim": "var(--eased-scrim)", "color-image-ring": "var(--eased-image-ring)", "shadow-resting": "var(--eased-shadow-resting)", "shadow-raised": "var(--eased-shadow-raised)", "shadow-floating": "var(--eased-shadow-floating)", "shadow-overlay": "var(--eased-shadow-overlay)", "shadow-thumb": "var(--eased-shadow-thumb)", "inset-shadow-well": "var(--eased-inset-well)", "inset-shadow-highlight": "var(--eased-inset-highlight)", "radius-pill": "var(--eased-radius-pill)", "radius-surface": "var(--eased-radius-surface)", "radius-panel": "var(--eased-radius-panel)", "radius-control": "var(--eased-radius-control)", "radius-control-sm": "var(--eased-radius-control-sm)", "radius-control-xs": "var(--eased-radius-control-xs)", "radius-control-2xs": "var(--eased-radius-control-2xs)", "spacing-control-xs": "var(--eased-control-xs)", "spacing-control-sm": "var(--eased-control-sm)", "spacing-control-md": "var(--eased-control-md)", "spacing-control-lg": "var(--eased-control-lg)", "spacing-control-xl": "var(--eased-control-xl)", "spacing-hit": "var(--eased-hit)", "text-ui-2xs": "0.6875rem", "text-ui-2xs--line-height": "1.35", "text-ui-2xs--letter-spacing": "0.005em", "text-ui-xs": "0.75rem", "text-ui-xs--line-height": "1.35", "text-ui-xs--letter-spacing": "0em", "text-ui-sm": "0.8125rem", "text-ui-sm--line-height": "1.4", "text-ui-sm--letter-spacing": "-0.003em", "text-ui": "0.875rem", "text-ui--line-height": "1.45", "text-ui--letter-spacing": "-0.006em", "text-ui-md": "1rem", "text-ui-md--line-height": "1.5", "text-ui-md--letter-spacing": "-0.011em", "text-ui-lg": "1.125rem", "text-ui-lg--line-height": "1.4", "text-ui-lg--letter-spacing": "-0.014em", "tracking-caps": "0.06em", "text-display-xl": "var(--eased-display-xl)", "text-display-xl--line-height": "1.3", "text-display-xl--letter-spacing": "-0.017em", "text-display-2xl": "var(--eased-display-2xl)", "text-display-2xl--line-height": "1.25", "text-display-2xl--letter-spacing": "-0.02em", "text-display-3xl": "var(--eased-display-3xl)", "text-display-3xl--line-height": "1.2", "text-display-3xl--letter-spacing": "-0.021em", "text-display-4xl": "var(--eased-display-4xl)", "text-display-4xl--line-height": "1.15", "text-display-4xl--letter-spacing": "-0.022em", "text-display-5xl": "var(--eased-display-5xl)", "text-display-5xl--line-height": "1.1", "text-display-5xl--letter-spacing": "-0.022em", "text-display-6xl": "var(--eased-display-6xl)", "text-display-6xl--line-height": "1.05", "text-display-6xl--letter-spacing": "-0.025em", "tracking-display": "var(--eased-tracking-display)", "spacing-in-xs": "var(--eased-space-in-xs)", "spacing-in-sm": "var(--eased-space-in-sm)", "spacing-in": "var(--eased-space-in)", "spacing-in-lg": "var(--eased-space-in-lg)", "spacing-pad-xs": "var(--eased-pad-xs)", "spacing-pad-sm": "var(--eased-pad-sm)", "spacing-pad-base": "var(--eased-pad-base)", "spacing-pad-md": "var(--eased-pad-md)", "spacing-pad-lg": "var(--eased-pad-lg)", "spacing-pad-xl": "var(--eased-pad-xl)", "spacing-tiles-sm": "var(--eased-gap-tiles-sm)", "spacing-tiles": "var(--eased-gap-tiles)", "spacing-tiles-lg": "var(--eased-gap-tiles-lg)", "spacing-group": "var(--eased-gap-group)", "spacing-group-lg": "var(--eased-gap-group-lg)", "spacing-section-sm": "var(--eased-gap-section-sm)", "spacing-section": "var(--eased-gap-section)", "ease-enter": "var(--eased-ease-enter)", "ease-standard": "var(--eased-ease-standard)", "ease-exit": "var(--eased-ease-exit)", "ease-spring-snappy": "var(--eased-spring-snappy)", "ease-spring-smooth": "var(--eased-spring-smooth)", "ease-spring-bouncy": "var(--eased-spring-bouncy)" } }, "css": { ":root": { "--eased-neutral-hue": "80", "--eased-neutral-0": "oklch(100% 0 0)", "--eased-neutral-1": "oklch(99.2% 0.002 var(--eased-neutral-hue))", "--eased-neutral-2": "oklch(98% 0.003 var(--eased-neutral-hue))", "--eased-neutral-3": "oklch(95.6% 0.004 var(--eased-neutral-hue))", "--eased-neutral-4": "oklch(93% 0.005 var(--eased-neutral-hue))", "--eased-neutral-5": "oklch(90.5% 0.005 var(--eased-neutral-hue))", "--eased-neutral-6": "oklch(88% 0.006 var(--eased-neutral-hue))", "--eased-neutral-7": "oklch(84.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-8": "oklch(78% 0.006 var(--eased-neutral-hue))", "--eased-neutral-9": "oklch(62.5% 0.008 var(--eased-neutral-hue))", "--eased-neutral-10": "oklch(55% 0.009 var(--eased-neutral-hue))", "--eased-neutral-11": "oklch(46% 0.01 var(--eased-neutral-hue))", "--eased-neutral-12": "oklch(22% 0.012 var(--eased-neutral-hue))", "--eased-neutral-a1": "oklch(0% 0 0 / 0.02)", "--eased-neutral-a2": "oklch(0% 0 0 / 0.04)", "--eased-neutral-a3": "oklch(0% 0 0 / 0.06)", "--eased-neutral-a4": "oklch(0% 0 0 / 0.08)", "--eased-neutral-a5": "oklch(0% 0 0 / 0.12)", "--eased-neutral-a6": "oklch(0% 0 0 / 0.16)", "--eased-neutral-a7": "oklch(0% 0 0 / 0.24)", "--eased-neutral-a8": "oklch(0% 0 0 / 0.36)", "--eased-neutral-a9": "oklch(0% 0 0 / 0.48)", "--eased-neutral-a10": "oklch(0% 0 0 / 0.6)", "--eased-neutral-a11": "oklch(0% 0 0 / 0.72)", "--eased-neutral-a12": "oklch(0% 0 0 / 0.88)", "--eased-brand-1": "oklch(99% 0.004 85)", "--eased-brand-2": "oklch(97.5% 0.006 85)", "--eased-brand-3": "oklch(0% 0 0 / 0.05)", "--eased-brand-4": "oklch(92% 0.01 85)", "--eased-brand-5": "oklch(88% 0.012 85)", "--eased-brand-6": "oklch(82% 0.015 85)", "--eased-brand-7": "oklch(72% 0.018 85)", "--eased-brand-8": "oklch(60% 0.02 85)", "--eased-brand-9": "oklch(25% 0.012 70)", "--eased-brand-10": "oklch(33% 0.014 70)", "--eased-brand-11": "oklch(42% 0.035 70)", "--eased-brand-12": "oklch(20% 0.01 70)", "--eased-bg": "var(--eased-neutral-0)", "--eased-surface": "var(--eased-neutral-0)", "--eased-surface-sunken": "var(--eased-neutral-2)", "--eased-surface-raised": "var(--eased-neutral-0)", "--eased-surface-hover": "var(--eased-neutral-3)", "--eased-surface-active": "var(--eased-neutral-4)", "--eased-line-subtle": "var(--eased-neutral-4)", "--eased-line": "var(--eased-neutral-6)", "--eased-line-strong": "var(--eased-neutral-8)", "--eased-text": "var(--eased-neutral-12)", "--eased-text-secondary": "var(--eased-neutral-11)", "--eased-text-muted": "var(--eased-neutral-10)", "--eased-text-disabled": "var(--eased-neutral-8)", "--eased-text-on-brand": "oklch(97% 0.02 85)", "--eased-brand": "var(--eased-brand-9)", "--eased-brand-hover": "var(--eased-brand-10)", "--eased-brand-active": "oklch(from var(--eased-brand-10) calc(l - 0.03) c h)", "--eased-brand-subtle": "var(--eased-brand-3)", "--eased-brand-line": "var(--eased-brand)", "--eased-brand-text": "var(--eased-brand-11)", "--eased-success": "oklch(56% 0.17 150)", "--eased-success-subtle": "oklch(95.5% 0.04 150)", "--eased-success-text": "oklch(42% 0.13 150)", "--eased-text-on-success": "oklch(100% 0 0)", "--eased-warning": "oklch(72% 0.17 78)", "--eased-warning-subtle": "oklch(96.5% 0.05 85)", "--eased-warning-text": "oklch(48% 0.12 70)", "--eased-text-on-warning": "oklch(22% 0.03 70)", "--eased-danger": "oklch(56% 0.21 25)", "--eased-danger-hover": "oklch(from var(--eased-danger) calc(l - 0.04) c h)", "--eased-danger-active": "oklch(from var(--eased-danger) calc(l - 0.07) c h)", "--eased-danger-subtle": "oklch(95.5% 0.03 25)", "--eased-danger-text": "oklch(46% 0.19 25)", "--eased-text-on-danger": "oklch(100% 0 0)", "--eased-info": "oklch(58% 0.14 230)", "--eased-info-subtle": "oklch(95.5% 0.03 230)", "--eased-info-text": "oklch(45% 0.11 230)", "--eased-text-on-info": "oklch(100% 0 0)", "--eased-ring": "oklch(from var(--eased-brand-9) l c h / 0.45)", "--eased-ring-soft": "oklch(from var(--eased-brand-9) l c h / 0.18)", "--eased-ring-danger": "oklch(from var(--eased-danger) l c h / 0.25)", "--eased-focus": "var(--eased-ring)", "--eased-selection": "oklch(from var(--eased-neutral-12) l c h / 0.16)", "--eased-scrim": "oklch(10% 0 0 / 0.46)", "--eased-image-ring": "var(--eased-neutral-a4)", "--eased-shadow-tint": "20% 0.01 var(--eased-neutral-hue)", "--eased-shadow-ring": "0 0 0 1px oklch(var(--eased-shadow-tint) / 0.06)", "--eased-shadow-resting": "var(--eased-shadow-ring), 0 1px 2px oklch(var(--eased-shadow-tint) / 0.05)", "--eased-shadow-raised": "var(--eased-shadow-ring), 0 1px 2px oklch(var(--eased-shadow-tint) / 0.05), 0 6px 16px -4px oklch(var(--eased-shadow-tint) / 0.08)", "--eased-shadow-floating": "var(--eased-shadow-ring), 0 2px 4px oklch(var(--eased-shadow-tint) / 0.05), 0 12px 32px -8px oklch(var(--eased-shadow-tint) / 0.12)", "--eased-shadow-overlay": "var(--eased-shadow-ring), 0 4px 10px oklch(var(--eased-shadow-tint) / 0.06), 0 24px 56px -12px oklch(var(--eased-shadow-tint) / 0.18)", "--eased-shadow-thumb": "0 0 0 0.5px oklch(0% 0 0 / 0.07), 0 1px 2px oklch(0% 0 0 / 0.14), 0 2px 6px oklch(0% 0 0 / 0.06)", "--eased-inset-well": "inset 0 0 0 1px var(--eased-neutral-a3), inset 0 1.5px 2px var(--eased-neutral-a2)", "--eased-inset-highlight": "inset 0 1px 0 oklch(100% 0 0 / 0.08)", "--eased-radius-pill": "9999px", "--eased-radius-surface": "24px", "--eased-radius-panel": "16px", "--eased-radius-control": "10px", "--eased-radius-control-sm": "8px", "--eased-radius-control-xs": "6px", "--eased-radius-control-2xs": "4px", "--eased-control-xs": "1.5rem", "--eased-control-sm": "2rem", "--eased-control-md": "2.25rem", "--eased-control-lg": "2.5rem", "--eased-control-xl": "3rem", "--eased-hit": "2.75rem", "--eased-display-xl": "1.25rem", "--eased-display-2xl": "1.5rem", "--eased-display-3xl": "1.875rem", "--eased-display-4xl": "2.25rem", "--eased-display-5xl": "3rem", "--eased-display-6xl": "3.75rem", "--eased-tracking-display": "-0.03em", "--eased-space-in-xs": "4px", "--eased-space-in-sm": "8px", "--eased-space-in": "12px", "--eased-space-in-lg": "16px", "--eased-pad-xs": "8px", "--eased-pad-sm": "12px", "--eased-pad-base": "16px", "--eased-pad-md": "24px", "--eased-pad-lg": "32px", "--eased-pad-xl": "40px", "--eased-gap-tiles-sm": "12px", "--eased-gap-tiles": "16px", "--eased-gap-tiles-lg": "24px", "--eased-gap-group": "32px", "--eased-gap-group-lg": "48px", "--eased-gap-section-sm": "64px", "--eased-gap-section": "96px", "--eased-duration-instant": "100ms", "--eased-duration-fast": "150ms", "--eased-duration-standard": "200ms", "--eased-duration-slow": "300ms", "--eased-duration-sheet": "500ms", "--eased-duration-focus": "180ms", "--eased-ease-enter": "cubic-bezier(0.16, 1, 0.3, 1)", "--eased-ease-standard": "cubic-bezier(0.22, 1, 0.36, 1)", "--eased-ease-exit": "cubic-bezier(0.7, 0, 0.84, 0)", "--eased-ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)", "--eased-spring-snappy": "linear(0, 0.0347, 0.1182, 0.2269, 0.3441, 0.4591, 0.5654, 0.6594, 0.7398, 0.8064, 0.8603, 0.9028, 0.9355, 0.96, 0.9778, 0.9902, 0.9986, 1.0039, 1.007, 1.0084, 1.0088, 1.0084, 1.0077, 1.0067, 1.0057, 1.0047, 1.0038, 1.0029, 1)", "--eased-spring-smooth": "linear(0, 0.0323, 0.1079, 0.2039, 0.3059, 0.4053, 0.4974, 0.5799, 0.6519, 0.7138, 0.7661, 0.8099, 0.8462, 0.8761, 0.9006, 0.9205, 0.9366, 0.9495, 0.9599, 0.9683, 0.9749, 0.9802, 0.9844, 0.9877, 0.9904, 0.9924, 0.9941, 0.9954, 1)", "--eased-spring-bouncy": "linear(0, 0.0758, 0.2474, 0.4501, 0.6424, 0.8022, 0.9212, 1.0003, 1.0455, 1.0651, 1.0673, 1.0593, 1.0464, 1.0326, 1.0202, 1.0103, 1.0032, 0.9987, 0.9963, 0.9954, 0.9956, 0.9963, 0.9972, 0.9981, 0.9989, 0.9995, 1, 1.0002, 1)", "--eased-duration-spring-snappy": "350ms", "--eased-duration-spring-smooth": "450ms", "--eased-duration-spring-bouncy": "600ms", "--eased-press-scale": "0.97", "--eased-press-scale-icon": "0.96", "--eased-press-scale-wide": "0.985" }, "@media (prefers-reduced-motion: reduce)": { ":root": { "--eased-duration-focus": "0ms" } }, ".dark, [data-theme=\"dark\"]": { "--eased-neutral-0": "oklch(14.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-1": "oklch(17.8% 0.006 var(--eased-neutral-hue))", "--eased-neutral-2": "oklch(21.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-3": "oklch(25.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-4": "oklch(29.3% 0.006 var(--eased-neutral-hue))", "--eased-neutral-5": "oklch(32.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-6": "oklch(36.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-7": "oklch(42.8% 0.006 var(--eased-neutral-hue))", "--eased-neutral-8": "oklch(52.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-9": "oklch(57.8% 0.006 var(--eased-neutral-hue))", "--eased-neutral-10": "oklch(62.5% 0.006 var(--eased-neutral-hue))", "--eased-neutral-11": "oklch(78% 0.005 var(--eased-neutral-hue))", "--eased-neutral-12": "oklch(95% 0.003 var(--eased-neutral-hue))", "--eased-neutral-a1": "oklch(100% 0 0 / 0.03)", "--eased-neutral-a2": "oklch(100% 0 0 / 0.05)", "--eased-neutral-a3": "oklch(100% 0 0 / 0.07)", "--eased-neutral-a4": "oklch(100% 0 0 / 0.1)", "--eased-neutral-a5": "oklch(100% 0 0 / 0.14)", "--eased-neutral-a6": "oklch(100% 0 0 / 0.18)", "--eased-neutral-a7": "oklch(100% 0 0 / 0.26)", "--eased-neutral-a8": "oklch(100% 0 0 / 0.38)", "--eased-neutral-a9": "oklch(100% 0 0 / 0.5)", "--eased-neutral-a10": "oklch(100% 0 0 / 0.62)", "--eased-neutral-a11": "oklch(100% 0 0 / 0.76)", "--eased-neutral-a12": "oklch(100% 0 0 / 0.92)", "--eased-brand-1": "oklch(18.5% 0.006 85)", "--eased-brand-2": "oklch(21% 0.008 85)", "--eased-brand-3": "oklch(100% 0 0 / 0.07)", "--eased-brand-4": "oklch(30% 0.012 85)", "--eased-brand-5": "oklch(36% 0.015 85)", "--eased-brand-6": "oklch(44% 0.018 85)", "--eased-brand-7": "oklch(54% 0.022 85)", "--eased-brand-8": "oklch(66% 0.026 85)", "--eased-brand-9": "oklch(93% 0.03 85)", "--eased-brand-10": "oklch(97% 0.02 85)", "--eased-brand-11": "oklch(86% 0.05 75)", "--eased-brand-12": "oklch(95% 0.02 85)", "--eased-bg": "var(--eased-neutral-1)", "--eased-surface": "var(--eased-neutral-2)", "--eased-surface-sunken": "var(--eased-neutral-1)", "--eased-surface-raised": "var(--eased-neutral-3)", "--eased-surface-hover": "var(--eased-neutral-4)", "--eased-surface-active": "var(--eased-neutral-5)", "--eased-line-subtle": "var(--eased-neutral-4)", "--eased-line": "var(--eased-neutral-6)", "--eased-line-strong": "var(--eased-neutral-8)", "--eased-text": "var(--eased-neutral-12)", "--eased-text-secondary": "var(--eased-neutral-11)", "--eased-text-muted": "var(--eased-neutral-10)", "--eased-text-disabled": "var(--eased-neutral-8)", "--eased-text-on-brand": "oklch(20% 0.02 70)", "--eased-brand": "var(--eased-brand-9)", "--eased-brand-hover": "var(--eased-brand-10)", "--eased-brand-active": "oklch(from var(--eased-brand-10) calc(l - 0.03) c h)", "--eased-brand-subtle": "var(--eased-brand-3)", "--eased-brand-line": "var(--eased-line-strong)", "--eased-brand-text": "var(--eased-brand-11)", "--eased-success": "oklch(74% 0.16 150)", "--eased-success-subtle": "oklch(26% 0.05 150)", "--eased-success-text": "oklch(80% 0.14 150)", "--eased-text-on-success": "oklch(15% 0.03 150)", "--eased-warning": "oklch(80% 0.15 80)", "--eased-warning-subtle": "oklch(27% 0.05 80)", "--eased-warning-text": "oklch(84% 0.13 82)", "--eased-text-on-warning": "oklch(20% 0.03 70)", "--eased-danger": "oklch(70% 0.19 25)", "--eased-danger-hover": "oklch(from var(--eased-danger) calc(l - 0.04) c h)", "--eased-danger-active": "oklch(from var(--eased-danger) calc(l - 0.07) c h)", "--eased-danger-subtle": "oklch(26% 0.06 25)", "--eased-danger-text": "oklch(79% 0.15 25)", "--eased-text-on-danger": "oklch(100% 0 0)", "--eased-info": "oklch(72% 0.13 230)", "--eased-info-subtle": "oklch(26% 0.04 230)", "--eased-info-text": "oklch(80% 0.1 230)", "--eased-text-on-info": "oklch(15% 0.03 230)", "--eased-ring": "oklch(from var(--eased-brand-11) l c h / 0.55)", "--eased-ring-soft": "oklch(from var(--eased-brand-11) l c h / 0.2)", "--eased-ring-danger": "oklch(from var(--eased-danger) l c h / 0.35)", "--eased-focus": "var(--eased-ring)", "--eased-selection": "oklch(from var(--eased-neutral-12) l c h / 0.18)", "--eased-image-ring": "var(--eased-neutral-a4)", "--eased-shadow-tint": "0% 0 0", "--eased-shadow-ring": "0 0 0 1px oklch(100% 0 0 / 0.08)", "--eased-shadow-resting": "var(--eased-shadow-ring), 0 1px 2px oklch(0% 0 0 / 0.2)", "--eased-shadow-raised": "var(--eased-shadow-ring), inset 0 1px 0 oklch(100% 0 0 / 0.05), 0 1px 2px oklch(0% 0 0 / 0.25), 0 8px 20px -4px oklch(0% 0 0 / 0.3)", "--eased-shadow-floating": "var(--eased-shadow-ring), inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 2px 4px oklch(0% 0 0 / 0.25), 0 16px 36px -8px oklch(0% 0 0 / 0.5)", "--eased-shadow-overlay": "var(--eased-shadow-ring), inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 4px 10px oklch(0% 0 0 / 0.3), 0 28px 64px -12px oklch(0% 0 0 / 0.6)", "--eased-shadow-thumb": "0 0 0 0.5px oklch(0% 0 0 / 0.3), 0 1px 2px oklch(0% 0 0 / 0.35), 0 2px 6px oklch(0% 0 0 / 0.2)", "--eased-inset-well": "inset 0 0 0 1px var(--eased-neutral-a3), inset 0 2px 4px oklch(0% 0 0 / 0.35)", "--eased-inset-highlight": "inset 0 1px 0 oklch(100% 0 0 / 0.06)" }, "@utility radius-nested": { "border-radius": "max(0px, calc(var(--radius-outer, var(--eased-radius-panel)) - var(--pad, 0px) - var(--border-w, 1px)))" }, "@utility squircle": { "corner-shape": "squircle" }, "@utility fade-x": { "mask-image": "linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent)" }, "@utility image-ring": { "position": "relative", "&::after": { "content": "\"\"", "position": "absolute", "inset": "0", "border-radius": "inherit", "box-shadow": "inset 0 0 0 1px var(--eased-image-ring)", "pointer-events": "none" } }, "@utility hit-area": { "position": "relative", "&::before": { "content": "\"\"", "position": "absolute", "left": "50%", "top": "50%", "translate": "-50% -50%", "width": "max(100%, var(--eased-hit))", "height": "max(100%, var(--eased-hit))" } }, "@utility focus-ring": { "outline": "2px solid transparent", "outline-offset": "2px", "box-shadow": "var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)", "transition": "box-shadow var(--eased-duration-focus) var(--eased-ease-standard)", "&:focus-visible": { "--tw-ring-offset-shadow": "0 0 0 2px var(--eased-bg)", "--tw-ring-shadow": "0 0 0 4px var(--eased-ring)" } }, "@custom-variant hover-fine": { "@media (hover: hover) and (pointer: fine)": { "&:hover": { "@slot": {} } } }, "@custom-variant group-hover-fine": { "@media (hover: hover) and (pointer: fine)": { "&:is(:where(.group):hover *)": { "@slot": {} } } }, "@custom-variant reduced": { "@media (prefers-reduced-motion: reduce)": { "@slot": {} } } } }, { "name": "eased-motion", "type": "registry:lib", "title": "Eased motion", "description": "The named springs (snappy, smooth, bouncy), tweens, a hydration-safe useSafeReducedMotion and press classes every Eased component shares, matching the springs in the Eased stylesheet, plus small DOM and platform helpers (isEditable, useScrollFades, useIsMac) and a true-minus number formatter.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/lib/motion.ts", "type": "registry:lib", "target": "@components/eased/lib/motion.ts" }, { "path": "src/registry/eased/lib/press.ts", "type": "registry:lib", "target": "@components/eased/lib/press.ts" }, { "path": "src/registry/eased/lib/dom.ts", "type": "registry:lib", "target": "@components/eased/lib/dom.ts" }, { "path": "src/registry/eased/lib/platform.ts", "type": "registry:lib", "target": "@components/eased/lib/platform.ts" }, { "path": "src/registry/eased/lib/format.ts", "type": "registry:lib", "target": "@components/eased/lib/format.ts" } ] }, { "name": "eased-demo-frame", "type": "registry:component", "title": "Demo frame", "description": "The shell every Eased demo renders in: 420px tall, shrinks to its container, one 48px header style.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/lib/demo-frame.tsx", "type": "registry:component", "target": "@components/eased/lib/demo-frame.tsx" } ] }, { "name": "undo-pill", "type": "registry:ui", "title": "Undo Pill", "description": "Undo toast for React and shadcn: a pill with a draining countdown ring that commits the destructive action only when it runs out.", "docs": "Import UndoPill from components/eased/undo-pill/undo-pill. The Eased tokens were merged into your global CSS; nothing to import. useUndoQueue() handles batching, undo and commit. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/kbd.json" ], "files": [ { "path": "src/registry/eased/undo-pill/undo-pill.tsx", "type": "registry:ui", "target": "@components/eased/undo-pill/undo-pill.tsx" } ], "meta": { "details": "A pill that rises after a destructive action with a draining countdown ring. Undo (or ⌘Z / Ctrl+Z) reverts it; only expiry commits it. Hover or focus pauses the countdown." } }, { "name": "undo-pill-demo", "type": "registry:example", "title": "Undo Pill demo", "description": "A file list where deleting a row shows the Undo Pill.", "registryDependencies": [ "https://eased.dev/r/undo-pill.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/undo-pill/undo-pill-demo.tsx", "type": "registry:example", "target": "@components/eased/undo-pill/undo-pill-demo.tsx" } ], "dependencies": [ "motion" ] }, { "name": "concentric-frame", "type": "registry:ui", "title": "Concentric Frame", "description": "Concentric border radius frame for React and shadcn: nested corners take the outer radius minus padding and border, through CSS variables.", "docs": "Import Frame, FrameInner and useFrame from components/eased/concentric-frame/concentric-frame. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/concentric-frame/concentric-frame.tsx", "type": "registry:ui", "target": "@components/eased/concentric-frame/concentric-frame.tsx" } ], "meta": { "details": "A layout primitive that keeps nested corners parallel: the inner radius is the outer radius minus padding and border, exposed as CSS variables. Nested frames continue the curve, FrameInner takes it, and useFrame returns the numbers." } }, { "name": "concentric-frame-demo", "type": "registry:example", "title": "Concentric Frame demo", "description": "Demo for Concentric Frame.", "registryDependencies": [ "https://eased.dev/r/concentric-frame.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/concentric-frame/concentric-frame-demo.tsx", "type": "registry:example", "target": "@components/eased/concentric-frame/concentric-frame-demo.tsx" } ], "dependencies": [ "motion" ] }, { "name": "accordion-demo", "type": "registry:example", "title": "Accordion demo", "description": "A billing FAQ with answers of different lengths.", "registryDependencies": [ "https://eased.dev/r/accordion.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/accordion/accordion-demo.tsx", "type": "registry:example", "target": "@components/eased/accordion/accordion-demo.tsx" } ] }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Animated accordion for React and shadcn: panels open to their real height, one or several at a time, built on Base UI.", "docs": "Import Accordion and AccordionItem from components/eased/accordion/accordion. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-auto-height.json" ], "files": [ { "path": "src/registry/eased/accordion/accordion.tsx", "type": "registry:ui", "target": "@components/eased/accordion/accordion.tsx" } ], "meta": { "details": "Disclosures whose height springs open with no overshoot, content fading in as the height lands and the chevron turning on the same spring. Built on Base UI Accordion." } }, { "name": "avatar-demo", "type": "registry:example", "title": "Avatar demo", "description": "A members card: a stacked group with a rolling +N, a list with photos, initials and a failed image, and Invite.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/avatar.json", "https://eased.dev/r/badge.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/avatar/avatar-demo.tsx", "type": "registry:example", "target": "@components/eased/avatar/avatar-demo.tsx" } ] }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "Animated avatar for React and shadcn: images fade in from a soft blur, initials fill in when they fail, and avatar groups spread apart on hover.", "docs": "Import Avatar and AvatarGroup from components/eased/avatar/avatar. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/avatar/avatar.tsx", "type": "registry:ui", "target": "@components/eased/avatar/avatar.tsx" } ], "meta": { "details": "Avatar and AvatarGroup on Base UI Avatar: images fade in from a 4px blur once loaded, so a quick image never flashes the initials. Overlapping stacks with a cut-out ring spread apart on hover, and the overflow count rolls." } }, { "name": "badge-demo", "type": "registry:example", "title": "Badge demo", "description": "A mail sidebar with rolling unread counts (98 → 99+) and service status badges with a live dot.", "registryDependencies": [ "https://eased.dev/r/badge.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/badge/badge-demo.tsx", "type": "registry:example", "target": "@components/eased/badge/badge-demo.tsx" } ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Animated badge for React and shadcn for statuses and counts: counts roll their digits, and a count-only badge leaves at zero.", "docs": "Import Badge from components/eased/badge/badge. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/badge/badge.tsx", "type": "registry:ui", "target": "@components/eased/badge/badge.tsx" } ], "meta": { "details": "A status or count chip in six tones: counts roll their digits, and a count-only badge pops in above zero and leaves when cleared. A live dot breathes slowly and stops under reduced motion." } }, { "name": "button-demo", "type": "registry:example", "title": "Button demo", "description": "An invoice with Send (loading, then “Sent”), Download and a two-step Void.", "registryDependencies": [ "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/button/button-demo.tsx", "type": "registry:example", "target": "@components/eased/button/button-demo.tsx" } ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Animated button for React and shadcn: labels swap while the width springs, and the loading spinner keeps its width.", "docs": "Import Button from components/eased/button/button. Variants: primary, secondary, ghost, danger, danger-solid. Sizes: sm, md, lg, icon-sm, icon, icon-lg. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/spinner.json" ], "files": [ { "path": "src/registry/eased/button/button.tsx", "type": "registry:ui", "target": "@components/eased/button/button.tsx" } ], "meta": { "details": "A Base UI button whose press scale depends on its width, whose label swaps with y + blur while the width springs, and whose loading spinner overlays the label so the width never changes. Popover triggers never scale." } }, { "name": "eased-auto-height", "type": "registry:ui", "title": "Auto Height", "description": "The height:auto spring primitive: a wrapper whose height springs to its content, opens and closes with the content fading in after the height lands, and rests at height:auto with no clipping.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/auto-height/auto-height.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/auto-height/auto-height.tsx" } ] }, { "name": "eased-field", "type": "registry:ui", "title": "Field shell primitive", "description": "Label, description ⇄ error message slot and the bordered input group, on Base UI Field. Focus is the border alone; turning invalid shakes the group once, 6px, and the message swaps with y + blur while its height springs.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-auto-height.json" ], "files": [ { "path": "src/registry/eased/_primitives/field/field.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/field/field.tsx" } ] }, { "name": "eased-floating-demo", "type": "registry:example", "title": "Floating layer demo", "description": "One popover per side; each enters toward its trigger and flips on collision.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/_primitives/floating/floating-demo.tsx", "type": "registry:example", "target": "@components/eased/_primitives/floating/floating-demo.tsx" } ] }, { "name": "eased-floating", "type": "registry:ui", "title": "Floating layer", "description": "The motion and material every Eased popup shares: grows from the trigger's transform-origin, enters a few pixels toward the trigger, closes at half the distance and faster, and reverses mid-flight because open and close are transitions. FloatingLayer renders any Base UI popup family (Tooltip, Popover, PreviewCard, Menu) with it.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/floating/floating.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/floating/floating.tsx" } ] }, { "name": "eased-gesture-demo", "type": "registry:example", "title": "Gesture kit demo", "description": "A three-detent sheet over a map: flicks project onto detents, pulls past the top rubber-band, and the list hands its scroll over to the sheet.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-gesture.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/_primitives/gesture/gesture-demo.tsx", "type": "registry:example", "target": "@components/eased/_primitives/gesture/gesture-demo.tsx" } ] }, { "name": "eased-gesture", "type": "registry:ui", "title": "Gesture kit", "description": "useDrag: one-axis drag with Apple's rubber-band past the ends, velocity projection onto snap points, scroll handoff from an inner scroller, interruptible release springs that carry the finger's velocity, and keyboard snapping. Plus the pure maths (rubberband, project, pickSnap, velocity tracker).", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/gesture/gesture-math.ts", "type": "registry:ui", "target": "@components/eased/_primitives/gesture/gesture-math.ts" }, { "path": "src/registry/eased/_primitives/gesture/use-drag.ts", "type": "registry:ui", "target": "@components/eased/_primitives/gesture/use-drag.ts" } ] }, { "name": "eased-indicator", "type": "registry:ui", "title": "Indicator", "description": "The shared-layout highlight primitive: render inside whichever item is active and it glides there on the snappy spring, with corners kept round while it stretches. Used by Segmented, Tabs, Toggle Group and Radio Cards.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/indicator/indicator.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/indicator/indicator.tsx" } ] }, { "name": "eased-number-roll", "type": "registry:ui", "title": "Number Roll primitive", "description": "The rolling-digits engine every Eased number uses: Intl-formatted parts, each digit a ten-face cylinder on a spring that rolls in the direction of change, with locale-aware separators and numerals.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/number-roll/number-roll.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/number-roll/number-roll.tsx" } ] }, { "name": "eased-scroll-fade", "type": "registry:ui", "title": "Scroll fades and blur ramp", "description": "Edge feathers that appear only where there is more to scroll (scrollFadeMask, useScrollEdges) and the stacked masked backdrop layers behind Progressive Blur (blurRamp, BlurStack).", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/_primitives/scroll-fade/scroll-fade.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/scroll-fade/scroll-fade.tsx" } ] }, { "name": "eased-text-swap", "type": "registry:ui", "title": "Text Swap primitive", "description": "The text-change engine: outgoing text lifts 3px and blurs out, incoming rises 4px and sharpens, and the box springs to the new width. Shared by Button, Field messages and toasts.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/text-swap/text-swap.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/text-swap/text-swap.tsx" } ] }, { "name": "field-demo", "type": "registry:example", "title": "Field demo", "description": "A sign-up form on Base UI Form: submit focuses the first invalid field and a server error routes to its field.", "registryDependencies": [ "https://eased.dev/r/field.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json", "https://eased.dev/r/input.json" ], "files": [ { "path": "src/registry/eased/field/field-demo.tsx", "type": "registry:example", "target": "@components/eased/field/field-demo.tsx" } ], "dependencies": [ "@base-ui/react" ] }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Form field for React and shadcn: a label, a control and one message line where help text and errors swap in place.", "docs": "Import Field from components/eased/field/field and put an Input, Textarea or Search Field inside. The Eased tokens were merged into your global CSS; nothing to import.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-field.json" ], "files": [ { "path": "src/registry/eased/field/field.tsx", "type": "registry:ui", "target": "@components/eased/field/field.tsx" } ], "meta": { "details": "A label, a control and one message line on Base UI Field, where the description and the error swap in place with y + blur. Inside Base UI's Form, submitting focuses the first invalid field." } }, { "name": "input-demo", "type": "registry:example", "title": "Input demo", "description": "Workspace settings with a URL prefix, live validation and a disabled field.", "registryDependencies": [ "https://eased.dev/r/input.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/field.json" ], "files": [ { "path": "src/registry/eased/input/input-demo.tsx", "type": "registry:example", "target": "@components/eased/input/input-demo.tsx" } ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Text input for React and shadcn on Base UI, with leading and trailing addons and an error state that shakes once.", "docs": "Import Input from components/eased/input/input; wrap it in Field for a label and messages. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-field.json" ], "files": [ { "path": "src/registry/eased/input/input.tsx", "type": "registry:ui", "target": "@components/eased/input/input.tsx" } ], "meta": { "details": "A Base UI text input whose focus firms the border and grows a soft glow. An error shakes it once, 6px, then the field's message opens with a height spring. Leading and trailing addons." } }, { "name": "kbd-demo", "type": "registry:example", "title": "Kbd demo", "description": "A keyboard shortcuts list whose keycaps press and rows light up as you hold the real keys.", "registryDependencies": [ "https://eased.dev/r/kbd.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/kbd/kbd-demo.tsx", "type": "registry:example", "target": "@components/eased/kbd/kbd-demo.tsx" } ] }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Keyboard shortcut keycap (kbd) for React and shadcn that presses down while the real key is held.", "docs": "Import Kbd and useKeysHeld from components/eased/kbd/kbd. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/kbd/kbd.tsx", "type": "registry:ui", "target": "@components/eased/kbd/kbd.tsx" } ], "meta": { "details": "A keycap that presses down when the real key does: the face drops 1px onto its base and springs back on release. Glyphs are announced by name; useKeysHeld lights up whatever a chord belongs to." } }, { "name": "number-roll-demo", "type": "registry:example", "title": "Number Roll demo", "description": "A revenue card: switch the range or the number format and every figure rolls; live orders tick the total up.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/number-roll.json", "https://eased.dev/r/badge.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/number-roll/number-roll-demo.tsx", "type": "registry:example", "target": "@components/eased/number-roll/number-roll-demo.tsx" } ] }, { "name": "number-roll", "type": "registry:ui", "title": "Number Roll", "description": "Animated number counter for React and shadcn: each digit rolls to its new value, formatted for the user's locale.", "docs": "Import NumberRoll from components/eased/number-roll/number-roll. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/number-roll/number-roll.tsx", "type": "registry:ui", "target": "@components/eased/number-roll/number-roll.tsx" } ], "meta": { "details": "Tabular digits that roll in the direction of change, formatted with Intl.NumberFormat for any locale. A 9 → 0 carry rolls forward, a value that changes mid-roll redirects, and new places fade in while the rest slide over." } }, { "name": "popover-demo", "type": "registry:example", "title": "Popover demo", "description": "A Share popover with an invite field, people with access and a concentric footer.", "registryDependencies": [ "https://eased.dev/r/popover.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/button.json", "https://eased.dev/r/input.json", "https://eased.dev/r/text-swap.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/popover/popover-demo.tsx", "type": "registry:example", "target": "@components/eased/popover/popover-demo.tsx" } ] }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Animated popover for React and shadcn that grows out of its trigger, moves focus inside and closes on Esc, built on Base UI.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/popover/popover.tsx", "type": "registry:ui", "target": "@components/eased/popover/popover.tsx" } ], "meta": { "details": "A panel that opens from its trigger's transform-origin with a 5px directional offset, closes at half the distance in 150ms, and reverses mid-flight. Its trigger presses by colour, never by scale." } }, { "name": "progress-demo", "type": "registry:example", "title": "Progress demo", "description": "An upload list: uneven chunks, an indeterminate processing step, then complete; plus a storage meter.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/progress.json", "https://eased.dev/r/spinner.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json", "https://eased.dev/r/number-roll.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/progress/progress-demo.tsx", "type": "registry:example", "target": "@components/eased/progress/progress-demo.tsx" } ] }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Animated progress bar for React and shadcn on Base UI, with a spring-driven bar, a rolling value and an indeterminate sweep.", "docs": "Import Progress from components/eased/progress/progress. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion", "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/progress/progress.tsx", "type": "registry:ui", "target": "@components/eased/progress/progress.tsx" } ], "meta": { "details": "A progress bar on Base UI Progress: the bar rides a spring that never overshoots, and its value rolls. An unknown length sweeps on an accelerate–decelerate curve and hands over to the bar the moment a value arrives." } }, { "name": "progressive-blur-demo", "type": "registry:example", "title": "Progressive Blur demo", "description": "A music library whose header and mini player blur the covers scrolling under them, with a flat-blur comparison.", "registryDependencies": [ "https://eased.dev/r/progressive-blur.json", "https://eased.dev/r/scroll-area.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/progressive-blur/progressive-blur-demo.tsx", "type": "registry:example", "target": "@components/eased/progressive-blur/progressive-blur-demo.tsx" } ] }, { "name": "progressive-blur", "type": "registry:ui", "title": "Progressive Blur", "description": "Progressive blur for React and shadcn: a backdrop blur that ramps up to 20px toward an edge, under sticky headers, bottom bars and composers.", "docs": "Import ProgressiveBlur from components/eased/progressive-blur/progressive-blur. Place it over the scroller in a positioned parent, never inside it, and keep opacity, filter and mask off its ancestors.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-scroll-fade.json" ], "files": [ { "path": "src/registry/eased/progressive-blur/progressive-blur.tsx", "type": "registry:ui", "target": "@components/eased/progressive-blur/progressive-blur.tsx" } ], "meta": { "details": "A blur that ramps from 0 to 20px over 80px toward an edge, from stacked masked backdrop layers, for headers, bottom bars and composers. Optionally scroll-linked so it appears only once content is underneath." } }, { "name": "radio-group-demo", "type": "registry:example", "title": "Radio Group demo", "description": "A checkout delivery step: speed as radio cards, drop-off as radios that depend on it.", "registryDependencies": [ "https://eased.dev/r/radio-group.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/radio-group/radio-group-demo.tsx", "type": "registry:example", "target": "@components/eased/radio-group/radio-group-demo.tsx" } ] }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Radio group for React and shadcn, with plain radios or selectable cards whose selected border travels between them.", "docs": "Import RadioGroup, Radio, RadioCards and RadioCard from components/eased/radio-group/radio-group. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-indicator.json" ], "files": [ { "path": "src/registry/eased/radio-group/radio-group.tsx", "type": "registry:ui", "target": "@components/eased/radio-group/radio-group.tsx" } ], "meta": { "details": "Radios whose dot scales out from the centre on a snappy spring, and radio cards whose selected border travels between cards. Base UI RadioGroup behaviour." } }, { "name": "scroll-area-demo", "type": "registry:example", "title": "Scroll Area demo", "description": "An activity feed with a horizontally scrolling filter row and a vertical list.", "registryDependencies": [ "https://eased.dev/r/scroll-area.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/toggle-group.json" ], "files": [ { "path": "src/registry/eased/scroll-area/scroll-area-demo.tsx", "type": "registry:example", "target": "@components/eased/scroll-area/scroll-area-demo.tsx" } ] }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "Custom scrollbar for React and shadcn: a thin overlay bar on a native scroller, with edge fades only where more remains.", "docs": "Import ScrollArea from components/eased/scroll-area/scroll-area. Size it with className; give it an aria-label. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-scroll-fade.json" ], "files": [ { "path": "src/registry/eased/scroll-area/scroll-area.tsx", "type": "registry:ui", "target": "@components/eased/scroll-area/scroll-area.tsx" } ], "meta": { "details": "A native scroller with a thin themed overlay scrollbar that thickens under the pointer, and edge fades that appear only when there is more to scroll. Base UI Scroll Area underneath." } }, { "name": "segmented-demo", "type": "registry:example", "title": "Segmented demo", "description": "A traffic card: a metric switch in the header and a date-range control that redraws the chart.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/badge.json", "https://eased.dev/r/number-roll.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/segmented/segmented-demo.tsx", "type": "registry:example", "target": "@components/eased/segmented/segmented-demo.tsx" } ] }, { "name": "segmented", "type": "registry:ui", "title": "Segmented", "description": "Segmented control for React and shadcn: a thumb glides to the chosen option, with radio semantics that submit with a form.", "docs": "Import Segmented from components/eased/segmented/segmented. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-indicator.json" ], "files": [ { "path": "src/registry/eased/segmented/segmented.tsx", "type": "registry:ui", "target": "@components/eased/segmented/segmented.tsx" } ], "meta": { "details": "A single-choice segmented control whose thumb glides to the selection on a spring. Base UI RadioGroup behaviour, concentric thumb, labels that never change weight." } }, { "name": "skeleton-demo", "type": "registry:example", "title": "Skeleton demo", "description": "An activity feed that loads behind skeletons shaped by its own content, then hands off without moving a pixel.", "registryDependencies": [ "https://eased.dev/r/skeleton.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/skeleton/skeleton-demo.tsx", "type": "registry:example", "target": "@components/eased/skeleton/skeleton-demo.tsx" } ] }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Skeleton loader for React and shadcn: every placeholder on the page shares one shimmer, and the real content fades in in place.", "docs": "Import Skeleton and SkeletonText from components/eased/skeleton/skeleton. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/skeleton/skeleton.tsx", "type": "registry:ui", "target": "@components/eased/skeleton/skeleton.tsx" } ], "meta": { "details": "Loading placeholders with one page-wide shimmer: every skeleton shares a highlight and a phase, so a single band sweeps across them all. Wrap the real content and it hands off in place, fading in from a soft blur." } }, { "name": "spinner-demo", "type": "registry:example", "title": "Spinner demo", "description": "A deploy that walks its steps, each spinner swapping to a check, with the size scale underneath.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/spinner.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/button.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/spinner/spinner-demo.tsx", "type": "registry:example", "target": "@components/eased/spinner/spinner-demo.tsx" } ] }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "Loading spinner for React and shadcn: a CSS arc that keeps turning while the main thread is busy and announces itself to screen readers.", "docs": "Import Spinner from components/eased/spinner/spinner. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/spinner/spinner.tsx", "type": "registry:ui", "target": "@components/eased/spinner/spinner.tsx" } ], "dependencies": [ "motion" ], "meta": { "details": "A loading spinner that turns on the compositor, so it keeps spinning while the main thread is busy, and announces itself unless visible text already does. A quarter arc on a faint ring, the eased.dev status-badge mark; it pauses off-screen and freezes under reduced motion." } }, { "name": "tabs-demo", "type": "registry:example", "title": "Tabs demo", "description": "A project page with Overview, Activity, Members and Settings tabs of different heights.", "registryDependencies": [ "https://eased.dev/r/tabs.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/tabs/tabs-demo.tsx", "type": "registry:example", "target": "@components/eased/tabs/tabs-demo.tsx" } ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Animated tabs for React and shadcn: an underline or pill indicator glides to the active tab and panels cross-fade.", "docs": "Import Tabs, TabsList, Tab, TabsPanels and TabsPanel from components/eased/tabs/tabs. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion", "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-indicator.json", "https://eased.dev/r/eased-auto-height.json" ], "files": [ { "path": "src/registry/eased/tabs/tabs.tsx", "type": "registry:ui", "target": "@components/eased/tabs/tabs.tsx" } ], "meta": { "details": "Tabs with a gliding indicator (underline or pill) and panels that cross-fade 6px in the direction of travel while their container's height springs. Base UI Tabs behaviour." } }, { "name": "text-swap-demo", "type": "registry:example", "title": "Text Swap demo", "description": "An order tracker, a billing toggle and a copy button, each changing text with Text Swap.", "registryDependencies": [ "https://eased.dev/r/text-swap.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/text-swap/text-swap-demo.tsx", "type": "registry:example", "target": "@components/eased/text-swap/text-swap-demo.tsx" } ] }, { "name": "text-swap", "type": "registry:ui", "title": "Text Swap", "description": "Animated text change for React and shadcn: a label or value swaps with a lift and blur while the width springs to fit.", "docs": "Import TextSwap from components/eased/text-swap/text-swap. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/text-swap/text-swap.tsx", "type": "registry:ui", "target": "@components/eased/text-swap/text-swap.tsx" } ], "meta": { "details": "Change a label, status or short value with y + blur, and spring the width to fit, so neighbours glide instead of jumping. Direction-aware for counts and steps." } }, { "name": "textarea-demo", "type": "registry:example", "title": "Textarea demo", "description": "A support reply that springs open as you write, with a rolling counter.", "registryDependencies": [ "https://eased.dev/r/textarea.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json", "https://eased.dev/r/field.json", "https://eased.dev/r/avatar.json" ], "files": [ { "path": "src/registry/eased/textarea/textarea-demo.tsx", "type": "registry:example", "target": "@components/eased/textarea/textarea-demo.tsx" } ] }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Auto-resizing textarea for React and shadcn: it grows with its text on a spring, with a character counter whose digits roll.", "docs": "Import Textarea from components/eased/textarea/textarea; wrap it in Field for a label and messages. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/textarea/textarea.tsx", "type": "registry:ui", "target": "@components/eased/textarea/textarea.tsx" } ], "meta": { "details": "A textarea that grows with its text on a smooth height spring instead of jumping a line at a time. The character counter rolls its digits and turns warning-coloured at 90%." } }, { "name": "toggle-group-demo", "type": "registry:example", "title": "Toggle Group demo", "description": "An editor toolbar: bold, italic, underline and strikethrough (multiple) beside text alignment (single).", "registryDependencies": [ "https://eased.dev/r/toggle-group.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/toggle-group/toggle-group-demo.tsx", "type": "registry:example", "target": "@components/eased/toggle-group/toggle-group-demo.tsx" } ] }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "Toggle button group for React and shadcn, single or multiple selection, for toolbars like bold, italic and underline.", "docs": "Import ToggleGroup and ToggleGroupItem from components/eased/toggle-group/toggle-group. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion", "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-indicator.json" ], "files": [ { "path": "src/registry/eased/toggle-group/toggle-group.tsx", "type": "registry:ui", "target": "@components/eased/toggle-group/toggle-group.tsx" } ], "meta": { "details": "Toggle buttons sharing one highlight: it travels between items in single mode, and pressed neighbours fuse into one shape in multiple mode. Base UI ToggleGroup behaviour." } }, { "name": "tooltip-demo", "type": "registry:example", "title": "Tooltip demo", "description": "An editor toolbar whose tooltips form one delay group, with keyboard shortcuts.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/tooltip.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/tooltip/tooltip-demo.tsx", "type": "registry:example", "target": "@components/eased/tooltip/tooltip-demo.tsx" } ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "Animated tooltip for React and shadcn with an optional keyboard shortcut; after the first, neighbours open instantly.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/kbd.json" ], "files": [ { "path": "src/registry/eased/tooltip/tooltip.tsx", "type": "registry:ui", "target": "@components/eased/tooltip/tooltip.tsx" } ], "meta": { "details": "A short label that waits 400ms for the first trigger, then follows the pointer instantly across its neighbours. Enters 3px toward its trigger, shows an optional shortcut, never appears on touch." } }, { "name": "cells-demo", "type": "registry:example", "title": "Cells kit demo", "description": "An accounts table: advance a month and MRR rolls, deltas recolour, onboarding meters glide, and active accounts breathe.", "registryDependencies": [ "https://eased.dev/r/cells.json", "https://eased.dev/r/table.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/cells/cells-demo.tsx", "type": "registry:example", "target": "@components/eased/cells/cells-demo.tsx" } ] }, { "name": "cells", "type": "registry:ui", "title": "Cells kit", "description": "Table cells for React and shadcn: avatars with names, status badges, rolling numbers with coloured deltas, progress meters, times and IDs.", "docs": "Import PersonCell, StatusCell, DeltaCell, ProgressCell, RelativeTimeCell and IdCell from components/eased/cells/cells. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-table-core.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/badge.json" ], "files": [ { "path": "src/registry/eased/cells/cells.tsx", "type": "registry:ui", "target": "@components/eased/cells/cells.tsx" } ], "meta": { "details": "Table cells that make rows look finished: avatar with name, status badge, number with a rolling value and coloured delta, a progress meter that fills on view, a self-updating relative time, and a mono ID with a copy button." } }, { "name": "eased-table-core", "type": "registry:ui", "title": "Table core primitive", "description": "The layer under every Eased table: a TanStack Table v9 feature set with typed column meta, hairline rules, dense and comfortable densities, a hover-revealed sort button, a semantic table renderer, and two motion hooks: useRowFlip (rows glide to a new order) and useSelectionStagger (a range selection lights up row by row).", "dependencies": [ "@tanstack/react-table", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/table-core/table-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/table-core/table-core.tsx" } ] }, { "name": "table-demo", "type": "registry:example", "title": "Table demo", "description": "An invoices table with mono IDs you can copy, avatars, status badges, amounts and relative dates, with a density toggle.", "registryDependencies": [ "https://eased.dev/r/table.json", "https://eased.dev/r/cells.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/table/table-demo.tsx", "type": "registry:example", "target": "@components/eased/table/table-demo.tsx" } ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Data table for React and shadcn on TanStack Table, with half-pixel row rules, a sticky header and 36px or 48px rows.", "docs": "Import Table and easedColumns from components/eased/table/table. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "@tanstack/react-table" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-table-core.json" ], "files": [ { "path": "src/registry/eased/table/table.tsx", "type": "registry:ui", "target": "@components/eased/table/table.tsx" } ], "meta": { "details": "A hairline table on TanStack Table: half-pixel row rules, a quiet sentence-case header, numbers right-aligned on one edge, one emphasised cell per row, a sticky header, and dense or comfortable rows." } }, { "name": "attachment-demo", "type": "registry:example", "title": "Attachment Chip demo", "description": "A message draft with an upload in flight, a finished deck and a failed CSV with Retry.", "registryDependencies": [ "https://eased.dev/r/attachment.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/attachment/attachment-demo.tsx", "type": "registry:example", "target": "@components/eased/attachment/attachment-demo.tsx" } ] }, { "name": "attachment", "type": "registry:ui", "title": "Attachment Chip", "description": "File attachment chip for React and shadcn: image thumbnails sharpen as they load, a ring tracks the upload, and failures offer Retry.", "docs": "Import AttachmentChip and AttachmentList from components/eased/attachment/attachment-chip. Pair with useAttachments from components/eased/_primitives/chat-core/chat-core.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-chat-core.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/attachment/attachment-chip.tsx", "type": "registry:ui", "target": "@components/eased/attachment/attachment-chip.tsx" } ], "meta": { "details": "A chat attachment: images as a thumbnail that sharpens from a blur once decoded, files as a typed chip. Upload progress is a ring that springs between reports; a failure shakes once and offers Retry; removing one lets its neighbours slide into the gap." } }, { "name": "composer-demo", "type": "registry:example", "title": "Composer demo", "description": "A working mini chat: send, attach, stop mid-reply, scroll up while it streams.", "registryDependencies": [ "https://eased.dev/r/composer.json", "https://eased.dev/r/message.json", "https://eased.dev/r/attachment-demo.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/composer/composer-demo.tsx", "type": "registry:example", "target": "@components/eased/composer/composer-demo.tsx" } ] }, { "name": "composer", "type": "registry:ui", "title": "Composer", "description": "AI chat input for React and shadcn: the box grows as you type, files drop or paste in, and Send morphs into Stop while a reply streams.", "docs": "Import Composer from components/eased/composer/composer. With AI SDK: const { composer } = fromUseChat(useChat()); .", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-chat-core.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/eased-auto-height.json", "https://eased.dev/r/eased-scroll-fade.json", "https://eased.dev/r/attachment.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/composer/composer.tsx", "type": "registry:ui", "target": "@components/eased/composer/composer.tsx" } ], "meta": { "details": "A chat composer that grows on a spring, opens an attachments row with Auto Height, and morphs its Send arrow into a Stop square while a reply streams. Enter sends, Shift+Enter breaks the line, Escape stops; files can be picked, dropped or pasted. Wires straight into AI SDK useChat." } }, { "name": "eased-chat-core", "type": "registry:ui", "title": "Chat core primitive", "description": "The chat model and hooks behind Eased's chat components: AI SDK UIMessage-compatible types, useStickToBottom, message grouping, the attachment model with useAttachments, composer key handling with slash/mention triggers, and a useChat adapter.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/chat-core/chat-core.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/chat-core.ts" }, { "path": "src/registry/eased/_primitives/chat-core/types.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/types.ts" }, { "path": "src/registry/eased/_primitives/chat-core/group-messages.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/group-messages.ts" }, { "path": "src/registry/eased/_primitives/chat-core/attachments.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/attachments.ts" }, { "path": "src/registry/eased/_primitives/chat-core/composer-keys.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/composer-keys.ts" }, { "path": "src/registry/eased/_primitives/chat-core/use-stick-to-bottom.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/use-stick-to-bottom.ts" }, { "path": "src/registry/eased/_primitives/chat-core/use-chat-adapter.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/use-chat-adapter.ts" }, { "path": "src/registry/eased/_primitives/chat-core/use-autosize.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chat-core/use-autosize.ts" } ] }, { "name": "message-demo", "type": "registry:example", "title": "Message demo", "description": "Follow-ups that merge into one run of bubbles, corners tightening as each lands.", "registryDependencies": [ "https://eased.dev/r/message.json", "https://eased.dev/r/attachment-demo.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/message/message-demo.tsx", "type": "registry:example", "target": "@components/eased/message/message-demo.tsx" } ] }, { "name": "message", "type": "registry:ui", "title": "Message", "description": "Chat message bubble for React and shadcn that renders AI SDK messages, tightening the corners where consecutive bubbles meet.", "docs": "Import Message, MessageAction and CopyAction from components/eased/message/message. Group with groupMessages from chat-core.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-chat-core.json", "https://eased.dev/r/attachment.json" ], "files": [ { "path": "src/registry/eased/message/message.tsx", "type": "registry:ui", "target": "@components/eased/message/message.tsx" } ], "meta": { "details": "A chat message: the user's in a sunken bubble on the right, the assistant's flush on the left. Consecutive bubbles from one author merge, their touching corners tightening as the next one lands. Renders AI SDK UIMessage text and file parts." } }, { "name": "eased-thinking-core", "type": "registry:ui", "title": "Thinking Core primitive", "description": "The clocks, models and contracts behind Eased's thinking states: useElapsed (seconds on the start's own grid), useTokenRate (a smoothed stream rate as motion values), useStatusCarousel, the step model, and the frozen StepStatus and ToolState types with an AI SDK tool-part adapter.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/_primitives/thinking-core/thinking-core.ts", "type": "registry:ui", "target": "@components/eased/_primitives/thinking-core/thinking-core.ts" }, { "path": "src/registry/eased/_primitives/thinking-core/types.ts", "type": "registry:ui", "target": "@components/eased/_primitives/thinking-core/types.ts" }, { "path": "src/registry/eased/_primitives/thinking-core/steps.ts", "type": "registry:ui", "target": "@components/eased/_primitives/thinking-core/steps.ts" }, { "path": "src/registry/eased/_primitives/thinking-core/use-elapsed.ts", "type": "registry:ui", "target": "@components/eased/_primitives/thinking-core/use-elapsed.ts" }, { "path": "src/registry/eased/_primitives/thinking-core/use-token-rate.ts", "type": "registry:ui", "target": "@components/eased/_primitives/thinking-core/use-token-rate.ts" }, { "path": "src/registry/eased/_primitives/thinking-core/use-status-carousel.ts", "type": "registry:ui", "target": "@components/eased/_primitives/thinking-core/use-status-carousel.ts" } ] }, { "name": "shimmer-text-demo", "type": "registry:example", "title": "Shimmer Text demo", "description": "An agent's activity: a research status rotating mid-sweep, and a task list whose running row shimmers and settles as each task finishes.", "registryDependencies": [ "https://eased.dev/r/shimmer-text.json", "https://eased.dev/r/eased-thinking-core.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json", "https://eased.dev/r/spinner.json" ], "files": [ { "path": "src/registry/eased/shimmer-text/shimmer-text-demo.tsx", "type": "registry:example", "target": "@components/eased/shimmer-text/shimmer-text-demo.tsx" } ] }, { "name": "shimmer-text", "type": "registry:ui", "title": "Shimmer Text", "description": "Shimmer text effect for React and shadcn: a band of light sweeps a loading label, in one phase shared by every shimmer on the page.", "docs": "Import ShimmerText from components/eased/shimmer-text/shimmer-text. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/shimmer-text/shimmer-text.tsx", "type": "registry:ui", "target": "@components/eased/shimmer-text/shimmer-text.tsx" } ], "meta": { "details": "Shimmer text for React: a soft band of light sweeps across a label while something is working. Every shimmer on the page shares one phase, status changes swap in without restarting the band, and turning it off fades the band out in place." } }, { "name": "thinking-bar-demo", "type": "registry:example", "title": "Thinking Bar demo", "description": "A billing question: the assistant thinks for six seconds with its reasoning streaming in, then answers while the bar settles to \"Thought for 6s\" and folds away.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/thinking-bar.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/thinking-bar/thinking-bar-demo.tsx", "type": "registry:example", "target": "@components/eased/thinking-bar/thinking-bar-demo.tsx" } ] }, { "name": "thinking-bar", "type": "registry:ui", "title": "Thinking Bar", "description": "AI reasoning indicator for React and shadcn: \"Thinking 4s\" counts up while the model reasons, then reads \"Thought for 12s\" and folds away.", "docs": "Import ThinkingBar from components/eased/thinking-bar/thinking-bar. Drive status from your reasoning stream; pass the reasoning as children.", "dependencies": [ "motion", "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-auto-height.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-thinking-core.json", "https://eased.dev/r/shimmer-text.json" ], "files": [ { "path": "src/registry/eased/thinking-bar/thinking-bar.tsx", "type": "registry:ui", "target": "@components/eased/thinking-bar/thinking-bar.tsx" } ], "meta": { "details": "The line above a reasoning model's answer: the label shimmers while a seconds counter rolls, then \"Thinking\" morphs into \"Thought for 12s\" and the reasoning folds away a second after the answer starts." } }, { "name": "agent-orb-demo", "type": "registry:example", "title": "Agent Orb demo", "description": "A voice assistant: switch between idle, listening, thinking and speaking; speaking streams a reply in bursts and the orb speeds up and slows with the token rate.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/agent-orb.json", "https://eased.dev/r/eased-thinking-core.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/shimmer-text.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/agent-orb/agent-orb-demo.tsx", "type": "registry:example", "target": "@components/eased/agent-orb/agent-orb-demo.tsx" } ] }, { "name": "agent-orb", "type": "registry:ui", "title": "Agent Orb", "description": "AI agent orb for React and shadcn showing idle, listening, thinking or speaking, with a swirl that speeds up with the token rate.", "docs": "Import AgentOrb from components/eased/agent-orb/agent-orb. Feed rate from useTokenRate (eased-thinking-core) to tie its speed to your stream.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/agent-orb/agent-orb.tsx", "type": "registry:ui", "target": "@components/eased/agent-orb/agent-orb.tsx" } ], "meta": { "details": "A small living orb for an assistant's state: colour fields drift inside a glassy sphere and it breathes, idle, listening, thinking or speaking, with its speed tied to the token rate so it keeps pace with the stream." } }, { "name": "eased-chart-core", "type": "registry:ui", "title": "Chart core primitive", "description": "The engine under every Eased chart: nice scales, container sizing, path morphs on shared x samples, keyed arc layouts and morphs, a sequential colour scale, rolling value labels with collision-aware placement, a slider-model scrub with a trailing tooltip, sliding gridlines, a hidden data table, ChartRangeContext and the validated --eased-chart-1…6 palette.", "dependencies": [ "motion", "d3-scale", "d3-shape" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/_primitives/chart-core/scales.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/scales.ts" }, { "path": "src/registry/eased/_primitives/chart-core/use-chart-size.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/use-chart-size.ts" }, { "path": "src/registry/eased/_primitives/chart-core/morph.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/morph.ts" }, { "path": "src/registry/eased/_primitives/chart-core/scrub.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/scrub.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/grid.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/grid.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/legend.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/legend.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/data-table.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/data-table.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/draw-in.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/draw-in.ts" }, { "path": "src/registry/eased/_primitives/chart-core/range.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/range.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/tokens.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/tokens.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/polar.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/polar.ts" }, { "path": "src/registry/eased/_primitives/chart-core/value-label.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/value-label.tsx" }, { "path": "src/registry/eased/_primitives/chart-core/sequential.ts", "type": "registry:ui", "target": "@components/eased/_primitives/chart-core/sequential.ts" } ] }, { "name": "eased-layout", "type": "registry:lib", "title": "Eased layout", "description": "Alignment recipes for repeating rows: rowGrid and rowGridRow share a leading, a flexible and a fixed trailing track, so every row's role or value starts on one x.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/lib/layout.ts", "type": "registry:lib", "target": "@components/eased/lib/layout.ts" } ] }, { "name": "sparkline-demo", "type": "registry:example", "title": "Sparkline demo", "description": "A product-health card: a scrubbable daily-active-users line over four metric rows, all morphing with the range.", "registryDependencies": [ "https://eased.dev/r/sparkline.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/number-roll.json" ], "files": [ { "path": "src/registry/eased/sparkline/sparkline-demo.tsx", "type": "registry:example", "target": "@components/eased/sparkline/sparkline-demo.tsx" } ] }, { "name": "sparkline", "type": "registry:ui", "title": "Sparkline", "description": "Sparkline chart for React and shadcn: a word-sized line that draws in once and morphs to new values, with an optional scrub readout.", "docs": "Import Sparkline from components/eased/sparkline/sparkline. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-chart-core.json" ], "files": [ { "path": "src/registry/eased/sparkline/sparkline.tsx", "type": "registry:ui", "target": "@components/eased/sparkline/sparkline.tsx" } ], "meta": { "details": "A word-sized line chart that draws in once, rings its newest point in the surface colour and morphs to new values from the shape on screen. Optional scrub readout." } }, { "name": "code-block-demo", "type": "registry:example", "title": "Code Block demo", "description": "A docs excerpt: a 34-line debounce hook with line numbers and highlighted lines, collapsed after 12.", "registryDependencies": [ "https://eased.dev/r/code-block.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/code-block/code-block-demo.tsx", "type": "registry:example", "target": "@components/eased/code-block/code-block-demo.tsx" } ] }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "Code block for React and shadcn with Shiki syntax highlighting, a copy button, line highlights and long blocks that collapse under a blur.", "docs": "Import CodeBlock from components/eased/code-block/code-block. Grammars load on demand; pass `tokens` from highlight() (components/eased/_primitives/code-core/highlighter) on the server for a first paint that is already coloured. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion", "shiki" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-code-core.json" ], "files": [ { "path": "src/registry/eased/code-block/code-block.tsx", "type": "registry:ui", "target": "@components/eased/code-block/code-block.tsx" } ], "meta": { "details": "Shiki-highlighted code in warm stone and cream themes, with a file title bar and language pill, a copy button that morphs into a check while \"Copied\" slides out, highlighted and focused lines, and long blocks that collapse under a progressive blur with \"Show 22 more lines\"." } }, { "name": "code-tabs-demo", "type": "registry:example", "title": "Code Tabs demo", "description": "An install block synced across package managers, then three files of different heights and languages.", "registryDependencies": [ "https://eased.dev/r/code-tabs.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/code-tabs/code-tabs-demo.tsx", "type": "registry:example", "target": "@components/eased/code-tabs/code-tabs-demo.tsx" } ] }, { "name": "code-tabs", "type": "registry:ui", "title": "Code Tabs", "description": "Code tabs for React and shadcn: several files or one install command per package manager, with the pnpm or npm choice synced across the page.", "docs": "Import CodeTabs, packageManagerItems and packageCommand from components/eased/code-tabs/code-tabs. Use groupId=\"package-manager\" on install blocks so pnpm/npm/yarn/bun stays in sync across the page.", "dependencies": [ "motion", "@base-ui/react", "shiki" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-code-core.json", "https://eased.dev/r/tabs.json" ], "files": [ { "path": "src/registry/eased/code-tabs/code-tabs.tsx", "type": "registry:ui", "target": "@components/eased/code-tabs/code-tabs.tsx" } ], "meta": { "details": "Several files, or one command per package manager, in one code block: the underline glides between tabs, the code cross-fades 6px in the direction of travel while the height springs, and with a groupId every block on the page switches together and remembers the choice." } }, { "name": "eased-code-core", "type": "registry:ui", "title": "Code core primitive", "description": "The engine behind Eased code components: a lazily loaded Shiki singleton (shiki/core + the JavaScript regex engine, grammars for tsx, ts, js, jsx, json, css, bash, html, md, python and diff loaded on demand), the eased-stone (dark) and eased-cream (light) themes, light/dark token lines rendered with CSS light-dark(), the line decoration model (highlight, focus, added, removed, plus the DiffHunk contract), the copy → check morph, collapse-after under a progressive blur, and a page-wide synced choice store.", "dependencies": [ "motion", "shiki" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-copy.json", "https://eased.dev/r/eased-auto-height.json", "https://eased.dev/r/progressive-blur.json" ], "files": [ { "path": "src/registry/eased/_primitives/code-core/highlighter.ts", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/highlighter.ts" }, { "path": "src/registry/eased/_primitives/code-core/themes.ts", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/themes.ts" }, { "path": "src/registry/eased/_primitives/code-core/lines.ts", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/lines.ts" }, { "path": "src/registry/eased/_primitives/code-core/choice.ts", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/choice.ts" }, { "path": "src/registry/eased/_primitives/code-core/copy.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/copy.tsx" }, { "path": "src/registry/eased/_primitives/code-core/code-lines.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/code-lines.tsx" }, { "path": "src/registry/eased/_primitives/code-core/code-chrome.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/code-core/code-chrome.tsx" } ] }, { "name": "snippet-demo", "type": "registry:example", "title": "Snippet demo", "description": "An install card: a package-manager switch drives two commands, plus a long git clone that scrolls under edge fades.", "registryDependencies": [ "https://eased.dev/r/snippet.json", "https://eased.dev/r/code-tabs.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/snippet/snippet-demo.tsx", "type": "registry:example", "target": "@components/eased/snippet/snippet-demo.tsx" } ] }, { "name": "snippet", "type": "registry:ui", "title": "Snippet", "description": "Copyable command snippet for React and shadcn: one shell line with a $ prompt that is never copied, and a copy button that turns into a check.", "docs": "Import Snippet from components/eased/snippet/snippet. Pair it with useChoice(\"package-manager\") from code-core and packageCommand from code-tabs to follow the reader's package manager.", "dependencies": [ "motion", "shiki" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-code-core.json" ], "files": [ { "path": "src/registry/eased/snippet/snippet.tsx", "type": "registry:ui", "target": "@components/eased/snippet/snippet.tsx" } ], "meta": { "details": "A copyable command snippet: one line with a $ prompt and a copy button that morphs into a check. When the command changes (pnpm ↔ npm) the text swaps and the width springs, so the copy button glides instead of jumping." } }, { "name": "eased-skill", "type": "registry:item", "title": "Eased design skill", "description": "The design skill Eased is built with, as an agent skill: alignment, the 1:2 spacing ratio, concentric radii, springs per role, enter and exit, focus rings, reduced motion, and how to install and compose Eased components.", "docs": "Installed to .claude/skills/eased/SKILL.md, where Claude Code loads it on demand. For Cursor, copy it to .cursor/rules/eased.mdc; for Codex and other agents, reference it from AGENTS.md.", "files": [ { "path": "src/registry/eased/eased-skill/SKILL.md", "type": "registry:file", "target": "~/.claude/skills/eased/SKILL.md" } ] }, { "name": "eased-mac", "type": "registry:lib", "title": "Eased Mac", "description": "The macOS look the Mac pack shares: the San Francisco font stack, frosted popover and HUD materials in light and dark, hairlines and macOS corner radii, with a native mode that leaves vibrancy to a Tauri or Electron window and a hook that follows the system appearance there.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/lib/mac.ts", "type": "registry:lib", "target": "@components/eased/lib/mac.ts" } ] }, { "name": "mac-hud-demo", "type": "registry:example", "title": "Mac HUD demo", "description": "A small macOS desktop with media keys: nudge volume, brightness and keyboard backlight (hold to repeat, or use the arrow keys) and switch between the classic and pill HUD.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/mac-hud.json", "https://eased.dev/r/eased-mac-desktop.json", "https://eased.dev/r/button.json", "https://eased.dev/r/segmented.json" ], "files": [ { "path": "src/registry/eased/mac-hud/mac-hud-demo.tsx", "type": "registry:example", "target": "@components/eased/mac-hud/mac-hud-demo.tsx" } ] }, { "name": "mac-hud", "type": "registry:ui", "title": "Mac HUD", "description": "macOS volume and brightness HUD for React and shadcn, square or macOS 26 pill, updating in place and holding 1.1s after each change.", "docs": "Import MacHud and useMacHud from components/eased/mac-hud/mac-hud. The Eased tokens were merged into your global CSS; nothing to import. Call show(kind, value) from useMacHud() and spread hud onto . Dark mode follows .dark or data-theme=\"dark\". In a Tauri or Electron HUD window with native vibrancy, pass material=\"native\" and position=\"none\", hide the window in onExitComplete, keep html and body transparent, and call useSystemAppearance() from components/eased/lib/mac so dark follows the system.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-mac.json" ], "files": [ { "path": "src/registry/eased/mac-hud/mac-hud.tsx", "type": "registry:ui", "target": "@components/eased/mac-hud/mac-hud.tsx" } ], "meta": { "details": "The macOS volume and brightness overlay: a frosted, click-through HUD in the classic 200×200 square or the macOS 26 pill. Repeat changes update it in place and restart its 1.1s hold; it never replays its entrance." } }, { "name": "mac-menu-popover-demo", "type": "registry:example", "title": "Mac menu popover demo", "description": "A menu bar usage tracker: session and weekly plan usage, a reset countdown and app actions, over a frosted desktop.", "registryDependencies": [ "https://eased.dev/r/mac-menu-popover.json", "https://eased.dev/r/eased-mac.json", "https://eased.dev/r/eased-mac-desktop.json" ], "files": [ { "path": "src/registry/eased/mac-menu-popover/mac-menu-popover-demo.tsx", "type": "registry:example", "target": "@components/eased/mac-menu-popover/mac-menu-popover-demo.tsx" } ] }, { "name": "mac-menu-popover", "type": "registry:ui", "title": "Mac menu popover", "description": "macOS menu bar popover for React and shadcn, for Tauri and Electron apps: the panel grows from its arrow tip and reverses mid-flight.", "docs": "Import MacMenuPopover, MacStatusItem, MacMenuPopoverContent, MacMenuItem and MacMenuSeparator from components/eased/mac-menu-popover/mac-menu-popover. The Eased tokens were merged into your global CSS; nothing to import. Put MacStatusItem (with a label) and MacMenuPopoverContent inside MacMenuPopover, and wrap rows that should close the panel in MacMenuPopoverClose. Dark mode follows .dark or data-theme=\"dark\". In a Tauri or Electron tray window, render MacMenuPanel instead; it defaults to material=\"native\" (a CSS blur cannot see the desktop there). Keep html and body transparent and call useSystemAppearance() from components/eased/lib/mac so dark follows the system.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-mac.json", "https://eased.dev/r/eased-floating.json" ], "files": [ { "path": "src/registry/eased/mac-menu-popover/mac-menu-popover.tsx", "type": "registry:ui", "target": "@components/eased/mac-menu-popover/mac-menu-popover.tsx" } ], "meta": { "details": "A macOS menu bar popover: a status item and a frosted panel whose arrow and panel are one shape, so one blur and one hairline follow the arrow. It grows from the arrow tip, reverses mid-flight, and drops its CSS blur for native Tauri or Electron vibrancy." } }, { "name": "eased-mac-desktop", "type": "registry:component", "title": "Mac desktop", "description": "The small macOS screen the Mac pack demos share: a soft wallpaper with a few files, a translucent menu bar with the app's menus, status items, Wi-Fi, battery and clock.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-mac.json" ], "files": [ { "path": "src/registry/eased/lib/mac-desktop.tsx", "type": "registry:component", "target": "@components/eased/lib/mac-desktop.tsx" } ] }, { "name": "eased-inertia-core", "type": "registry:ui", "title": "Inertia core", "description": "useInertia: hand a MotionValue the release velocity and it coasts with UIScrollView friction onto the snap point the flick would reach (points, a step or a function), inside bounds, as a spring or iOS-style decay. Plus the pure inertiaTarget and resolveSnap.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-gesture.json" ], "files": [ { "path": "src/registry/eased/_primitives/inertia-core/use-inertia.ts", "type": "registry:ui", "target": "@components/eased/_primitives/inertia-core/use-inertia.ts" } ] }, { "name": "image-compare-demo", "type": "registry:example", "title": "Image Compare demo", "description": "Plain vs Eased: the same share card as a default kit draws it and as Eased does, with a Loading mode that compares the skeleton with the loaded card.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/image-compare.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/button.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/skeleton.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/image-compare/image-compare-demo.tsx", "type": "registry:example", "target": "@components/eased/image-compare/image-compare-demo.tsx" } ] }, { "name": "image-compare", "type": "registry:ui", "title": "Image Compare", "description": "Before and after image comparison slider for React and shadcn: drag the divider, flick it to 0, 50 or 100, or move it by keyboard.", "docs": "Import ImageCompare from components/eased/image-compare/image-compare. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-gesture.json", "https://eased.dev/r/eased-inertia-core.json" ], "files": [ { "path": "src/registry/eased/image-compare/image-compare.tsx", "type": "registry:ui", "target": "@components/eased/image-compare/image-compare.tsx" } ], "meta": { "details": "Compare any two layers (screenshots, themes, a plain component and its polished twin) with one divider. A flick coasts to 0, 50 or 100, a slow release stays where it lands, the tags fade as the line passes under them, and the knob is a keyboard slider.", "industries": [ "saas", "devtools", "media", "real-estate", "ecommerce", "education" ], "releaseAt": "2026-10-20" } }, { "name": "like-button-demo", "type": "registry:example", "title": "Like Button demo", "description": "A changelog post with replies: like it for the burst while other readers keep the count rolling.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/like-button.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-layout.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/like-button/like-button-demo.tsx", "type": "registry:example", "target": "@components/eased/like-button/like-button-demo.tsx" } ] }, { "name": "like-button", "type": "registry:ui", "title": "Like Button", "description": "Animated like button for React and shadcn: the heart pops with a burst of sparks, and the optimistic count reverts if saving fails.", "docs": "Import LikeButton from components/eased/like-button/like-button. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/like-button/like-button.tsx", "type": "registry:ui", "target": "@components/eased/like-button/like-button.tsx" } ], "meta": { "details": "A heart that pops to 1.25 with a ring and eight sparks when liked, deflates quietly when unliked, and rolls its count. Optimistic: it flips at once and rolls back if onLikedChange rejects.", "industries": [ "media", "ecommerce", "education", "saas", "travel" ], "releaseAt": "2026-10-26" } }, { "name": "eased-calendar-core", "type": "registry:lib", "title": "Calendar core primitive", "description": "Month, week and day grids, click-click and drag range selection over days or time slots with disabled units and length limits, WAI-ARIA grid keyboard movement, timed-item placement with overlap columns, and availability maths (free time, everyone-free overlap, slot starts). Native Date helpers with date-fns names.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/_primitives/calendar-core/availability.ts", "type": "registry:lib", "target": "@components/eased/_primitives/calendar-core/availability.ts" }, { "path": "src/registry/eased/_primitives/calendar-core/calendar-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/calendar-core/calendar-core.ts" }, { "path": "src/registry/eased/_primitives/calendar-core/dates.ts", "type": "registry:lib", "target": "@components/eased/_primitives/calendar-core/dates.ts" }, { "path": "src/registry/eased/_primitives/calendar-core/grid.ts", "type": "registry:lib", "target": "@components/eased/_primitives/calendar-core/grid.ts" }, { "path": "src/registry/eased/_primitives/calendar-core/range.ts", "type": "registry:lib", "target": "@components/eased/_primitives/calendar-core/range.ts" } ] }, { "name": "eased-doc-core", "type": "registry:lib", "title": "Doc core primitive", "description": "Documents for contract review and docs: a paragraph/clause model with numbering and a text parser, word redlines on the diff package grouped into accept-or-reject changes, block-level version diffs, DiffHunk-shaped line hunks, and durable text anchors for comments and AI suggestions that survive edits.", "dependencies": [ "diff" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/_primitives/doc-core/anchors.ts", "type": "registry:lib", "target": "@components/eased/_primitives/doc-core/anchors.ts" }, { "path": "src/registry/eased/_primitives/doc-core/doc-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/doc-core/doc-core.ts" }, { "path": "src/registry/eased/_primitives/doc-core/redline.ts", "type": "registry:lib", "target": "@components/eased/_primitives/doc-core/redline.ts" }, { "path": "src/registry/eased/_primitives/doc-core/types.ts", "type": "registry:lib", "target": "@components/eased/_primitives/doc-core/types.ts" } ] }, { "name": "eased-fixtures", "type": "registry:lib", "title": "Industry fixtures", "description": "Realistic, deterministic sample data per industry (AI, devtools, finance, crypto, SaaS, legal, e-commerce, real estate, health, HR), seeded and anchored to a fixed now, with Intl formatters. One file per industry, typed with the Eased cores.", "dependencies": [ "diff" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-thinking-core.json", "https://eased.dev/r/eased-flow-core.json", "https://eased.dev/r/eased-timeline-core.json", "https://eased.dev/r/eased-calendar-core.json", "https://eased.dev/r/eased-doc-core.json", "https://eased.dev/r/eased-realtime-core.json" ], "files": [ { "path": "src/registry/eased/_primitives/fixtures/ai.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/ai.ts" }, { "path": "src/registry/eased/_primitives/fixtures/ai-approvals.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/ai-approvals.ts" }, { "path": "src/registry/eased/_primitives/fixtures/crypto.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/crypto.ts" }, { "path": "src/registry/eased/_primitives/fixtures/devtools.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/devtools.ts" }, { "path": "src/registry/eased/_primitives/fixtures/ecommerce.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/ecommerce.ts" }, { "path": "src/registry/eased/_primitives/fixtures/finance.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/finance.ts" }, { "path": "src/registry/eased/_primitives/fixtures/health.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/health.ts" }, { "path": "src/registry/eased/_primitives/fixtures/hr.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/hr.ts" }, { "path": "src/registry/eased/_primitives/fixtures/legal.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/legal.ts" }, { "path": "src/registry/eased/_primitives/fixtures/real-estate.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/real-estate.ts" }, { "path": "src/registry/eased/_primitives/fixtures/saas.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/saas.ts" }, { "path": "src/registry/eased/_primitives/fixtures/shared.ts", "type": "registry:lib", "target": "@components/eased/_primitives/fixtures/shared.ts" } ] }, { "name": "eased-flow-core", "type": "registry:lib", "title": "Flow core primitive", "description": "Node/edge graphs for CI pipelines, agent runs, payment routes and approval flows: a typed graph on thinking-core's StepStatus, a small-DAG auto layout (ranks, crossing reduction, curve or step edges), fitView, status propagation with stepFlow, and edges drawn on pathLength with useEdgeProgress and FlowEdgePath.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-thinking-core.json" ], "files": [ { "path": "src/registry/eased/_primitives/flow-core/edge-progress.tsx", "type": "registry:lib", "target": "@components/eased/_primitives/flow-core/edge-progress.tsx" }, { "path": "src/registry/eased/_primitives/flow-core/flow-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/flow-core/flow-core.ts" }, { "path": "src/registry/eased/_primitives/flow-core/layout.ts", "type": "registry:lib", "target": "@components/eased/_primitives/flow-core/layout.ts" }, { "path": "src/registry/eased/_primitives/flow-core/status.ts", "type": "registry:lib", "target": "@components/eased/_primitives/flow-core/status.ts" }, { "path": "src/registry/eased/_primitives/flow-core/types.ts", "type": "registry:lib", "target": "@components/eased/_primitives/flow-core/types.ts" } ] }, { "name": "eased-realtime-core", "type": "registry:lib", "title": "Realtime core primitive", "description": "Deterministic live data: a seeded RNG and tick stream (prices, rates, vitals), useClock and useTicker that pause off-screen and in hidden tabs and slow under reduced motion, flash-on-change state, OHLC candles on chart-core scales, and an order-book depth model with a synthetic churning book.", "dependencies": [ "motion", "d3-scale" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-chart-core.json" ], "files": [ { "path": "src/registry/eased/_primitives/realtime-core/candles.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/candles.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/clock.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/clock.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/flash.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/flash.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/orderbook.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/orderbook.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/realtime-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/realtime-core.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/rng.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/rng.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/stream.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/stream.ts" }, { "path": "src/registry/eased/_primitives/realtime-core/use-ticker.ts", "type": "registry:lib", "target": "@components/eased/_primitives/realtime-core/use-ticker.ts" } ] }, { "name": "eased-timeline-core", "type": "registry:lib", "title": "Timeline core primitive", "description": "Events and timelines for matter histories, ledgers, deploy logs and activity feeds: a typed event model, Intl day grouping (Today, Yesterday, weekday), relative time on a shared hydration-safe clock, live append with a once-only capped enter stagger, and lane packing with a time axis for span timelines.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-thinking-core.json" ], "files": [ { "path": "src/registry/eased/_primitives/timeline-core/group.ts", "type": "registry:lib", "target": "@components/eased/_primitives/timeline-core/group.ts" }, { "path": "src/registry/eased/_primitives/timeline-core/lanes.ts", "type": "registry:lib", "target": "@components/eased/_primitives/timeline-core/lanes.ts" }, { "path": "src/registry/eased/_primitives/timeline-core/live.ts", "type": "registry:lib", "target": "@components/eased/_primitives/timeline-core/live.ts" }, { "path": "src/registry/eased/_primitives/timeline-core/relative.ts", "type": "registry:lib", "target": "@components/eased/_primitives/timeline-core/relative.ts" }, { "path": "src/registry/eased/_primitives/timeline-core/timeline-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/timeline-core/timeline-core.ts" }, { "path": "src/registry/eased/_primitives/timeline-core/types.ts", "type": "registry:lib", "target": "@components/eased/_primitives/timeline-core/types.ts" } ] }, { "name": "alert-demo", "type": "registry:example", "title": "Alert demo", "description": "Billing: a failed payment that retries into a success, and a note you can dismiss.", "registryDependencies": [ "https://eased.dev/r/alert.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/alert/alert-demo.tsx", "type": "registry:example", "target": "@components/eased/alert/alert-demo.tsx" } ] }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Inline alert for React and shadcn for info, success, warning and error messages, with optional actions and a dismiss button.", "docs": "Import Alert from components/eased/alert/alert. Props: tone (neutral, info, success, warning, danger), title, children, icon, actions, onDismiss, open, role, innerClassName. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-auto-height.json" ], "files": [ { "path": "src/registry/eased/alert/alert.tsx", "type": "registry:ui", "target": "@components/eased/alert/alert.tsx" } ], "meta": { "details": "An inline callout for context, success, warnings and errors. It springs open and closed on its own height, and when the tone changes the tint cross-fades and the icon swaps.", "industries": [ "ai", "devtools", "finance", "crypto", "saas", "legal", "ecommerce", "real-estate", "health", "hr", "education", "travel", "media" ], "releaseAt": "2026-10-21" } }, { "name": "checkbox-demo", "type": "registry:example", "title": "Checkbox demo", "description": "An export dialog: All columns follows the columns below it.", "registryDependencies": [ "https://eased.dev/r/checkbox.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/checkbox/checkbox-demo.tsx", "type": "registry:example", "target": "@components/eased/checkbox/checkbox-demo.tsx" } ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Animated checkbox for React and shadcn: the check draws itself and morphs into a dash for indeterminate parent checkboxes.", "docs": "Import Checkbox and CheckboxGroup from components/eased/checkbox/checkbox. Checkbox: checked, defaultChecked, onCheckedChange, indeterminate, parent, value, name, disabled, children (label), description. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/checkbox/checkbox.tsx", "type": "registry:ui", "target": "@components/eased/checkbox/checkbox.tsx" } ], "meta": { "details": "A Base UI checkbox whose check draws itself and morphs into the indeterminate dash. The box presses in and springs back, and a parent checkbox fills, dashes and clears with its group.", "industries": [ "ai", "devtools", "finance", "crypto", "saas", "legal", "ecommerce", "real-estate", "health", "hr", "education", "travel", "media" ], "releaseAt": "2026-10-21" } }, { "name": "eased-overlay-core", "type": "registry:ui", "title": "Overlay core", "description": "What every Eased overlay shares: panel, menu and modal surfaces, the blurred scrim, menu rows on shared tracks with a gliding highlight, a drawn check and shortcut glyphs, and one motion table from tooltip to toast. Dialog, Sheet, menus, Select, Combobox, Toast and Command Palette are built on it.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-indicator.json" ], "files": [ { "path": "src/registry/eased/_primitives/overlay-core/overlay-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/overlay-core/overlay-core.tsx" } ] }, { "name": "heading-demo", "type": "registry:example", "title": "Heading demo", "description": "A type scale from 48 to 16px, each size with its own weight and tracking.", "registryDependencies": [ "https://eased.dev/r/heading.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/heading/heading-demo.tsx", "type": "registry:example", "target": "@components/eased/heading/heading-demo.tsx" } ] }, { "name": "heading", "type": "registry:ui", "title": "Heading", "description": "Heading component for React and shadcn: size, weight, tracking and leading set together from 16 to 60px, separate from the h1–h6 level.", "docs": "Import Heading from components/eased/heading/heading. Props: level (1–6), size (md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl), tone. The text-display-* sizes come from the Eased tokens. The Eased tokens were merged into your global CSS; nothing to import.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/heading/heading.tsx", "type": "registry:ui", "target": "@components/eased/heading/heading.tsx" } ], "meta": { "details": "A heading whose size, weight, tracking and leading are bound together. Level sets the outline and size sets the look, from 16 to 60px, with display tracking from 36px.", "industries": [ "ai", "devtools", "finance", "crypto", "saas", "legal", "ecommerce", "real-estate", "health", "hr", "education", "travel", "media" ], "releaseAt": "2026-10-23" } }, { "name": "prose-demo", "type": "registry:example", "title": "Prose demo", "description": "Release notes that switch between chat and document density.", "registryDependencies": [ "https://eased.dev/r/prose.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/segmented.json" ], "files": [ { "path": "src/registry/eased/prose/prose-demo.tsx", "type": "registry:example", "target": "@components/eased/prose/prose-demo.tsx" } ] }, { "name": "prose", "type": "registry:ui", "title": "Prose", "description": "Prose typography for rendered markdown in React and shadcn, with a chat density for AI replies and a document density for long reads.", "docs": "Import Prose (and Code) from components/eased/prose/prose. Wrap any rendered markdown or HTML: {content}. Styles stay inside the container. The Eased tokens were merged into your global CSS; nothing to import.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/prose/prose.tsx", "type": "registry:ui", "target": "@components/eased/prose/prose.tsx" } ], "meta": { "details": "Typography for rendered markdown and rich text, from one element map in two densities: chat for replies and document for long reads. Display headings, hairline tables and footnotes.", "industries": [ "ai", "devtools", "saas", "legal", "education", "media", "health", "finance" ], "releaseAt": "2026-10-23" } }, { "name": "slider-demo", "type": "registry:example", "title": "Slider demo", "description": "Usage limits: a spend cap, a price range and an alert threshold.", "registryDependencies": [ "https://eased.dev/r/slider.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/slider/slider-demo.tsx", "type": "registry:example", "target": "@components/eased/slider/slider-demo.tsx" } ] }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Range slider for React and shadcn, single or two-thumb, with a value readout whose digits roll as it steps.", "docs": "Import Slider from components/eased/slider/slider. Props: value or defaultValue (a number, or two for a range), onValueChange, onValueCommitted, min, max, step, largeStep, format, locale, label, showValue, disabled. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/slider/slider.tsx", "type": "registry:ui", "target": "@components/eased/slider/slider.tsx" } ], "meta": { "details": "A Base UI slider, single or range, whose thumb swells while held and whose readout's digits roll when the value steps. While dragging, the readout follows the finger exactly.", "industries": [ "saas", "finance", "crypto", "ecommerce", "real-estate", "travel", "media", "ai", "health" ], "releaseAt": "2026-10-21" } }, { "name": "switch-demo", "type": "registry:example", "title": "Switch demo", "description": "Notification settings with switches on one right edge.", "registryDependencies": [ "https://eased.dev/r/switch.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/switch/switch-demo.tsx", "type": "registry:example", "target": "@components/eased/switch/switch-demo.tsx" } ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "Toggle switch for React and shadcn: the thumb stretches toward where it is going, and a label turns it into a settings row.", "docs": "Import Switch from components/eased/switch/switch. Props: checked, defaultChecked, onCheckedChange, name, value, disabled, required, children (label), description. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/switch/switch.tsx", "type": "registry:ui", "target": "@components/eased/switch/switch.tsx" } ], "meta": { "details": "A Base UI switch whose thumb springs across and, while pressed, stretches toward where it is going. With a label it becomes a settings row whose whole label toggles it.", "industries": [ "ai", "devtools", "finance", "crypto", "saas", "legal", "ecommerce", "real-estate", "health", "hr", "education", "travel", "media" ], "releaseAt": "2026-10-21" } }, { "name": "dialog-demo", "type": "registry:example", "title": "Dialog demo", "description": "API keys: a create-key dialog whose Cancel asks in a nested alert dialog, and a revoke alert dialog per key.", "registryDependencies": [ "https://eased.dev/r/dialog.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json", "https://eased.dev/r/input.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/dialog/dialog-demo.tsx", "type": "registry:example", "target": "@components/eased/dialog/dialog-demo.tsx" } ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Modal dialog for React and shadcn, with confirm (alert) dialogs and nested dialogs, built on Base UI.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/dialog/dialog.tsx", "type": "registry:ui", "target": "@components/eased/dialog/dialog.tsx" } ], "meta": { "details": "A modal dialog and alert dialog on Base UI that rise 8px at 0.96 on a spring over a blurred scrim and leave 4px in 160ms. Nested dialogs step their parent back; alert dialogs answer an outside click with a 1.5% bump.", "industries": [ "saas", "devtools", "finance", "legal", "hr" ], "releaseAt": "2026-10-21" } }, { "name": "command-palette-demo", "type": "registry:example", "title": "Command Palette demo", "description": "An issue tracker header whose search trigger (and ⌘K, while the demo is on screen) opens a palette of suggestions, navigation, theme and team commands.", "registryDependencies": [ "https://eased.dev/r/command-palette.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/command-palette/command-palette-demo.tsx", "type": "registry:example", "target": "@components/eased/command-palette/command-palette-demo.tsx" } ] }, { "name": "command-palette", "type": "registry:ui", "title": "Command Palette", "description": "Command palette for React and shadcn: ⌘K opens it at once, commands filter as you type, and Enter runs the first match.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/eased-scroll-fade.json", "https://eased.dev/r/kbd.json" ], "files": [ { "path": "src/registry/eased/command-palette/command-palette.tsx", "type": "registry:ui", "target": "@components/eased/command-palette/command-palette.tsx" } ], "meta": { "details": "A ⌘K command palette that rises 8px at 0.96 on a spring when clicked open and appears instantly from the hotkey, then leaves 4px in 160ms. Enter runs the first match.", "industries": [ "saas", "devtools", "ai", "legal" ], "releaseAt": "2026-10-21" } }, { "name": "context-menu-demo", "type": "registry:example", "title": "Context Menu demo", "description": "A grid of brand assets: right-click or press and hold a file to open, duplicate, tag, star or move it to Trash with undo.", "registryDependencies": [ "https://eased.dev/r/context-menu.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/context-menu/context-menu-demo.tsx", "type": "registry:example", "target": "@components/eased/context-menu/context-menu-demo.tsx" } ] }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "Right-click context menu for React and shadcn on Base UI: it opens at the pointer, or on a 500ms long press on touch, with submenus.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/dropdown-menu.json" ], "files": [ { "path": "src/registry/eased/context-menu/context-menu.tsx", "type": "registry:ui", "target": "@components/eased/context-menu/context-menu.tsx" } ], "meta": { "details": "A right-click and long-press menu that appears at the cursor with no enter animation and fades out in 100ms. Its rows are Dropdown Menu's: gliding highlight, blink on select, submenus.", "industries": [ "devtools", "media", "saas" ], "releaseAt": "2026-10-21" } }, { "name": "dropdown-menu-demo", "type": "registry:example", "title": "Dropdown Menu demo", "description": "A document's options menu: duplicate, rename, a Move to submenu, copy link, Show completed, Sort by and a danger Delete with undo.", "registryDependencies": [ "https://eased.dev/r/dropdown-menu.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/button.json", "https://eased.dev/r/input.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/dropdown-menu/dropdown-menu-demo.tsx", "type": "registry:example", "target": "@components/eased/dropdown-menu/dropdown-menu-demo.tsx" } ] }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "Dropdown menu for React and shadcn: one highlight glides between rows, and a chosen row blinks before the menu closes, as on macOS.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/dropdown-menu/dropdown-menu.tsx", "type": "registry:ui", "target": "@components/eased/dropdown-menu/dropdown-menu.tsx" } ], "meta": { "details": "A menu that opens on mousedown 4px from its trigger, with one highlight gliding between rows and a macOS blink before it closes. Checkbox and radio rows, shortcuts and submenus share three aligned tracks.", "industries": [ "saas", "devtools", "legal", "hr" ], "releaseAt": "2026-10-18" } }, { "name": "sheet-demo", "type": "registry:example", "title": "Sheet demo", "description": "An orders list whose Filters open a right sheet (a bottom sheet on phones) with a nested Ship to sheet, and each order opens a bottom sheet.", "registryDependencies": [ "https://eased.dev/r/sheet.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/badge.json", "https://eased.dev/r/button.json", "https://eased.dev/r/checkbox.json", "https://eased.dev/r/radio-group.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/switch.json", "https://eased.dev/r/toggle-group.json", "https://eased.dev/r/eased-layout.json" ], "files": [ { "path": "src/registry/eased/sheet/sheet-demo.tsx", "type": "registry:example", "target": "@components/eased/sheet/sheet-demo.tsx" } ] }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "Sheet and side drawer for React and shadcn on Base UI Drawer: swipe to dismiss, and side sheets become bottom sheets under 640px.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/eased-scroll-fade.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/sheet/sheet.tsx", "type": "registry:ui", "target": "@components/eased/sheet/sheet.tsx" } ], "meta": { "details": "A sheet on Base UI Drawer that slides in from its edge in 500ms and leaves faster the harder it is flicked, the scrim fading with the swipe. Under 640px side sheets become bottom sheets; nested sheets step their parent back.", "industries": [ "saas", "ecommerce", "real-estate", "travel" ], "releaseAt": "2026-10-21" } }, { "name": "combobox-demo", "type": "registry:example", "title": "Combobox demo", "description": "A pull request's sidebar: a repository combobox, reviewers with avatars in grouped teams, and colour-dotted labels as chips.", "registryDependencies": [ "https://eased.dev/r/combobox.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json" ], "files": [ { "path": "src/registry/eased/combobox/combobox-demo.tsx", "type": "registry:example", "target": "@components/eased/combobox/combobox-demo.tsx" } ] }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Searchable select (combobox) for React and shadcn, with filtering, a clear button and multi-select chips, on Base UI.", "docs": "Import Combobox from components/eased/combobox/combobox; pass items as { value, label } objects (flat or grouped), add multiple for chips, and wrap it in Field for a label. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/spinner.json" ], "files": [ { "path": "src/registry/eased/combobox/combobox.tsx", "type": "registry:ui", "target": "@components/eased/combobox/combobox.tsx" } ], "meta": { "details": "A filterable select whose list drops 4px from the field, whose clear button pops in, and whose chips pop in from 0.9 on the snappy spring and leave fast.", "industries": [ "saas", "devtools", "hr", "ecommerce" ], "releaseAt": "2026-10-21" } }, { "name": "select-demo", "type": "registry:example", "title": "Select demo", "description": "Workspace settings: a grouped data-region select, a timezone list that scrolls, and a fixed-width role select per member.", "registryDependencies": [ "https://eased.dev/r/select.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/eased-fixtures.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-layout.json", "https://eased.dev/r/avatar.json" ], "files": [ { "path": "src/registry/eased/select/select-demo.tsx", "type": "registry:example", "target": "@components/eased/select/select-demo.tsx" } ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Select dropdown for React and shadcn that opens with the chosen option over its trigger, like a macOS pop-up button.", "docs": "Import Select from components/eased/select/select; pass items (flat or grouped) or compose SelectItem children, and wrap it in Field for a label. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-field.json" ], "files": [ { "path": "src/registry/eased/select/select.tsx", "type": "registry:ui", "target": "@components/eased/select/select.tsx" } ], "meta": { "details": "A select that opens with the chosen row over its trigger and grows from that row, or drops 4px below on touch. The highlight glides on the snappy spring.", "industries": [ "saas", "finance", "hr", "health" ], "releaseAt": "2026-10-21" } }, { "name": "toast-demo", "type": "registry:example", "title": "Toast demo", "description": "A project screen whose Deploy, Move to Done and Retry buttons fire a promise toast, an Undo toast and an error toast into the frame.", "registryDependencies": [ "https://eased.dev/r/toast.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-layout.json", "https://eased.dev/r/button.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/toast/toast-demo.tsx", "type": "registry:example", "target": "@components/eased/toast/toast-demo.tsx" } ] }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Toast notifications for React and shadcn: toasts stack behind the newest, fan out on hover and pause their timers, with an Undo action.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-overlay-core.json", "https://eased.dev/r/button.json", "https://eased.dev/r/spinner.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/toast/toast.tsx", "type": "registry:ui", "target": "@components/eased/toast/toast.tsx" } ], "meta": { "details": "A toast stack on Base UI Toast: toasts rise 12px on the smooth spring and stack behind the newest, each peeking 10px and 5% smaller. Hover fans them out and pauses every timer. Promise toasts morph from spinner to check in place.", "industries": [ "saas", "devtools", "ecommerce", "finance" ], "releaseAt": "2026-10-21" } }, { "name": "eased-crypto-core", "type": "registry:ui", "title": "Crypto core primitive", "description": "Shared pieces for Eased crypto blocks: a monochrome token glyph, chain tints as tokens with a ≤10% glow, address truncation, and USD price, token amount and signed change formats.", "dependencies": [], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json" ], "files": [ { "path": "src/registry/eased/_primitives/crypto-core/crypto-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/crypto-core/crypto-core.tsx" } ] }, { "name": "eased-copy", "type": "registry:ui", "title": "Copy primitive", "description": "The copy → check morph: a clipboard write with a textarea fallback, a useCopy hook that holds the copied state for 1.6s, the copy icon that swaps to a check with a blur, and the CopyButton built on them. Shared by the code components, Wallet Card and Connect Wallet.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/_primitives/copy/copy.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/copy/copy.tsx" } ] }, { "name": "eased-hold-core", "type": "registry:ui", "title": "Hold Core primitive", "description": "Hold-to-confirm: a time-true linear fill while the pointer, Space or Enter is held, a quick no-overshoot drain when let go early, and a button that reveals its label on brand as the hold runs. Shared by Approval Card and PR Review.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/_primitives/hold-core/hold-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/hold-core/hold-core.tsx" } ] }, { "name": "breadcrumb-demo", "type": "registry:example", "title": "Breadcrumb demo", "description": "A file browser five folders deep: open folders to grow the trail, click a crumb or the … menu to climb back.", "dependencies": [], "registryDependencies": [ "https://eased.dev/r/breadcrumb.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/breadcrumb/breadcrumb-demo.tsx", "type": "registry:example", "target": "@components/eased/breadcrumb/breadcrumb-demo.tsx" } ] }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Animated breadcrumb for React and shadcn that folds the middle crumbs into a menu when the trail runs out of room.", "docs": "Import Breadcrumb from components/eased/breadcrumb/breadcrumb. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/dropdown-menu.json", "https://eased.dev/r/eased-floating.json" ], "files": [ { "path": "src/registry/eased/breadcrumb/breadcrumb.tsx", "type": "registry:ui", "target": "@components/eased/breadcrumb/breadcrumb.tsx" } ], "meta": { "details": "A trail from the root to the current page that folds its middle crumbs into a menu when it runs out of room, measured rather than guessed. Links underline on hover.", "industries": [ "saas", "devtools", "legal", "ecommerce", "education" ] } }, { "name": "pagination-demo", "type": "registry:example", "title": "Pagination demo", "description": "An invoices list whose footer pages through 64 invoices, numbered in a wide tile and compact in a narrow one.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/pagination.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/pagination/pagination-demo.tsx", "type": "registry:example", "target": "@components/eased/pagination/pagination-demo.tsx" } ] }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Animated pagination for React and shadcn: the selected page chip glides on a spring, and the width never changes as you page.", "docs": "Import Pagination from components/eased/pagination/pagination. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-indicator.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/pagination/pagination.tsx", "type": "registry:ui", "target": "@components/eased/pagination/pagination.tsx" } ], "meta": { "details": "Numbered pages whose selected chip glides on a spring, with ellipses in a fixed number of slots so the width never changes. There is also a compact Page 3 of 12 variant.", "industries": [ "saas", "finance", "ecommerce", "legal", "hr" ] } }, { "name": "rating-demo", "type": "registry:example", "title": "Rating demo", "description": "A recipe's reviews: an average with a count that rolls when you rate, a large rating with a word that follows the pointer, and recent reviews.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/rating.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/rating/rating-demo.tsx", "type": "registry:example", "target": "@components/eased/rating/rating-demo.tsx" } ] }, { "name": "rating", "type": "registry:ui", "title": "Rating", "description": "Star rating for React and shadcn on Base UI RadioGroup, with hover preview, half stars and a read-only mode for any fraction.", "docs": "Import Rating from components/eased/rating/rating. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/rating/rating.tsx", "type": "registry:ui", "target": "@components/eased/rating/rating.tsx" } ], "meta": { "details": "Star rating on Base UI RadioGroup with a hover preview, half steps and a read-only mode for any fraction. Icons fill from the left and pop in turn on a spring.", "industries": [ "ecommerce", "travel", "health", "education", "media" ] } }, { "name": "carousel-demo", "type": "registry:example", "title": "Carousel demo", "description": "Customer stories for a finance product, one metric and quote per slide.", "registryDependencies": [ "https://eased.dev/r/carousel.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/carousel/carousel-demo.tsx", "type": "registry:example", "target": "@components/eased/carousel/carousel-demo.tsx" } ] }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "Carousel for React and shadcn on native scroll snapping, with mouse drag, arrow keys and a dot that stretches between pages.", "docs": "Import Carousel from components/eased/carousel/carousel. Set --carousel-inset on a parent to inset the slides and footer. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-gesture.json", "https://eased.dev/r/eased-scroll-fade.json" ], "files": [ { "path": "src/registry/eased/carousel/carousel.tsx", "type": "registry:ui", "target": "@components/eased/carousel/carousel.tsx" } ], "meta": { "details": "A scroll-snap carousel with native momentum, mouse drag and arrow keys. Its dot stretches between pages as you scroll and its edges fade only where there is more.", "industries": [ "saas", "ecommerce", "media", "real-estate", "finance" ] } }, { "name": "file-upload-demo", "type": "registry:example", "title": "File Upload demo", "description": "Lease documents with a simulated upload: one file is too large, one drops its connection once.", "registryDependencies": [ "https://eased.dev/r/file-upload.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-scroll-fade.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/file-upload/file-upload-demo.tsx", "type": "registry:example", "target": "@components/eased/file-upload/file-upload-demo.tsx" } ] }, { "name": "file-upload", "type": "registry:ui", "title": "File Upload", "description": "Drag and drop file upload for React and shadcn: the dropzone wakes when files cross the page, with per-file progress and retry.", "docs": "Import FileUpload and useFileUpload from components/eased/file-upload/file-upload. Pass an upload function to report progress; the network call is yours. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-auto-height.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/file-upload/file-upload.tsx", "type": "registry:ui", "target": "@components/eased/file-upload/file-upload.tsx" } ], "meta": { "details": "A dropzone that wakes when files cross the page and lifts as they reach it. Rows rise in with per-file progress on a spring, and refused files are explained inline.", "industries": [ "saas", "legal", "real-estate", "hr", "health" ] } }, { "name": "tree-demo", "type": "registry:example", "title": "Tree demo", "description": "A Next.js repository with git status markers and the selected path in the footer.", "registryDependencies": [ "https://eased.dev/r/tree.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/tree/tree-demo.tsx", "type": "registry:example", "target": "@components/eased/tree/tree-demo.tsx" } ] }, { "name": "tree", "type": "registry:ui", "title": "Tree", "description": "React file tree for shadcn: folders spring open, one selection glides between rows, and arrow keys and typeahead follow WAI-ARIA.", "docs": "Import Tree and TreeNode from components/eased/tree/tree. Give it a max height and it scrolls with edge fades. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-auto-height.json", "https://eased.dev/r/eased-indicator.json", "https://eased.dev/r/eased-scroll-fade.json" ], "files": [ { "path": "src/registry/eased/tree/tree.tsx", "type": "registry:ui", "target": "@components/eased/tree/tree.tsx" } ], "meta": { "details": "A file tree whose folders open on a height spring as the chevron turns, both interruptible. One selection glides between rows, guides mark each level, and keys follow WAI-ARIA.", "industries": [ "devtools", "saas", "legal", "ai" ] } }, { "name": "date-picker-demo", "type": "registry:example", "title": "Date Picker demo", "description": "Time off: an away range that can't start in the past, and a typed handover date that must fall before it on a weekday.", "registryDependencies": [ "https://eased.dev/r/date-picker.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/field.json", "https://eased.dev/r/eased-calendar-core.json" ], "files": [ { "path": "src/registry/eased/date-picker/date-picker-demo.tsx", "type": "registry:example", "target": "@components/eased/date-picker/date-picker-demo.tsx" } ] }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "Date picker for React and shadcn with a calendar popover and ranges, reading typed dates such as 24 Oct or tomorrow in the field's locale.", "docs": "Import DatePicker (or Calendar for an inline grid) from components/eased/date-picker/date-picker; wrap it in Field for a label and messages. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/eased-floating.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-calendar-core.json" ], "files": [ { "path": "src/registry/eased/date-picker/date-picker.tsx", "type": "registry:ui", "target": "@components/eased/date-picker/date-picker.tsx" }, { "path": "src/registry/eased/date-picker/calendar.tsx", "type": "registry:ui", "target": "@components/eased/date-picker/calendar.tsx" } ], "meta": { "details": "A date field with a calendar popover on Base UI and calendar-core. Typed dates parse in the field's locale, months slide the way you page, the selection glides between days, and ranges preview as you hover." } }, { "name": "number-field-demo", "type": "registry:example", "title": "Number Field demo", "description": "A limit order: shares with split steppers, a USD limit price and a scrubbable percent stop loss, with a rolling cost summary.", "registryDependencies": [ "https://eased.dev/r/number-field.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/field.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/number-field/number-field-demo.tsx", "type": "registry:example", "target": "@components/eased/number-field/number-field-demo.tsx" } ] }, { "name": "number-field", "type": "registry:ui", "title": "Number Field", "description": "Number input for React and shadcn on Base UI: steppers speed up the longer you hold them, and each step rolls the digits.", "docs": "Import NumberField from components/eased/number-field/number-field; give it a label, or wrap it in Field. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-field.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/number-field/number-field.tsx", "type": "registry:ui", "target": "@components/eased/number-field/number-field.tsx" } ], "meta": { "details": "A number input on Base UI's NumberField with steppers that speed up while held, digits that roll on every step, Intl formatting with a true minus, min, max and step, and an optional scrub label." } }, { "name": "otp-field-demo", "type": "registry:example", "title": "OTP Field demo", "description": "Email verification with a 3-3 code, auto-verify on the last digit, a wrong-code error and a resend countdown.", "registryDependencies": [ "https://eased.dev/r/otp-field.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/field.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/otp-field/otp-field-demo.tsx", "type": "registry:example", "target": "@components/eased/otp-field/otp-field-demo.tsx" } ] }, { "name": "otp-field", "type": "registry:ui", "title": "OTP Field", "description": "OTP input for React and shadcn on Base UI: SMS autofill, password managers and a pasted code fill every cell at once.", "docs": "Import OtpField from components/eased/otp-field/otp-field; wrap it in Field for a label and messages. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-field.json" ], "files": [ { "path": "src/registry/eased/otp-field/otp-field.tsx", "type": "registry:ui", "target": "@components/eased/otp-field/otp-field.tsx" } ], "meta": { "details": "A one-time-code input on Base UI's OTPField: autofill and paste fill every cell, the caret blinks in the empty cell, characters pop in, a wrong code shakes once and an accepted one ripples green." } }, { "name": "eased-commerce-core", "type": "registry:ui", "title": "Commerce core primitive", "description": "Shared pieces for Eased e-commerce blocks: drawn product art, colour swatches, the price line, a rolling quantity stepper, the bag button and money and stock formats.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/_primitives/commerce-core/commerce-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/commerce-core/commerce-core.tsx" } ] }, { "name": "variant-picker-demo", "type": "registry:example", "title": "Variant Picker demo", "description": "The Ridgeline Down Jacket in three colourways, one marked down, with thin stock and a sold-out size.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/variant-picker.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-fixtures.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-commerce-core.json" ], "files": [ { "path": "src/registry/eased/variant-picker/variant-picker-demo.tsx", "type": "registry:example", "target": "@components/eased/variant-picker/variant-picker-demo.tsx" } ] }, { "name": "variant-picker", "type": "registry:ui", "title": "Variant Picker", "description": "Product variant picker for React and shadcn: colour swatches and sizes on Base UI radio groups, with sold-out sizes struck through.", "docs": "Import VariantPicker from components/eased/variant-picker/variant-picker. Pass variants ({ id, color, swatch, size, stock, price, compareAt }) and value/onValueChange; put a Size guide link in sizeGuide.", "dependencies": [ "motion", "@base-ui/react" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json", "https://eased.dev/r/eased-commerce-core.json", "https://eased.dev/r/eased-indicator.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/badge.json" ], "files": [ { "path": "src/registry/eased/variant-picker/variant-picker.tsx", "type": "registry:ui", "target": "@components/eased/variant-picker/variant-picker.tsx" } ], "meta": { "details": "Colour and size for one product: the ring glides between swatches, sold-out sizes strike with a wipe, and the price rolls when the variant's price changes.", "industries": [ "ecommerce" ], "releaseAt": "2026-10-23" } }, { "name": "eased-saas-core", "type": "registry:ui", "title": "SaaS core primitive", "description": "Shared pieces for Eased SaaS-admin blocks: a rolling delta chip that falls in warning, a usage meter that turns warning at 80%, relative times and compact money formats.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-number-roll.json" ], "files": [ { "path": "src/registry/eased/_primitives/saas-core/saas-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/saas-core/saas-core.tsx" } ] }, { "name": "eased-property-core", "type": "registry:ui", "title": "Property core primitive", "description": "Shared pieces for Eased real-estate blocks: CRE units (SF, $/SF, terms, cap rates), lease-expiry status and its tints, the vacancy hatch and an expiry legend.", "dependencies": [], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/property-core/property-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/property-core/property-core.tsx" } ] }, { "name": "eased-hr-core", "type": "registry:ui", "title": "HR core primitive", "description": "Shared pieces for Eased HR and recruiting blocks: the 1–4 interview scale and its labels, four pips that fill to a rating, and the short time-in-stage clock.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/hr-core/hr-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/hr-core/hr-core.tsx" } ] }, { "name": "eased-legal-core", "type": "registry:ui", "title": "Legal core primitive", "description": "Shared pieces for Eased legal blocks: the inline redline, the clause number track, deadline countdown wording, legal date and confidence formats, and the AI mark.", "dependencies": [], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-doc-core.json" ], "files": [ { "path": "src/registry/eased/_primitives/legal-core/legal-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/legal-core/legal-core.tsx" } ] }, { "name": "eased-health-core", "type": "registry:ui", "title": "Health core primitive", "description": "Shared pieces for Eased health blocks: where a value sits against its range, a warning flag that pops in and out, and clinic clock times.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json" ], "files": [ { "path": "src/registry/eased/_primitives/health-core/health-core.tsx", "type": "registry:ui", "target": "@components/eased/_primitives/health-core/health-core.tsx" } ] }, { "name": "area-chart-demo", "type": "registry:example", "title": "Area Chart demo", "description": "Weekly signups against the previous period, with a headline that follows the crosshair and a range switch that morphs the area.", "registryDependencies": [ "https://eased.dev/r/area-chart.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/segmented.json", "https://eased.dev/r/number-roll.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/area-chart/area-chart-demo.tsx", "type": "registry:example", "target": "@components/eased/area-chart/area-chart-demo.tsx" } ] }, { "name": "area-chart", "type": "registry:ui", "title": "Area Chart", "description": "Area chart for React and shadcn that draws in once, morphs to new data while its scale springs, and has a crosshair tooltip.", "docs": "Import AreaChart from components/eased/area-chart/area-chart. Props: data, xKey, series ({ key, label }), compare, label, color, curve, height, format, formatTick, formatX, formatXDetail, onActiveChange. The Eased tokens were merged into your global CSS; nothing to import. Dark mode follows .dark or data-theme=\"dark\".", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-chart-core.json" ], "files": [ { "path": "src/registry/eased/area-chart/area-chart.tsx", "type": "registry:ui", "target": "@components/eased/area-chart/area-chart.tsx" } ], "meta": { "details": "An area chart that draws in once and morphs to new data from the shape on screen while its scale springs. A crosshair glides between points, a tooltip trails it, and an optional dashed line compares a previous period.", "industries": [ "saas", "finance", "ecommerce", "health", "devtools" ], "releaseAt": "2026-10-23" } }, { "name": "card-demo", "type": "registry:example", "title": "Card demo", "description": "A workspace overview: a plan card with an action, a plain stat, two project cards that are links, and an activity card that grows.", "registryDependencies": [ "https://eased.dev/r/card.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/badge.json", "https://eased.dev/r/button.json", "https://eased.dev/r/progress.json" ], "files": [ { "path": "src/registry/eased/card/card-demo.tsx", "type": "registry:example", "target": "@components/eased/card/card-demo.tsx" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Card component for React and shadcn with shadcn's parts and slots, plus a CardLink that makes the whole card one clickable link.", "docs": "Import Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter and CardLink from components/eased/card/card. Card props: size (default, sm), autoHeight. CardTitle and CardLink take render. The Eased tokens were merged into your global CSS; nothing to import.", "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-auto-height.json" ], "files": [ { "path": "src/registry/eased/card/card.tsx", "type": "registry:ui", "target": "@components/eased/card/card.tsx" } ], "meta": { "details": "A card with shadcn's parts and slots, so it swaps straight in. A static card holds still; with a CardLink the whole card lifts, presses and rings as one link, and autoHeight springs its height as content changes.", "industries": [ "ai", "devtools", "finance", "crypto", "saas", "legal", "ecommerce", "real-estate", "health", "hr", "education", "travel", "media" ], "releaseAt": "2026-10-21", "demo": { "height": 600 } } }, { "name": "appointment-scheduler-demo", "type": "registry:example", "title": "Appointment Scheduler demo", "description": "Booking a 20-minute follow-up at Willow Health across three clinicians and the next five weekdays.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/appointment-scheduler.json", "https://eased.dev/r/eased-fixtures.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/appointment-scheduler/appointment-scheduler-demo.tsx", "type": "registry:example", "target": "@components/eased/appointment-scheduler/appointment-scheduler-demo.tsx" } ] }, { "name": "appointment-scheduler", "type": "registry:ui", "title": "Appointment Scheduler", "description": "Appointment booking for React and shadcn: pick a provider, day and time, and the chosen slot lifts into the confirmation card.", "docs": "Import AppointmentScheduler from components/eased/appointment-scheduler/appointment-scheduler. Pass providers, busy intervals per provider, days (midnights), hours ({ start, end, lunch, slotMinutes }), visit and onBook.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-indicator.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-health-core.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/appointment-scheduler/appointment-scheduler.tsx", "type": "registry:ui", "target": "@components/eased/appointment-scheduler/appointment-scheduler.tsx" } ], "meta": { "details": "Book a visit in three choices: provider and day highlights glide, the day's slots re-tint in a ripple, and the picked time lifts out of the grid into the confirmation card before Book morphs to Booked.", "industries": [ "health" ], "primaryIndustry": "health", "kind": "block", "releaseAt": "2026-10-23" } }, { "name": "caption-ticker-demo", "type": "registry:example", "title": "Caption Ticker demo", "description": "Four onboarding captions on their own clock, each with its own timing, lighting the step they describe.", "registryDependencies": [ "https://eased.dev/r/caption-ticker.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/caption-ticker/caption-ticker-demo.tsx", "type": "registry:example", "target": "@components/eased/caption-ticker/caption-ticker-demo.tsx" } ] }, { "name": "caption-ticker", "type": "registry:ui", "title": "Caption Ticker", "description": "An animated caption ticker for React and shadcn, stepping short captions in under a scene one line at a time.", "docs": "Import CaptionTicker from components/eased/caption-ticker/caption-ticker. Give each caption a duration to run it on its own clock, or pass index from a useDemoTimeline step.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-demo-core.json" ], "files": [ { "path": "src/registry/eased/caption-ticker/caption-ticker.tsx", "type": "registry:ui", "target": "@components/eased/caption-ticker/caption-ticker.tsx" } ], "meta": { "details": "Short captions that step in under a scene with Text Swap's motion: the old line lifts and blurs out, the new one rises in, and the width springs to fit. Each line has its own timing, or a scene's timeline drives it; screen readers get every line at once.", "industries": [ "saas", "devtools", "ai" ], "releaseAt": "2026-10-26" } }, { "name": "click-ripple-demo", "type": "registry:example", "title": "Click Ripple demo", "description": "A settings panel where every press rings at the point you click, on the canvas and on the buttons, played once on its own first.", "registryDependencies": [ "https://eased.dev/r/click-ripple.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-core.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/click-ripple/click-ripple-demo.tsx", "type": "registry:example", "target": "@components/eased/click-ripple/click-ripple-demo.tsx" } ] }, { "name": "click-ripple", "type": "registry:ui", "title": "Click Ripple", "description": "An animated click ripple for React and shadcn, a ring that spreads from the exact press point.", "docs": "Import ClickRipple from components/eased/click-ripple/click-ripple and mount it inside any positioned element. It rings at real pointer presses and at Demo Cursor presses inside that element.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-demo-core.json" ], "files": [ { "path": "src/registry/eased/click-ripple/click-ripple.tsx", "type": "registry:ui", "target": "@components/eased/click-ripple/click-ripple.tsx" } ], "meta": { "details": "A press ring for clicks you want seen in demos, recordings and tutorials. A soft disc marks the press, then a 1.5px ring grows from that exact point on the smooth spring and fades. It rings at real presses on its parent and at a Demo Cursor's presses, so a scripted click and a real one look the same.", "industries": [ "saas", "devtools", "ai" ], "releaseAt": "2026-10-26" } }, { "name": "demo-cursor-demo", "type": "registry:example", "title": "Demo Cursor demo", "description": "An attachments panel played by Ama's cursor: it picks up a file, drags it into the drop zone, then glides to Attach and presses it.", "registryDependencies": [ "https://eased.dev/r/demo-cursor.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-core.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/demo-cursor/demo-cursor-demo.tsx", "type": "registry:example", "target": "@components/eased/demo-cursor/demo-cursor-demo.tsx" } ] }, { "name": "demo-cursor", "type": "registry:ui", "title": "Demo Cursor", "description": "An animated demo cursor for React and shadcn, a scripted pointer that glides to real elements and presses them.", "docs": "Import DemoCursor from components/eased/demo-cursor/demo-cursor and useDemoTimeline from components/eased/_primitives/demo-core/demo-core. Put the cursor inside the positioned element that holds the UI; targets are refs or data-demo names inside it.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-text-swap.json", "https://eased.dev/r/eased-demo-core.json" ], "files": [ { "path": "src/registry/eased/demo-cursor/demo-cursor.tsx", "type": "registry:ui", "target": "@components/eased/demo-cursor/demo-cursor.tsx" } ], "meta": { "details": "A pointer for product demos over live UI, not a video. It glides on a spring along a shallow arc to an element by ref or data-demo name, stays on it through resizes, presses it so the element depresses, drags in a straight line, and wears an optional name pill. Under reduced motion it jumps to each target.", "industries": [ "saas", "devtools", "ai" ], "releaseAt": "2026-10-26" } }, { "name": "demo-scene", "type": "registry:example", "title": "Product demo scene", "description": "The Product demo set on one timeline: a cursor presses Deploy, a ripple rings, the label swaps, the build count rolls, a caption steps on and the view pushes in on the live deploy, then it loops.", "registryDependencies": [ "https://eased.dev/r/demo-cursor.json", "https://eased.dev/r/click-ripple.json", "https://eased.dev/r/zoom-spotlight.json", "https://eased.dev/r/caption-ticker.json", "https://eased.dev/r/text-swap.json", "https://eased.dev/r/number-roll.json", "https://eased.dev/r/button.json", "https://eased.dev/r/badge.json", "https://eased.dev/r/card.json", "https://eased.dev/r/eased-demo-core.json", "https://eased.dev/r/eased-demo-frame.json" ], "files": [ { "path": "src/registry/eased/demo-scene/demo-scene.tsx", "type": "registry:example", "target": "@components/eased/demo-scene/demo-scene.tsx" } ], "meta": { "releaseAt": "2026-10-26" } }, { "name": "eased-demo-core", "type": "registry:lib", "title": "Demo core primitive", "description": "What the Product demo set shares: useDemoTimeline, one drift-free clock of named steps that plays, loops, seeks, pauses off-screen and in hidden tabs, and rests on its result under reduced motion; DemoTarget, an element by ref, a data-demo name or a point; and the press event a Click Ripple rings at.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/demo-core/demo-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/demo-core/demo-core.ts" } ], "meta": { "releaseAt": "2026-10-26" } }, { "name": "zoom-spotlight-demo", "type": "registry:example", "title": "Zoom Spotlight demo", "description": "Fathom's usage overview pushing in on p95 latency, springing back, then lighting the latest deploy.", "registryDependencies": [ "https://eased.dev/r/zoom-spotlight.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-demo-core.json", "https://eased.dev/r/eased-demo-frame.json", "https://eased.dev/r/eased-fixtures.json" ], "files": [ { "path": "src/registry/eased/zoom-spotlight/zoom-spotlight-demo.tsx", "type": "registry:example", "target": "@components/eased/zoom-spotlight/zoom-spotlight-demo.tsx" } ] }, { "name": "zoom-spotlight", "type": "registry:ui", "title": "Zoom Spotlight", "description": "An animated zoom spotlight for React and shadcn, pushing in on one region of live UI and dimming the rest.", "docs": "Import ZoomSpotlight from components/eased/zoom-spotlight/zoom-spotlight. Wrap the UI in it, give it a size, and name the region with a ref or a data-demo attribute.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/eased-demo-core.json" ], "files": [ { "path": "src/registry/eased/zoom-spotlight/zoom-spotlight.tsx", "type": "registry:ui", "target": "@components/eased/zoom-spotlight/zoom-spotlight.tsx" } ], "meta": { "details": "Pushes in on a region of live UI the way a screen recording does: the view scales and pans on the smooth spring until the target sits centred, the rest dims behind a cutout that follows its corners, and it springs back when you let go. It never zooms past the edges and follows the target through resizes.", "industries": [ "saas", "devtools", "ai" ], "releaseAt": "2026-10-26" } }, { "name": "agency-clients", "type": "registry:block", "title": "Agency: Clients", "description": "Client names as wordmarks in a ruled grid, then three numbers that roll up once.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/number-roll.json" ], "files": [ { "path": "src/registry/eased/templates/agency/clients.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/clients.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-contact", "type": "registry:block", "title": "Agency: Contact", "description": "The question, a line on how the studio replies, and the email set large with a copy button.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/button.json", "https://eased.dev/r/eased-copy.json" ], "files": [ { "path": "src/registry/eased/templates/agency/contact.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/contact.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-core", "type": "registry:lib", "title": "Agency: content and kit", "description": "Every word of the agency template and its client projects, plus the palette, tile mark, column, section labels, page heading, entrance, the drawn client sites and the notes' covers its sections share.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/templates/agency/content.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content.ts" }, { "path": "src/registry/eased/templates/agency/content-work.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-work.ts" }, { "path": "src/registry/eased/templates/agency/content-services.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-services.ts" }, { "path": "src/registry/eased/templates/agency/content-studio.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-studio.ts" }, { "path": "src/registry/eased/templates/agency/content-careers.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-careers.ts" }, { "path": "src/registry/eased/templates/agency/content-journal.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-journal.ts" }, { "path": "src/registry/eased/templates/agency/content-contact.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-contact.ts" }, { "path": "src/registry/eased/templates/agency/content-legal.ts", "type": "registry:lib", "target": "@components/eased/templates/agency/content-legal.ts" }, { "path": "src/registry/eased/templates/agency/kit.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/kit.tsx" }, { "path": "src/registry/eased/templates/agency/client-art.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/client-art.tsx" }, { "path": "src/registry/eased/templates/agency/covers.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/covers.tsx" } ], "meta": { "template": "agency", "kind": "template-lib", "industries": [ "media" ] } }, { "name": "agency-footer", "type": "registry:block", "title": "Agency: Footer", "description": "A newsletter sign-up, the studio's links and address, and the legal line with its local time.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/button.json", "https://eased.dev/r/field.json", "https://eased.dev/r/input.json" ], "files": [ { "path": "src/registry/eased/templates/agency/footer.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/footer.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-header", "type": "registry:block", "title": "Agency: Header", "description": "One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json" ], "files": [ { "path": "src/registry/eased/templates/agency/header.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/header.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-intro", "type": "registry:block", "title": "Agency: Intro", "description": "What the studio is in one serif sentence, the page's heading, with one way into the work.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json" ], "files": [ { "path": "src/registry/eased/templates/agency/intro.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/intro.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-latest", "type": "registry:block", "title": "Agency: Latest and careers", "description": "News, writing and a role as cards with drawn covers, then the open roles as a ruled list.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/badge.json" ], "files": [ { "path": "src/registry/eased/templates/agency/latest.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/latest.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-reel", "type": "registry:block", "title": "Agency: Reel", "description": "An ink-blue panel with a browser and a rail of projects: the address bar types each client's domain and the site loads line by line.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/button.json", "https://eased.dev/r/text-swap.json" ], "files": [ { "path": "src/registry/eased/templates/agency/reel.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/reel.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-services", "type": "registry:block", "title": "Agency: Services", "description": "The studio's claim beside its four services as an accordion, each with what it delivers.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/accordion.json", "https://eased.dev/r/badge.json" ], "files": [ { "path": "src/registry/eased/templates/agency/services.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/services.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-work-page", "type": "registry:block", "title": "Agency: Work index", "description": "Every project in one ruled grid: a small cover, the client, the project, its disciplines and its year.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json" ], "files": [ { "path": "src/registry/eased/templates/agency/work-page.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/work-page.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-work", "type": "registry:block", "title": "Agency: Selected work", "description": "A grid of project covers with a filter by discipline; the grid reflows on a spring.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/segmented.json" ], "files": [ { "path": "src/registry/eased/templates/agency/work.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/work.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency", "type": "registry:block", "title": "Agency", "description": "A site for an independent design studio: its name across the page, a reel of client sites, the work, services, clients, news and contact, plus case studies, services, studio, careers, journal, contact, legal and not-found pages.", "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-header.json", "https://eased.dev/r/agency-reel.json", "https://eased.dev/r/agency-intro.json", "https://eased.dev/r/agency-work.json", "https://eased.dev/r/agency-services.json", "https://eased.dev/r/agency-clients.json", "https://eased.dev/r/agency-latest.json", "https://eased.dev/r/agency-contact.json", "https://eased.dev/r/agency-footer.json", "https://eased.dev/r/agency-work-page.json", "https://eased.dev/r/agency-case-study.json", "https://eased.dev/r/agency-services-page.json", "https://eased.dev/r/agency-studio.json", "https://eased.dev/r/agency-careers.json", "https://eased.dev/r/agency-journal.json", "https://eased.dev/r/agency-enquiry.json", "https://eased.dev/r/agency-legal.json", "https://eased.dev/r/agency-not-found.json" ], "files": [ { "path": "src/registry/eased/templates/agency/site.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/site.tsx" } ], "meta": { "template": "agency", "kind": "template", "industries": [ "media" ] } }, { "name": "agency-careers", "type": "registry:block", "title": "Agency: Careers", "description": "The open roles as one ruled grid with what everyone gets and how the studio hires, and a job post per role with its facts and an apply link.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/button.json" ], "files": [ { "path": "src/registry/eased/templates/agency/careers.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/careers.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-case-study", "type": "registry:block", "title": "Agency: Case study", "description": "A project's story on its own page: the client's site drawn as wide as the page, the challenge beside the facts, what the studio made, three outcomes, the credits and the next project.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json" ], "files": [ { "path": "src/registry/eased/templates/agency/case-study.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/case-study.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-enquiry", "type": "registry:block", "title": "Agency: Contact page", "description": "The email and the studio's address beside a project enquiry form with budget and timeline, checked on submit, that gives way to a sent state.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/button.json", "https://eased.dev/r/field.json", "https://eased.dev/r/input.json", "https://eased.dev/r/select.json", "https://eased.dev/r/textarea.json" ], "files": [ { "path": "src/registry/eased/templates/agency/enquiry.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/enquiry.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-journal", "type": "registry:block", "title": "Agency: Journal", "description": "The journal index as a ruled list with drawn covers, and a post page with its author, a wide cover, the text in one reading column and more posts.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/avatar.json", "https://eased.dev/r/badge.json" ], "files": [ { "path": "src/registry/eased/templates/agency/journal.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/journal.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-legal", "type": "registry:block", "title": "Agency: Legal page", "description": "Privacy and imprint as a ruled list of parts, under a note that the text is a sample to replace.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json" ], "files": [ { "path": "src/registry/eased/templates/agency/legal.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/legal.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-not-found", "type": "registry:block", "title": "Agency: Not found", "description": "The template's 404: the code beside the studio's mark with its tile missing, a line and the pages people usually want.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json" ], "files": [ { "path": "src/registry/eased/templates/agency/not-found.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/not-found.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-services-page", "type": "registry:block", "title": "Agency: Services pages", "description": "The services index as one ruled list, and a page per service with a typical project's facts, what it delivers, how it runs week by week and recent work.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/agency-work.json", "https://eased.dev/r/badge.json" ], "files": [ { "path": "src/registry/eased/templates/agency/services-page.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/services-page.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "agency-studio", "type": "registry:block", "title": "Agency: Studio", "description": "What the studio is, its people with initials avatars and how a project runs, with a line to the open roles.", "dependencies": [ "motion" ], "registryDependencies": [ "https://eased.dev/r/eased-tokens.json", "https://eased.dev/r/eased-motion.json", "https://eased.dev/r/agency-core.json", "https://eased.dev/r/avatar.json" ], "files": [ { "path": "src/registry/eased/templates/agency/studio.tsx", "type": "registry:component", "target": "@components/eased/templates/agency/studio.tsx" } ], "meta": { "template": "agency", "kind": "template-section", "industries": [ "media" ] } }, { "name": "eased-onboarding-core", "type": "registry:lib", "title": "Onboarding core primitive", "description": "The headless step engine under Eased onboarding flows: useSteps holds the open step, the direction of the last move, the data, per-step validity, branching, skip, back and jumps, async onNext and onComplete, a live-region announcement and optional saved progress through a storage adapter; useAutoplay plays a flow for a demo and hands it to the visitor on their first press.", "registryDependencies": [ "https://eased.dev/r/eased-motion.json" ], "files": [ { "path": "src/registry/eased/_primitives/onboarding-core/onboarding-core.ts", "type": "registry:lib", "target": "@components/eased/_primitives/onboarding-core/onboarding-core.ts" }, { "path": "src/registry/eased/_primitives/onboarding-core/autoplay.ts", "type": "registry:lib", "target": "@components/eased/_primitives/onboarding-core/autoplay.ts" } ], "meta": { "releaseAt": "2026-10-23" } } ] }