{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "litt", "homepage": "https://littmd.vercel.app", "items": [ { "name": "litt", "type": "registry:style", "title": "litt tokens", "description": "litt.md's colors, type, space, shape, depth and motion as CSS variables, Tailwind names and the litt-glass, litt-raised, litt-trim, litt-lit and litt-grain classes. Every name starts with litt, so none of it touches your own.", "cssVars": { "theme": { "color-litt-canvas": "var(--litt-canvas)", "color-litt-well": "var(--litt-well)", "color-litt-surface-1": "var(--litt-surface-1)", "color-litt-surface-2": "var(--litt-surface-2)", "color-litt-surface-3": "var(--litt-surface-3)", "color-litt-tray": "var(--litt-tray)", "color-litt-cut": "var(--litt-cut)", "color-litt-field": "var(--litt-field)", "color-litt-field-ink": "var(--litt-field-ink)", "color-litt-field-ink-subtle": "var(--litt-field-ink-subtle)", "color-litt-field-line": "var(--litt-field-line)", "color-litt-block": "var(--litt-block)", "color-litt-slot": "var(--litt-slot)", "color-litt-slot-fill": "var(--litt-slot-fill)", "color-litt-cap": "var(--litt-cap)", "color-litt-cap-held": "var(--litt-cap-held)", "color-litt-cap-grip": "var(--litt-cap-grip)", "color-litt-notch": "var(--litt-notch)", "color-litt-notch-home": "var(--litt-notch-home)", "color-litt-line": "var(--litt-line)", "color-litt-line-strong": "var(--litt-line-strong)", "color-litt-line-control": "var(--litt-line-control)", "color-litt-fg": "var(--litt-fg)", "color-litt-fg-muted": "var(--litt-fg-muted)", "color-litt-fg-subtle": "var(--litt-fg-subtle)", "color-litt-fg-disabled": "var(--litt-fg-disabled)", "color-litt-accent": "var(--litt-accent)", "color-litt-accent-hover": "var(--litt-accent-hover)", "color-litt-accent-fg": "var(--litt-accent-fg)", "color-litt-accent-text": "var(--litt-accent-text)", "color-litt-accent-tint": "var(--litt-accent-tint)", "color-litt-focus": "var(--litt-focus)", "color-litt-success": "var(--litt-success)", "color-litt-warning": "var(--litt-warning)", "color-litt-danger": "var(--litt-danger)", "color-litt-danger-fg": "var(--litt-danger-fg)", "color-litt-data-blue": "var(--litt-data-blue)", "color-litt-data-blue-text": "var(--litt-data-blue-text)", "color-litt-data-blue-tint": "var(--litt-data-blue-tint)", "color-litt-data-amber": "var(--litt-data-amber)", "color-litt-data-amber-text": "var(--litt-data-amber-text)", "color-litt-data-amber-tint": "var(--litt-data-amber-tint)", "color-litt-data-teal": "var(--litt-data-teal)", "color-litt-data-teal-text": "var(--litt-data-teal-text)", "color-litt-data-teal-tint": "var(--litt-data-teal-tint)", "color-litt-data-violet": "var(--litt-data-violet)", "color-litt-data-violet-text": "var(--litt-data-violet-text)", "color-litt-data-violet-tint": "var(--litt-data-violet-tint)", "color-litt-data-rose": "var(--litt-data-rose)", "color-litt-data-rose-text": "var(--litt-data-rose-text)", "color-litt-data-rose-tint": "var(--litt-data-rose-tint)", "text-litt-display": "var(--litt-type-display-size)", "text-litt-display--line-height": "var(--litt-type-display-leading)", "text-litt-display--letter-spacing": "var(--litt-type-display-tracking)", "text-litt-display--font-weight": "var(--litt-weight-title)", "text-litt-h1": "var(--litt-type-h1-size)", "text-litt-h1--line-height": "var(--litt-type-h1-leading)", "text-litt-h1--letter-spacing": "var(--litt-type-h1-tracking)", "text-litt-h1--font-weight": "var(--litt-weight-title)", "text-litt-h2": "var(--litt-type-h2-size)", "text-litt-h2--line-height": "var(--litt-type-h2-leading)", "text-litt-h2--letter-spacing": "var(--litt-type-h2-tracking)", "text-litt-h2--font-weight": "var(--litt-weight-title)", "text-litt-h3": "var(--litt-type-h3-size)", "text-litt-h3--line-height": "var(--litt-type-h3-leading)", "text-litt-h3--letter-spacing": "var(--litt-type-h3-tracking)", "text-litt-h3--font-weight": "var(--litt-weight-title)", "text-litt-h4": "var(--litt-type-h4-size)", "text-litt-h4--line-height": "var(--litt-type-h4-leading)", "text-litt-h4--letter-spacing": "var(--litt-type-h4-tracking)", "text-litt-h4--font-weight": "var(--litt-weight-title)", "text-litt-reading": "var(--litt-type-reading-size)", "text-litt-reading--line-height": "var(--litt-type-reading-leading)", "text-litt-reading--letter-spacing": "var(--litt-type-reading-tracking)", "text-litt-body": "var(--litt-type-body-size)", "text-litt-body--line-height": "var(--litt-type-body-leading)", "text-litt-body--letter-spacing": "var(--litt-type-body-tracking)", "text-litt-small": "var(--litt-type-small-size)", "text-litt-small--line-height": "var(--litt-type-small-leading)", "text-litt-small--letter-spacing": "var(--litt-type-small-tracking)", "text-litt-caption": "var(--litt-type-caption-size)", "text-litt-caption--line-height": "var(--litt-type-caption-leading)", "text-litt-caption--letter-spacing": "var(--litt-type-caption-tracking)", "text-litt-caption--font-weight": "var(--litt-weight-label)", "font-weight-litt-title": "var(--litt-weight-title)", "font-weight-litt-label": "var(--litt-weight-label)", "font-litt-field": "var(--litt-field-font, var(--litt-font-sans))", "spacing-litt-section": "var(--litt-section-y)", "spacing-litt-gutter": "var(--litt-gutter)", "spacing-litt-control-sm": "var(--litt-control-sm)", "spacing-litt-control-md": "var(--litt-control-md)", "spacing-litt-control-lg": "var(--litt-control-lg)", "spacing-litt-control-pad-sm": "var(--litt-control-pad-sm)", "spacing-litt-control-pad-md": "var(--litt-control-pad-md)", "spacing-litt-control-pad-lg": "var(--litt-control-pad-lg)", "spacing-litt-button-pad-lg": "var(--litt-button-pad-lg)", "spacing-litt-control": "var(--litt-control-gap)", "container-litt-reading": "var(--litt-container-reading)", "container-litt-content": "var(--litt-container-content)", "container-litt-wide": "var(--litt-container-wide)", "radius-litt-control": "var(--litt-radius-control)", "radius-litt-surface": "var(--litt-radius-surface)", "radius-litt-pill": "var(--litt-radius-pill)", "shadow-litt-tooltip": "var(--litt-shadow-tooltip)", "shadow-litt-float": "var(--litt-shadow-float)", "shadow-litt-modal": "var(--litt-shadow-modal)", "shadow-litt-glow": "var(--litt-glow)", "inset-shadow-litt-highlight": "var(--litt-highlight)", "ease-litt": "var(--litt-ease-out)", "ease-litt-responsive": "var(--litt-ease-responsive)", "ease-litt-expressive": "var(--litt-ease-expressive)", "font-litt-mono": "var(--litt-font-mono)", "font-litt-sans": "var(--litt-font-sans)", "ease-litt-out": "var(--litt-ease-out)" } }, "css": { ":root": { "--litt-font-mono": "\"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace", "--litt-weight": "400", "--litt-weight-title": "500", "--litt-weight-label": "600", "--litt-type-display-size": "1.125rem", "--litt-type-display-leading": "1.75rem", "--litt-type-display-tracking": "-0.015em", "--litt-type-h1-size": "1.125rem", "--litt-type-h1-leading": "1.75rem", "--litt-type-h1-tracking": "-0.015em", "--litt-type-h2-size": "0.875rem", "--litt-type-h2-leading": "1.375rem", "--litt-type-h2-tracking": "-0.006em", "--litt-type-h3-size": "0.875rem", "--litt-type-h3-leading": "1.375rem", "--litt-type-h3-tracking": "-0.006em", "--litt-type-h4-size": "0.875rem", "--litt-type-h4-leading": "1.375rem", "--litt-type-h4-tracking": "-0.006em", "--litt-type-reading-size": "0.875rem", "--litt-type-reading-leading": "1.375rem", "--litt-type-reading-tracking": "-0.006em", "--litt-type-body-size": "0.875rem", "--litt-type-body-leading": "1.375rem", "--litt-type-body-tracking": "-0.006em", "--litt-type-small-size": "0.8125rem", "--litt-type-small-leading": "1.25rem", "--litt-type-small-tracking": "-0.004em", "--litt-type-caption-size": "0.75rem", "--litt-type-caption-leading": "1rem", "--litt-type-caption-tracking": "-0.005em", "--litt-measure": "65ch", "--litt-space-1": "4px", "--litt-space-2": "8px", "--litt-space-3": "12px", "--litt-space-4": "16px", "--litt-space-6": "24px", "--litt-space-8": "32px", "--litt-space-12": "48px", "--litt-space-16": "64px", "--litt-space-24": "96px", "--litt-space-32": "128px", "--litt-space-40": "160px", "--litt-section-y": "64px", "--litt-gutter": "max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))", "--litt-grid-gap": "16px", "--litt-container-reading": "40rem", "--litt-container-content": "67.5rem", "--litt-container-wide": "80rem", "--litt-header-h": "64px", "--litt-radius-control": "4px", "--litt-radius-surface": "8px", "--litt-radius-pill": "999px", "--litt-hairline": "1px", "--litt-control-sm": "32px", "--litt-control-md": "44px", "--litt-control-lg": "56px", "--litt-control-pad-sm": "12px", "--litt-control-pad-md": "16px", "--litt-control-pad-lg": "24px", "--litt-button-pad-lg": "32px", "--litt-control-text-sm": "0.8125rem", "--litt-control-text-md": "0.875rem", "--litt-control-text-lg": "1rem", "--litt-control-gap": "8px", "--litt-control-group-gap": "12px", "--litt-dur-instant": "100ms", "--litt-ease-out": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "--litt-press-scale": "0.98", "--litt-press-depth": "0.5px", "--litt-spring-responsive": "200ms 0", "--litt-dur-responsive": "425ms", "--litt-ease-responsive": "linear(0, 0.0609, 0.1306, 0.2509, 0.3322, 0.4472, 0.5167, 0.6085, 0.6615, 0.7293, 0.7846, 0.8154, 0.854, 0.8753, 0.9017, 0.9163, 0.9342, 0.944, 0.956, 0.9626, 0.9707, 0.977, 0.9805, 0.9847, 0.987, 0.9898, 0.9914, 0.9932, 0.9943, 0.9955, 0.9965, 0.997, 0.9977, 0.998, 0.9984, 0.9987, 0.999, 0.9991, 0.9993, 0.9994, 1)", "--litt-spring-expressive": "350ms 0.12", "--litt-dur-expressive": "529ms", "--litt-ease-expressive": "linear(0, 0.0216, 0.0673, 0.1514, 0.2238, 0.2991, 0.3741, 0.4465, 0.5149, 0.5982, 0.6541, 0.7044, 0.7492, 0.7885, 0.8229, 0.8617, 0.886, 0.9067, 0.9242, 0.939, 0.9549, 0.9644, 0.9723, 0.9787, 0.9839, 0.9881, 0.9923, 0.9947, 0.9966, 0.998, 0.9991, 0.9998, 1.0005, 1.0009, 1.0011, 1.0012, 1.0012, 1.0012, 1.0012, 1.0011, 1)", "--litt-exit": "0.75", "--litt-dur-exit-responsive": "150ms", "--litt-dur-exit-expressive": "263ms", "--litt-stagger": "40ms", "--litt-travel": "16px", "--litt-dismiss-distance": "0.25", "--litt-dismiss-velocity": "0.4", "--litt-glass-blur": "20px", "--litt-glass-saturate": "140%", "--litt-grain": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")" }, "@media (min-width: 40rem)": { ":root": { "--litt-section-y": "96px", "--litt-gutter": "max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))", "--litt-grid-gap": "24px" } }, "@media (min-width: 64rem)": { ":root": { "--litt-section-y": "128px", "--litt-gutter": "max(32px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))" } }, ":root, [data-theme=\"light\"], .light": { "--litt-canvas": "#ffffff", "--litt-well": "#fcfbfa", "--litt-surface-1": "#ffffff", "--litt-surface-2": "#f7f5f3", "--litt-surface-3": "#efecea", "--litt-line": "#e8e4e1", "--litt-line-strong": "#d7d1cc", "--litt-line-control": "#8c847e", "--litt-fg": "#110f0d", "--litt-fg-muted": "#6d6661", "--litt-fg-subtle": "#6d6661", "--litt-fg-disabled": "#a49c96", "--litt-flat-canvas": "#ffffff", "--litt-flat-well": "#fbfbfb", "--litt-flat-surface-1": "#ffffff", "--litt-flat-surface-2": "#f5f5f5", "--litt-flat-surface-3": "#ededed", "--litt-flat-line": "#e5e5e5", "--litt-flat-line-strong": "#d2d2d2", "--litt-flat-line-control": "#868686", "--litt-flat-fg": "#0f0f0f", "--litt-flat-fg-muted": "#676767", "--litt-flat-fg-subtle": "#676767", "--litt-flat-fg-disabled": "#9e9e9e", "--litt-device-canvas": "#d7dade", "--litt-device-well": "#e8eaed", "--litt-device-surface-1": "#e8eaed", "--litt-device-surface-2": "#e0e2e6", "--litt-device-surface-3": "#cdd0d5", "--litt-device-line": "#c3c7cc", "--litt-device-line-strong": "#b0b4bb", "--litt-device-line-control": "#696e76", "--litt-device-fg": "#121418", "--litt-device-fg-muted": "#454a52", "--litt-device-fg-subtle": "#454a52", "--litt-device-fg-disabled": "#868b93", "--litt-device-tray": "#c4c8ce", "--litt-device-cut": "#f4f5f7", "--litt-device-block": "#f4f5f7", "--litt-device-slot": "#c4c8ce", "--litt-device-slot-fill": "#a9aeb6", "--litt-device-cap": "#f4f5f7", "--litt-device-cap-held": "#e6e8eb", "--litt-device-field": "#1e1f21", "--litt-device-field-ink": "#f2f2f2", "--litt-device-field-ink-subtle": "#a2a3a6", "--litt-device-field-line": "#2b2c2f", "--litt-device-accent": "#ff8a1f", "--litt-device-accent-hover": "#ff9a3c", "--litt-device-accent-fg": "#111214", "--litt-device-accent-tint": "#f6e4d8", "--litt-device-accent-text": "#a23200", "--litt-device-accent-pink": "#c0007e", "--litt-device-accent-pink-text": "#90005d", "--litt-device-accent-blue": "#0957fd", "--litt-device-accent-blue-hover": "#0e4ada", "--litt-device-accent-blue-text": "#0541ea", "--litt-device-focus-blue": "#0957fd", "--litt-device-focus": "#c2410c", "--litt-device-success": "#006e2d", "--litt-device-warning": "#8f4e00", "--litt-device-danger": "#b42329", "--litt-device-data-blue": "#1170b8", "--litt-device-data-blue-text": "#0a5f9c", "--litt-device-data-amber": "#987318", "--litt-device-data-amber-text": "#715c11", "--litt-device-data-teal": "#008881", "--litt-device-data-teal-text": "#006a63", "--litt-device-data-violet": "#8265d9", "--litt-device-data-violet-text": "#6949ba", "--litt-device-data-rose": "#a86092", "--litt-device-data-rose-text": "#774f7b", "--litt-device-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.75)", "--litt-device-tray-shade": "inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.28)", "--litt-device-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.16)", "--litt-device-field-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.5)", "--litt-device-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 0 0 rgba(0, 0, 0, 0.24), 0 3px 6px -3px rgba(0, 0, 0, 0.3)", "--litt-device-block-press": "inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 0 transparent", "--litt-device-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 0 0 rgba(0, 0, 0, 0.24), 0 3px 6px -3px rgba(0, 0, 0, 0.3)", "--litt-device-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.6)", "--litt-device-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.22)", "--litt-device-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1), 0 3px 6px -2px rgba(0, 0, 0, 0.2)", "--litt-device-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 5px -1px rgba(0, 0, 0, 0.26)", "--litt-device-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 0.5px 1px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.14)", "--litt-device-cap-grip": "rgba(0, 0, 0, 0.24)", "--litt-device-engrave": "0 1px 0 rgba(255, 255, 255, 0.6)", "--litt-device-screen-canvas": "#111214", "--litt-device-screen-well": "#17181a", "--litt-device-screen-surface-1": "#17181a", "--litt-device-screen-surface-2": "#141517", "--litt-device-screen-surface-3": "#1d1f22", "--litt-device-screen-line": "#2a2c30", "--litt-device-screen-line-strong": "#36393e", "--litt-device-screen-line-control": "#7d828a", "--litt-device-screen-fg": "#f2f2f2", "--litt-device-screen-fg-muted": "#b4b8bf", "--litt-device-screen-fg-subtle": "#b4b8bf", "--litt-device-screen-fg-disabled": "#5c6067", "--litt-device-screen-tray": "#0a0a0b", "--litt-device-screen-cut": "#222428", "--litt-device-screen-block": "#2e3034", "--litt-device-screen-slot": "#0a0a0b", "--litt-device-screen-slot-fill": "#5a5e66", "--litt-device-screen-cap": "#44464b", "--litt-device-screen-cap-held": "#4f5156", "--litt-device-screen-cap-grip": "rgba(255, 255, 255, 0.18)", "--litt-device-screen-field": "#050506", "--litt-device-screen-field-ink": "#f2f2f2", "--litt-device-screen-field-ink-subtle": "#9c9da0", "--litt-device-screen-field-line": "#7d828a", "--litt-device-screen-accent": "#ff8a1f", "--litt-device-screen-accent-hover": "#ff9a3c", "--litt-device-screen-accent-text": "#ff9a3c", "--litt-device-screen-accent-fg": "#111214", "--litt-device-screen-accent-tint": "#2b1a0e", "--litt-device-screen-accent-pink": "#d3268e", "--litt-device-screen-accent-pink-text": "#feb9db", "--litt-device-screen-focus": "#ff8a1f", "--litt-device-screen-focus-pink": "#e8489f", "--litt-device-screen-accent-pink-tint": "#2b0d1d", "--litt-device-screen-accent-blue": "#0957fd", "--litt-device-screen-accent-blue-text": "#7084fd", "--litt-device-screen-accent-blue-tint": "#0e1a31", "--litt-device-screen-focus-blue": "#5e78fe", "--litt-device-screen-danger-fg": "#111214", "--litt-device-screen-success": "#4bc680", "--litt-device-screen-warning": "#e19b1b", "--litt-device-screen-danger": "#ff756f", "--litt-device-screen-data-blue": "#3496ef", "--litt-device-screen-data-blue-text": "#69b7ff", "--litt-device-screen-data-amber": "#be7900", "--litt-device-screen-data-amber-text": "#ba8d58", "--litt-device-screen-data-teal": "#09a198", "--litt-device-screen-data-teal-text": "#42b4ab", "--litt-device-screen-data-violet": "#8f78df", "--litt-device-screen-data-violet-text": "#b4a3fd", "--litt-device-screen-data-rose": "#e76c9c", "--litt-device-screen-data-rose-text": "#f2879c", "--litt-device-screen-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.07)", "--litt-device-screen-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.7)", "--litt-device-screen-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.6)", "--litt-device-screen-field-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-device-screen-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-screen-block-press": "inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 0 transparent", "--litt-device-screen-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-screen-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.06)", "--litt-device-screen-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.5)", "--litt-device-screen-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.5)", "--litt-device-screen-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 5px -1px rgba(0, 0, 0, 0.6)", "--litt-device-screen-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 0.5px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4)", "--litt-device-screen-engrave": "0 -1px 0 rgba(0, 0, 0, 0.6)", "--litt-device-screen-glass-bg": "rgba(17, 18, 20, 0.88)", "--litt-device-screen-glass-bg-solid": "rgba(17, 18, 20, 0.98)", "--litt-device-screen-glass-border": "rgba(255, 255, 255, 0.08)", "--litt-accent-blue": "#0957fd", "--litt-accent-blue-hover": "#0e4ada", "--litt-accent-blue-fg": "#ffffff", "--litt-accent-blue-text": "#104dfd", "--litt-accent-blue-tint": "#e7f0ff", "--litt-focus-blue": "#0957fd", "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-accent-pink": "#c0007e", "--litt-accent-pink-hover": "#a8006e", "--litt-accent-pink-fg": "#ffffff", "--litt-accent-pink-text": "#90005d", "--litt-accent-pink-tint": "#feeaf2", "--litt-focus-pink": "#c0007e", "--litt-success": "#007c3b", "--litt-warning": "#9c5a00", "--litt-danger": "#be2e31", "--litt-danger-fg": "#ffffff", "--litt-data-blue": "#2d90e9", "--litt-data-blue-text": "#006ebe", "--litt-data-amber": "#c47d04", "--litt-data-amber-text": "#986002", "--litt-data-teal": "#099d95", "--litt-data-teal-text": "#027972", "--litt-data-violet": "#9579ef", "--litt-data-violet-text": "#7658ca", "--litt-data-rose": "#e25f93", "--litt-data-rose-text": "#bb3c72", "--litt-tint-strength": "12%", "--litt-glass-bg": "rgba(255, 255, 255, 0.72)", "--litt-glass-bg-solid": "rgba(255, 255, 255, 0.94)", "--litt-glass-border": "rgba(17, 15, 13, 0.07)", "--litt-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.9)", "--litt-shadow-tooltip": "0 0 2px rgba(17, 15, 13, 0.08), 0 0 0 1px rgba(17, 15, 13, 0.06)", "--litt-shadow-float": "0 0 8px rgba(17, 15, 13, 0.08), 0 0 24px rgba(17, 15, 13, 0.06), 0 0 0 1px rgba(17, 15, 13, 0.06)", "--litt-shadow-modal": "0 0 40px rgba(17, 15, 13, 0.10), 0 0 72px rgba(17, 15, 13, 0.06), 0 0 0 1px rgba(17, 15, 13, 0.06)", "--litt-light-strength": "12%", "--litt-glow-strength": "28%", "--litt-grain-opacity": "0.02", "--litt-tray": "#ece9e6", "--litt-tray-shade": "inset 0 0 0 1px rgba(17, 15, 13, 0.18), inset 0 1px 2px rgba(17, 15, 13, 0.2)", "--litt-cut": "#ffffff", "--litt-cut-shade": "inset 0 1px 2px rgba(17, 15, 13, 0.12)", "--litt-block": "#ffffff", "--litt-block-lift": "0 0.5px 1px rgba(17, 15, 13, 0.22), 0 0.5px 3px rgba(17, 15, 13, 0.16)", "--litt-block-press": "0 0.5px 1px rgba(17, 15, 13, 0.22), 0 0 1.5px rgba(17, 15, 13, 0.12)", "--litt-key-lift": "0 0.5px 1px rgba(17, 15, 13, 0.22), 0 0.5px 3px rgba(17, 15, 13, 0.16), inset 0 -1px 0 rgba(17, 15, 13, 0.12)", "--litt-slot": "#e6e2de", "--litt-slot-shade": "inset 0 1px 2px rgba(17, 15, 13, 0.28), inset 0 0 0 1px rgba(17, 15, 13, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.8)", "--litt-slot-fill": "#cdc7c2", "--litt-slot-fill-shade": "inset 0 1px 1.5px rgba(17, 15, 13, 0.22)", "--litt-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(17, 15, 13, 0.07), 0 1px 1px rgba(17, 15, 13, 0.08), 0 3px 6px -2px rgba(17, 15, 13, 0.16)", "--litt-cap": "#ffffff", "--litt-cap-held": "#f4f2f0", "--litt-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(17, 15, 13, 0.08), 0 0 0 0.5px rgba(17, 15, 13, 0.24), 0 1px 1px rgba(17, 15, 13, 0.2), 0 3px 5px -1px rgba(17, 15, 13, 0.24)", "--litt-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 15, 13, 0.06), 0 0 0 0.5px rgba(17, 15, 13, 0.28), 0 0.5px 1px rgba(17, 15, 13, 0.24), 0 1px 2px rgba(17, 15, 13, 0.14)", "--litt-cap-grip": "rgba(17, 15, 13, 0.24)", "--litt-notch": "rgba(17, 15, 13, 0.28)", "--litt-notch-home": "rgba(17, 15, 13, 0.6)" }, "[data-theme=\"dark\"], .dark": { "--litt-canvas": "#0a0908", "--litt-well": "#11100f", "--litt-surface-1": "#11100f", "--litt-surface-2": "#191715", "--litt-surface-3": "#201d1b", "--litt-line": "#282421", "--litt-line-strong": "#38332f", "--litt-line-control": "#6e6762", "--litt-fg": "#f9f8f7", "--litt-fg-muted": "#cec4bd", "--litt-fg-subtle": "#cec4bd", "--litt-fg-disabled": "#6b645f", "--litt-flat-canvas": "#090909", "--litt-flat-well": "#101010", "--litt-flat-surface-1": "#101010", "--litt-flat-surface-2": "#171717", "--litt-flat-surface-3": "#1e1e1e", "--litt-flat-line": "#252525", "--litt-flat-line-strong": "#343434", "--litt-flat-line-control": "#686868", "--litt-flat-fg": "#f8f8f8", "--litt-flat-fg-muted": "#c6c6c6", "--litt-flat-fg-subtle": "#c6c6c6", "--litt-flat-fg-disabled": "#656565", "--litt-device-canvas": "#1d1f22", "--litt-device-well": "#26282c", "--litt-device-surface-1": "#26282c", "--litt-device-surface-2": "#222428", "--litt-device-surface-3": "#2e3135", "--litt-device-line": "#383b40", "--litt-device-line-strong": "#474a50", "--litt-device-line-control": "#7d828a", "--litt-device-fg": "#eef0f3", "--litt-device-fg-muted": "#bcc0c7", "--litt-device-fg-subtle": "#bcc0c7", "--litt-device-fg-disabled": "#666a72", "--litt-device-tray": "#131416", "--litt-device-cut": "#1a1c1e", "--litt-device-block": "#3d3f44", "--litt-device-slot": "#131416", "--litt-device-slot-fill": "#5a5e66", "--litt-device-cap": "#4a4c51", "--litt-device-cap-held": "#55585d", "--litt-device-field": "#0b0b0c", "--litt-device-field-ink": "#f2f2f2", "--litt-device-field-ink-subtle": "#9c9da0", "--litt-device-field-line": "#7d828a", "--litt-device-accent": "#ff8a1f", "--litt-device-accent-hover": "#ff9a3c", "--litt-device-accent-fg": "#111214", "--litt-device-accent-tint": "#2b1a0e", "--litt-device-accent-text": "#ff9a3c", "--litt-device-accent-pink": "#d3268e", "--litt-device-accent-pink-text": "#feb9db", "--litt-device-accent-blue": "#2166fd", "--litt-device-accent-blue-hover": "#2569fe", "--litt-device-accent-blue-text": "#bcd3fe", "--litt-device-focus-blue": "#7084fd", "--litt-device-focus": "#ff8a1f", "--litt-device-success": "#4bc680", "--litt-device-warning": "#e19b1b", "--litt-device-danger": "#ff756f", "--litt-device-data-blue": "#3496ef", "--litt-device-data-blue-text": "#69b7ff", "--litt-device-data-amber": "#be7900", "--litt-device-data-amber-text": "#c3b8a0", "--litt-device-data-teal": "#09a198", "--litt-device-data-teal-text": "#42b4ab", "--litt-device-data-violet": "#8f78df", "--litt-device-data-violet-text": "#b4a3fd", "--litt-device-data-rose": "#e76c9c", "--litt-device-data-rose-text": "#f2879c", "--litt-device-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.07)", "--litt-device-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.7)", "--litt-device-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.6)", "--litt-device-field-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-device-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-block-press": "inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 0 transparent", "--litt-device-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.06)", "--litt-device-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.5)", "--litt-device-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.5)", "--litt-device-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 5px -1px rgba(0, 0, 0, 0.6)", "--litt-device-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 0.5px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4)", "--litt-device-cap-grip": "rgba(255, 255, 255, 0.18)", "--litt-device-engrave": "0 -1px 0 rgba(0, 0, 0, 0.6)", "--litt-device-screen-canvas": "#111214", "--litt-device-screen-well": "#17181a", "--litt-device-screen-surface-1": "#17181a", "--litt-device-screen-surface-2": "#141517", "--litt-device-screen-surface-3": "#1d1f22", "--litt-device-screen-line": "#2a2c30", "--litt-device-screen-line-strong": "#36393e", "--litt-device-screen-line-control": "#7d828a", "--litt-device-screen-fg": "#f2f2f2", "--litt-device-screen-fg-muted": "#b4b8bf", "--litt-device-screen-fg-subtle": "#b4b8bf", "--litt-device-screen-fg-disabled": "#5c6067", "--litt-device-screen-tray": "#0a0a0b", "--litt-device-screen-cut": "#222428", "--litt-device-screen-block": "#2e3034", "--litt-device-screen-slot": "#0a0a0b", "--litt-device-screen-slot-fill": "#5a5e66", "--litt-device-screen-cap": "#44464b", "--litt-device-screen-cap-held": "#4f5156", "--litt-device-screen-cap-grip": "rgba(255, 255, 255, 0.18)", "--litt-device-screen-field": "#050506", "--litt-device-screen-field-ink": "#f2f2f2", "--litt-device-screen-field-ink-subtle": "#9c9da0", "--litt-device-screen-field-line": "#7d828a", "--litt-device-screen-accent": "#ff8a1f", "--litt-device-screen-accent-hover": "#ff9a3c", "--litt-device-screen-accent-text": "#ff9a3c", "--litt-device-screen-accent-fg": "#111214", "--litt-device-screen-accent-tint": "#2b1a0e", "--litt-device-screen-accent-pink": "#d3268e", "--litt-device-screen-accent-pink-text": "#feb9db", "--litt-device-screen-focus": "#ff8a1f", "--litt-device-screen-focus-pink": "#e8489f", "--litt-device-screen-accent-pink-tint": "#2b0d1d", "--litt-device-screen-accent-blue": "#0957fd", "--litt-device-screen-accent-blue-text": "#7084fd", "--litt-device-screen-accent-blue-tint": "#0e1a31", "--litt-device-screen-focus-blue": "#5e78fe", "--litt-device-screen-danger-fg": "#111214", "--litt-device-screen-success": "#4bc680", "--litt-device-screen-warning": "#e19b1b", "--litt-device-screen-danger": "#ff756f", "--litt-device-screen-data-blue": "#3496ef", "--litt-device-screen-data-blue-text": "#69b7ff", "--litt-device-screen-data-amber": "#be7900", "--litt-device-screen-data-amber-text": "#ba8d58", "--litt-device-screen-data-teal": "#09a198", "--litt-device-screen-data-teal-text": "#42b4ab", "--litt-device-screen-data-violet": "#8f78df", "--litt-device-screen-data-violet-text": "#b4a3fd", "--litt-device-screen-data-rose": "#e76c9c", "--litt-device-screen-data-rose-text": "#f2879c", "--litt-device-screen-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.07)", "--litt-device-screen-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.7)", "--litt-device-screen-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.6)", "--litt-device-screen-field-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-device-screen-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-screen-block-press": "inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 0 transparent", "--litt-device-screen-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-screen-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.06)", "--litt-device-screen-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.5)", "--litt-device-screen-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.5)", "--litt-device-screen-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 5px -1px rgba(0, 0, 0, 0.6)", "--litt-device-screen-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 0.5px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4)", "--litt-device-screen-engrave": "0 -1px 0 rgba(0, 0, 0, 0.6)", "--litt-device-screen-glass-bg": "rgba(17, 18, 20, 0.88)", "--litt-device-screen-glass-bg-solid": "rgba(17, 18, 20, 0.98)", "--litt-device-screen-glass-border": "rgba(255, 255, 255, 0.08)", "--litt-accent-blue": "#0957fd", "--litt-accent-blue-hover": "#1e64fe", "--litt-accent-blue-fg": "#ffffff", "--litt-accent-blue-text": "#6579fd", "--litt-accent-blue-tint": "#0e1a31", "--litt-focus-blue": "#5e78fe", "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-accent-pink": "#c0007e", "--litt-accent-pink-hover": "#cd1c89", "--litt-accent-pink-fg": "#ffffff", "--litt-accent-pink-text": "#feb9db", "--litt-accent-pink-tint": "#2b0d1d", "--litt-focus-pink": "#feb9db", "--litt-success": "#4bc680", "--litt-warning": "#e19b1b", "--litt-danger": "#ff756f", "--litt-danger-fg": "#0a0908", "--litt-data-blue": "#2c90e8", "--litt-data-blue-text": "#5aa8f4", "--litt-data-amber": "#c07b03", "--litt-data-amber-text": "#d79540", "--litt-data-teal": "#09a198", "--litt-data-teal-text": "#42b4ab", "--litt-data-violet": "#8f78df", "--litt-data-violet-text": "#a896ef", "--litt-data-rose": "#d55c8c", "--litt-data-rose-text": "#eb81a7", "--litt-tint-strength": "18%", "--litt-glass-bg": "rgba(17, 16, 15, 0.72)", "--litt-glass-bg-solid": "rgba(17, 16, 15, 0.94)", "--litt-glass-border": "rgba(255, 255, 255, 0.08)", "--litt-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.06)", "--litt-shadow-tooltip": "0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--litt-line-strong)", "--litt-shadow-float": "0 0 8px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.5)", "--litt-shadow-modal": "0 0 40px rgba(0, 0, 0, 0.5), 0 0 72px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.5)", "--litt-light-strength": "22%", "--litt-glow-strength": "40%", "--litt-grain-opacity": "0.04", "--litt-tray": "#070606", "--litt-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-cut": "#0d0c0b", "--litt-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-block": "#2a2725", "--litt-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 0.5px 3px rgba(0, 0, 0, 0.55)", "--litt-block-press": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 0 1.5px rgba(0, 0, 0, 0.5)", "--litt-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 0.5px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.35)", "--litt-slot": "#0b0a09", "--litt-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.07)", "--litt-slot-fill": "#3a3633", "--litt-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.55)", "--litt-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.6), 0 3px 6px -2px rgba(0, 0, 0, 0.7)", "--litt-cap": "#45403c", "--litt-cap-held": "#3b3734", "--litt-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(0, 0, 0, 0.7), 0 3px 5px -1px rgba(0, 0, 0, 0.7)", "--litt-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.75), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5)", "--litt-cap-grip": "rgba(0, 0, 0, 0.5)", "--litt-notch": "rgba(255, 255, 255, 0.2)", "--litt-notch-home": "rgba(255, 255, 255, 0.5)" }, "@media (prefers-color-scheme: dark)": { ":root:not([data-theme=\"light\"], .light)": { "--litt-canvas": "#0a0908", "--litt-well": "#11100f", "--litt-surface-1": "#11100f", "--litt-surface-2": "#191715", "--litt-surface-3": "#201d1b", "--litt-line": "#282421", "--litt-line-strong": "#38332f", "--litt-line-control": "#6e6762", "--litt-fg": "#f9f8f7", "--litt-fg-muted": "#cec4bd", "--litt-fg-subtle": "#cec4bd", "--litt-fg-disabled": "#6b645f", "--litt-flat-canvas": "#090909", "--litt-flat-well": "#101010", "--litt-flat-surface-1": "#101010", "--litt-flat-surface-2": "#171717", "--litt-flat-surface-3": "#1e1e1e", "--litt-flat-line": "#252525", "--litt-flat-line-strong": "#343434", "--litt-flat-line-control": "#686868", "--litt-flat-fg": "#f8f8f8", "--litt-flat-fg-muted": "#c6c6c6", "--litt-flat-fg-subtle": "#c6c6c6", "--litt-flat-fg-disabled": "#656565", "--litt-device-canvas": "#1d1f22", "--litt-device-well": "#26282c", "--litt-device-surface-1": "#26282c", "--litt-device-surface-2": "#222428", "--litt-device-surface-3": "#2e3135", "--litt-device-line": "#383b40", "--litt-device-line-strong": "#474a50", "--litt-device-line-control": "#7d828a", "--litt-device-fg": "#eef0f3", "--litt-device-fg-muted": "#bcc0c7", "--litt-device-fg-subtle": "#bcc0c7", "--litt-device-fg-disabled": "#666a72", "--litt-device-tray": "#131416", "--litt-device-cut": "#1a1c1e", "--litt-device-block": "#3d3f44", "--litt-device-slot": "#131416", "--litt-device-slot-fill": "#5a5e66", "--litt-device-cap": "#4a4c51", "--litt-device-cap-held": "#55585d", "--litt-device-field": "#0b0b0c", "--litt-device-field-ink": "#f2f2f2", "--litt-device-field-ink-subtle": "#9c9da0", "--litt-device-field-line": "#7d828a", "--litt-device-accent": "#ff8a1f", "--litt-device-accent-hover": "#ff9a3c", "--litt-device-accent-fg": "#111214", "--litt-device-accent-tint": "#2b1a0e", "--litt-device-accent-text": "#ff9a3c", "--litt-device-accent-pink": "#d3268e", "--litt-device-accent-pink-text": "#feb9db", "--litt-device-accent-blue": "#2166fd", "--litt-device-accent-blue-hover": "#2569fe", "--litt-device-accent-blue-text": "#bcd3fe", "--litt-device-focus-blue": "#7084fd", "--litt-device-focus": "#ff8a1f", "--litt-device-success": "#4bc680", "--litt-device-warning": "#e19b1b", "--litt-device-danger": "#ff756f", "--litt-device-data-blue": "#3496ef", "--litt-device-data-blue-text": "#69b7ff", "--litt-device-data-amber": "#be7900", "--litt-device-data-amber-text": "#c3b8a0", "--litt-device-data-teal": "#09a198", "--litt-device-data-teal-text": "#42b4ab", "--litt-device-data-violet": "#8f78df", "--litt-device-data-violet-text": "#b4a3fd", "--litt-device-data-rose": "#e76c9c", "--litt-device-data-rose-text": "#f2879c", "--litt-device-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.07)", "--litt-device-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.7)", "--litt-device-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.6)", "--litt-device-field-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-device-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-block-press": "inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 0 transparent", "--litt-device-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.06)", "--litt-device-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.5)", "--litt-device-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.5)", "--litt-device-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 5px -1px rgba(0, 0, 0, 0.6)", "--litt-device-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 0.5px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4)", "--litt-device-cap-grip": "rgba(255, 255, 255, 0.18)", "--litt-device-engrave": "0 -1px 0 rgba(0, 0, 0, 0.6)", "--litt-device-screen-canvas": "#111214", "--litt-device-screen-well": "#17181a", "--litt-device-screen-surface-1": "#17181a", "--litt-device-screen-surface-2": "#141517", "--litt-device-screen-surface-3": "#1d1f22", "--litt-device-screen-line": "#2a2c30", "--litt-device-screen-line-strong": "#36393e", "--litt-device-screen-line-control": "#7d828a", "--litt-device-screen-fg": "#f2f2f2", "--litt-device-screen-fg-muted": "#b4b8bf", "--litt-device-screen-fg-subtle": "#b4b8bf", "--litt-device-screen-fg-disabled": "#5c6067", "--litt-device-screen-tray": "#0a0a0b", "--litt-device-screen-cut": "#222428", "--litt-device-screen-block": "#2e3034", "--litt-device-screen-slot": "#0a0a0b", "--litt-device-screen-slot-fill": "#5a5e66", "--litt-device-screen-cap": "#44464b", "--litt-device-screen-cap-held": "#4f5156", "--litt-device-screen-cap-grip": "rgba(255, 255, 255, 0.18)", "--litt-device-screen-field": "#050506", "--litt-device-screen-field-ink": "#f2f2f2", "--litt-device-screen-field-ink-subtle": "#9c9da0", "--litt-device-screen-field-line": "#7d828a", "--litt-device-screen-accent": "#ff8a1f", "--litt-device-screen-accent-hover": "#ff9a3c", "--litt-device-screen-accent-text": "#ff9a3c", "--litt-device-screen-accent-fg": "#111214", "--litt-device-screen-accent-tint": "#2b1a0e", "--litt-device-screen-accent-pink": "#d3268e", "--litt-device-screen-accent-pink-text": "#feb9db", "--litt-device-screen-focus": "#ff8a1f", "--litt-device-screen-focus-pink": "#e8489f", "--litt-device-screen-accent-pink-tint": "#2b0d1d", "--litt-device-screen-accent-blue": "#0957fd", "--litt-device-screen-accent-blue-text": "#7084fd", "--litt-device-screen-accent-blue-tint": "#0e1a31", "--litt-device-screen-focus-blue": "#5e78fe", "--litt-device-screen-danger-fg": "#111214", "--litt-device-screen-success": "#4bc680", "--litt-device-screen-warning": "#e19b1b", "--litt-device-screen-danger": "#ff756f", "--litt-device-screen-data-blue": "#3496ef", "--litt-device-screen-data-blue-text": "#69b7ff", "--litt-device-screen-data-amber": "#be7900", "--litt-device-screen-data-amber-text": "#ba8d58", "--litt-device-screen-data-teal": "#09a198", "--litt-device-screen-data-teal-text": "#42b4ab", "--litt-device-screen-data-violet": "#8f78df", "--litt-device-screen-data-violet-text": "#b4a3fd", "--litt-device-screen-data-rose": "#e76c9c", "--litt-device-screen-data-rose-text": "#f2879c", "--litt-device-screen-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.07)", "--litt-device-screen-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.7)", "--litt-device-screen-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.6)", "--litt-device-screen-field-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-device-screen-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-screen-block-press": "inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 0 transparent", "--litt-device-screen-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(0, 0, 0, 0.85), 0 3px 6px -3px rgba(0, 0, 0, 0.6)", "--litt-device-screen-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.06)", "--litt-device-screen-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.5)", "--litt-device-screen-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4), 0 3px 6px -2px rgba(0, 0, 0, 0.5)", "--litt-device-screen-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 5px -1px rgba(0, 0, 0, 0.6)", "--litt-device-screen-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 0.5px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4)", "--litt-device-screen-engrave": "0 -1px 0 rgba(0, 0, 0, 0.6)", "--litt-device-screen-glass-bg": "rgba(17, 18, 20, 0.88)", "--litt-device-screen-glass-bg-solid": "rgba(17, 18, 20, 0.98)", "--litt-device-screen-glass-border": "rgba(255, 255, 255, 0.08)", "--litt-accent-blue": "#0957fd", "--litt-accent-blue-hover": "#1e64fe", "--litt-accent-blue-fg": "#ffffff", "--litt-accent-blue-text": "#6579fd", "--litt-accent-blue-tint": "#0e1a31", "--litt-focus-blue": "#5e78fe", "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-accent-pink": "#c0007e", "--litt-accent-pink-hover": "#cd1c89", "--litt-accent-pink-fg": "#ffffff", "--litt-accent-pink-text": "#feb9db", "--litt-accent-pink-tint": "#2b0d1d", "--litt-focus-pink": "#feb9db", "--litt-success": "#4bc680", "--litt-warning": "#e19b1b", "--litt-danger": "#ff756f", "--litt-danger-fg": "#0a0908", "--litt-data-blue": "#2c90e8", "--litt-data-blue-text": "#5aa8f4", "--litt-data-amber": "#c07b03", "--litt-data-amber-text": "#d79540", "--litt-data-teal": "#09a198", "--litt-data-teal-text": "#42b4ab", "--litt-data-violet": "#8f78df", "--litt-data-violet-text": "#a896ef", "--litt-data-rose": "#d55c8c", "--litt-data-rose-text": "#eb81a7", "--litt-tint-strength": "18%", "--litt-glass-bg": "rgba(17, 16, 15, 0.72)", "--litt-glass-bg-solid": "rgba(17, 16, 15, 0.94)", "--litt-glass-border": "rgba(255, 255, 255, 0.08)", "--litt-highlight": "inset 0 1px 0 rgba(255, 255, 255, 0.06)", "--litt-shadow-tooltip": "0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--litt-line-strong)", "--litt-shadow-float": "0 0 8px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.5)", "--litt-shadow-modal": "0 0 40px rgba(0, 0, 0, 0.5), 0 0 72px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.5)", "--litt-light-strength": "22%", "--litt-glow-strength": "40%", "--litt-grain-opacity": "0.04", "--litt-tray": "#070606", "--litt-tray-shade": "inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-cut": "#0d0c0b", "--litt-cut-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.8)", "--litt-block": "#2a2725", "--litt-block-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 0.5px 3px rgba(0, 0, 0, 0.55)", "--litt-block-press": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 0 1.5px rgba(0, 0, 0, 0.5)", "--litt-key-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 0.5px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.35)", "--litt-slot": "#0b0a09", "--litt-slot-shade": "inset 0 1px 2px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.07)", "--litt-slot-fill": "#3a3633", "--litt-slot-fill-shade": "inset 0 1px 1.5px rgba(0, 0, 0, 0.55)", "--litt-plate-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.6), 0 3px 6px -2px rgba(0, 0, 0, 0.7)", "--litt-cap": "#45403c", "--litt-cap-held": "#3b3734", "--litt-cap-lift": "inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(0, 0, 0, 0.7), 0 3px 5px -1px rgba(0, 0, 0, 0.7)", "--litt-cap-press": "inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.75), 0 0.5px 1px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5)", "--litt-cap-grip": "rgba(0, 0, 0, 0.5)", "--litt-notch": "rgba(255, 255, 255, 0.2)", "--litt-notch-home": "rgba(255, 255, 255, 0.5)" } }, ":root, [data-theme], .dark, .light": { "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus)", "--litt-font-sans": "var(--litt-font-choice, \"Helvetica Neue\", Helvetica, Arial, sans-serif)", "--litt-block-hover": "color-mix(in oklab, var(--litt-block), var(--litt-fg) 4%)", "--litt-data-blue-tint": "color-mix(in oklab, var(--litt-data-blue) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-amber-tint": "color-mix(in oklab, var(--litt-data-amber) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-teal-tint": "color-mix(in oklab, var(--litt-data-teal) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-violet-tint": "color-mix(in oklab, var(--litt-data-violet) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-rose-tint": "color-mix(in oklab, var(--litt-data-rose) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-field": "var(--litt-cut)", "--litt-field-ink": "var(--litt-fg)", "--litt-field-ink-subtle": "var(--litt-fg-subtle)", "--litt-field-line": "var(--litt-line-control)", "--litt-field-shade": "var(--litt-cut-shade)", "--litt-label-case": "none", "--litt-label-tracking": "var(--litt-type-caption-tracking)", "--litt-engrave": "0 0 0 transparent" }, ":root[data-accent=\"blue\"], [data-accent=\"blue\"]": { "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-blue) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-blue) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-blue) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-blue)" }, ":root[data-accent=\"pink\"], [data-accent=\"pink\"]": { "--litt-accent": "var(--litt-accent-pink)", "--litt-accent-fg": "var(--litt-accent-pink-fg)", "--litt-accent-hover": "var(--litt-accent-pink-hover)", "--litt-accent-text": "var(--litt-accent-pink-text)", "--litt-accent-tint": "var(--litt-accent-pink-tint)", "--litt-focus": "var(--litt-focus-pink)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-pink) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-pink) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-pink) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-pink)" }, ":root[data-accent=\"mono\"], [data-accent=\"mono\"]": { "--litt-accent": "var(--litt-fg)", "--litt-accent-hover": "color-mix(in oklab, var(--litt-fg), var(--litt-canvas) 18%)", "--litt-accent-fg": "var(--litt-canvas)", "--litt-accent-text": "var(--litt-fg)", "--litt-accent-tint": "color-mix(in oklab, var(--litt-fg) 7%, var(--litt-canvas))", "--litt-focus": "var(--litt-fg)", "--litt-light": "none", "--litt-glow": "var(--litt-block-lift)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-fg)" }, ":root[data-material=\"flat\"], [data-material=\"flat\"]": { "--litt-canvas": "var(--litt-flat-canvas)", "--litt-well": "var(--litt-flat-well)", "--litt-surface-1": "var(--litt-flat-surface-1)", "--litt-surface-2": "var(--litt-flat-surface-2)", "--litt-surface-3": "var(--litt-flat-surface-3)", "--litt-line": "var(--litt-flat-line)", "--litt-line-strong": "var(--litt-flat-line-strong)", "--litt-line-control": "var(--litt-flat-line-control)", "--litt-fg": "var(--litt-flat-fg)", "--litt-fg-muted": "var(--litt-flat-fg-muted)", "--litt-fg-subtle": "var(--litt-flat-fg-subtle)", "--litt-fg-disabled": "var(--litt-flat-fg-disabled)", "--litt-accent": "var(--litt-fg)", "--litt-accent-hover": "color-mix(in oklab, var(--litt-fg), var(--litt-canvas) 18%)", "--litt-accent-fg": "var(--litt-canvas)", "--litt-accent-text": "var(--litt-fg)", "--litt-accent-tint": "color-mix(in oklab, var(--litt-fg) 7%, var(--litt-canvas))", "--litt-focus": "var(--litt-fg)", "--litt-light": "none", "--litt-glow": "var(--litt-block-lift)", "--litt-font-sans": "var(--litt-font-choice, \"Geist\", \"Geist Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif)", "--litt-radius-control": "28px", "--litt-radius-surface": "16px", "--litt-highlight": "inset 0 0 0 0 transparent", "--litt-tray": "transparent", "--litt-tray-shade": "inset 0 0 0 0 transparent", "--litt-cut": "var(--litt-surface-3)", "--litt-cut-shade": "inset 0 0 0 0 transparent", "--litt-block": "var(--litt-surface-3)", "--litt-block-lift": "0 0 0 0 transparent", "--litt-block-press": "0 0 0 0 transparent", "--litt-key-lift": "0 0 0 0 transparent", "--litt-slot": "var(--litt-surface-3)", "--litt-slot-shade": "inset 0 0 0 0 transparent", "--litt-slot-fill": "color-mix(in oklab, var(--litt-surface-3), var(--litt-fg) 14%)", "--litt-slot-fill-shade": "inset 0 0 0 0 transparent", "--litt-plate-lift": "0 0 0 0 transparent", "--litt-cap": "color-mix(in oklab, var(--litt-surface-3), var(--litt-fg) 45%)", "--litt-cap-held": "color-mix(in oklab, var(--litt-surface-3), var(--litt-fg) 55%)", "--litt-cap-lift": "0 0 0 0 transparent", "--litt-cap-press": "0 0 0 0 transparent", "--litt-cap-grip": "var(--litt-surface-3)", "--litt-press-depth": "0px", "--litt-block-hover": "color-mix(in oklab, var(--litt-block), var(--litt-fg) 2.5%)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus)", "--litt-data-blue-tint": "color-mix(in oklab, var(--litt-data-blue) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-amber-tint": "color-mix(in oklab, var(--litt-data-amber) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-teal-tint": "color-mix(in oklab, var(--litt-data-teal) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-violet-tint": "color-mix(in oklab, var(--litt-data-violet) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-rose-tint": "color-mix(in oklab, var(--litt-data-rose) var(--litt-tint-strength), var(--litt-surface-1))" }, ":root[data-material=\"flat\"][data-accent=\"blue\"], [data-material=\"flat\"][data-accent=\"blue\"]": { "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-blue) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-blue) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-blue) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-blue)" }, ":root[data-material=\"flat\"][data-accent=\"pink\"], [data-material=\"flat\"][data-accent=\"pink\"]": { "--litt-accent": "var(--litt-accent-pink)", "--litt-accent-fg": "var(--litt-accent-pink-fg)", "--litt-accent-hover": "var(--litt-accent-pink-hover)", "--litt-accent-text": "var(--litt-accent-pink-text)", "--litt-accent-tint": "var(--litt-accent-pink-tint)", "--litt-focus": "var(--litt-focus-pink)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-pink) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-pink) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-pink) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-pink)" }, ":root[data-material=\"device\"], [data-material=\"device\"]": { "--litt-canvas": "var(--litt-device-canvas)", "--litt-well": "var(--litt-device-well)", "--litt-surface-1": "var(--litt-device-surface-1)", "--litt-surface-2": "var(--litt-device-surface-2)", "--litt-surface-3": "var(--litt-device-surface-3)", "--litt-line": "var(--litt-device-line)", "--litt-line-strong": "var(--litt-device-line-strong)", "--litt-line-control": "var(--litt-device-line-control)", "--litt-fg": "var(--litt-device-fg)", "--litt-fg-muted": "var(--litt-device-fg-muted)", "--litt-fg-subtle": "var(--litt-device-fg-subtle)", "--litt-fg-disabled": "var(--litt-device-fg-disabled)", "--litt-accent": "var(--litt-device-accent)", "--litt-accent-hover": "var(--litt-device-accent-hover)", "--litt-accent-fg": "var(--litt-device-accent-fg)", "--litt-accent-tint": "var(--litt-device-accent-tint)", "--litt-accent-text": "var(--litt-device-accent-text)", "--litt-accent-pink": "var(--litt-device-accent-pink)", "--litt-accent-pink-text": "var(--litt-device-accent-pink-text)", "--litt-accent-blue": "var(--litt-device-accent-blue)", "--litt-accent-blue-hover": "var(--litt-device-accent-blue-hover)", "--litt-accent-blue-text": "var(--litt-device-accent-blue-text)", "--litt-focus-blue": "var(--litt-device-focus-blue)", "--litt-focus": "var(--litt-device-focus)", "--litt-focus-pink": "var(--litt-device-accent-pink)", "--litt-success": "var(--litt-device-success)", "--litt-warning": "var(--litt-device-warning)", "--litt-danger": "var(--litt-device-danger)", "--litt-data-blue": "var(--litt-device-data-blue)", "--litt-data-blue-text": "var(--litt-device-data-blue-text)", "--litt-data-amber": "var(--litt-device-data-amber)", "--litt-data-amber-text": "var(--litt-device-data-amber-text)", "--litt-data-teal": "var(--litt-device-data-teal)", "--litt-data-teal-text": "var(--litt-device-data-teal-text)", "--litt-data-violet": "var(--litt-device-data-violet)", "--litt-data-violet-text": "var(--litt-device-data-violet-text)", "--litt-data-rose": "var(--litt-device-data-rose)", "--litt-data-rose-text": "var(--litt-device-data-rose-text)", "--litt-highlight": "var(--litt-device-highlight)", "--litt-tray": "var(--litt-device-tray)", "--litt-tray-shade": "var(--litt-device-tray-shade)", "--litt-cut": "var(--litt-device-cut)", "--litt-cut-shade": "var(--litt-device-cut-shade)", "--litt-block": "var(--litt-device-block)", "--litt-block-lift": "var(--litt-device-block-lift)", "--litt-block-press": "var(--litt-device-block-press)", "--litt-key-lift": "var(--litt-device-key-lift)", "--litt-slot": "var(--litt-device-slot)", "--litt-slot-shade": "var(--litt-device-slot-shade)", "--litt-slot-fill": "var(--litt-device-slot-fill)", "--litt-slot-fill-shade": "var(--litt-device-slot-fill-shade)", "--litt-plate-lift": "var(--litt-device-plate-lift)", "--litt-cap": "var(--litt-device-cap)", "--litt-cap-held": "var(--litt-device-cap-held)", "--litt-cap-lift": "var(--litt-device-cap-lift)", "--litt-cap-press": "var(--litt-device-cap-press)", "--litt-cap-grip": "var(--litt-device-cap-grip)", "--litt-press-depth": "2px", "--litt-block-hover": "color-mix(in oklab, var(--litt-block), var(--litt-fg) 4%)", "--litt-field": "var(--litt-device-field)", "--litt-field-ink": "var(--litt-device-field-ink)", "--litt-field-ink-subtle": "var(--litt-device-field-ink-subtle)", "--litt-field-line": "var(--litt-device-field-line)", "--litt-field-shade": "var(--litt-device-field-shade)", "--litt-field-font": "var(--litt-font-mono)", "--litt-font-sans": "var(--litt-font-choice, var(--litt-font-mono))", "--litt-label-case": "uppercase", "--litt-label-tracking": "0.08em", "--litt-engrave": "var(--litt-device-engrave)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus)", "--litt-data-blue-tint": "color-mix(in oklab, var(--litt-data-blue) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-amber-tint": "color-mix(in oklab, var(--litt-data-amber) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-teal-tint": "color-mix(in oklab, var(--litt-data-teal) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-violet-tint": "color-mix(in oklab, var(--litt-data-violet) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-rose-tint": "color-mix(in oklab, var(--litt-data-rose) var(--litt-tint-strength), var(--litt-surface-1))" }, ":root[data-material=\"device\"][data-accent=\"blue\"], [data-material=\"device\"][data-accent=\"blue\"]": { "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-blue) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-blue) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-blue) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-blue)" }, ":root[data-material=\"device\"][data-accent=\"pink\"], [data-material=\"device\"][data-accent=\"pink\"]": { "--litt-accent": "var(--litt-accent-pink)", "--litt-accent-fg": "var(--litt-accent-pink-fg)", "--litt-accent-hover": "var(--litt-accent-pink-hover)", "--litt-accent-text": "var(--litt-accent-pink-text)", "--litt-accent-tint": "var(--litt-accent-pink-tint)", "--litt-focus": "var(--litt-focus-pink)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-pink) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-pink) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-pink) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-pink)" }, ":root[data-material=\"device\"][data-accent=\"mono\"], [data-material=\"device\"][data-accent=\"mono\"]": { "--litt-accent": "var(--litt-fg)", "--litt-accent-hover": "color-mix(in oklab, var(--litt-fg), var(--litt-canvas) 18%)", "--litt-accent-fg": "var(--litt-canvas)", "--litt-accent-text": "var(--litt-fg)", "--litt-accent-tint": "color-mix(in oklab, var(--litt-fg) 7%, var(--litt-canvas))", "--litt-focus": "var(--litt-fg)", "--litt-light": "none", "--litt-glow": "var(--litt-block-lift)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-fg)" }, "[data-material=\"device\"] :is(.litt-raised, .litt-glass)": { "--litt-canvas": "var(--litt-device-screen-canvas)", "--litt-well": "var(--litt-device-screen-well)", "--litt-surface-1": "var(--litt-device-screen-surface-1)", "--litt-surface-2": "var(--litt-device-screen-surface-2)", "--litt-surface-3": "var(--litt-device-screen-surface-3)", "--litt-line": "var(--litt-device-screen-line)", "--litt-line-strong": "var(--litt-device-screen-line-strong)", "--litt-line-control": "var(--litt-device-screen-line-control)", "--litt-fg": "var(--litt-device-screen-fg)", "--litt-fg-muted": "var(--litt-device-screen-fg-muted)", "--litt-fg-subtle": "var(--litt-device-screen-fg-subtle)", "--litt-fg-disabled": "var(--litt-device-screen-fg-disabled)", "--litt-tray": "var(--litt-device-screen-tray)", "--litt-cut": "var(--litt-device-screen-cut)", "--litt-block": "var(--litt-device-screen-block)", "--litt-slot": "var(--litt-device-screen-slot)", "--litt-slot-fill": "var(--litt-device-screen-slot-fill)", "--litt-cap": "var(--litt-device-screen-cap)", "--litt-cap-held": "var(--litt-device-screen-cap-held)", "--litt-cap-grip": "var(--litt-device-screen-cap-grip)", "--litt-field": "var(--litt-device-screen-field)", "--litt-field-ink": "var(--litt-device-screen-field-ink)", "--litt-field-ink-subtle": "var(--litt-device-screen-field-ink-subtle)", "--litt-field-line": "var(--litt-device-screen-field-line)", "--litt-accent": "var(--litt-device-screen-accent)", "--litt-accent-hover": "var(--litt-device-screen-accent-hover)", "--litt-accent-text": "var(--litt-device-screen-accent-text)", "--litt-accent-fg": "var(--litt-device-screen-accent-fg)", "--litt-accent-tint": "var(--litt-device-screen-accent-tint)", "--litt-accent-pink": "var(--litt-device-screen-accent-pink)", "--litt-accent-pink-text": "var(--litt-device-screen-accent-pink-text)", "--litt-accent-blue": "var(--litt-device-screen-accent-blue)", "--litt-accent-blue-text": "var(--litt-device-screen-accent-blue-text)", "--litt-accent-blue-tint": "var(--litt-device-screen-accent-blue-tint)", "--litt-focus-blue": "var(--litt-device-screen-focus-blue)", "--litt-focus": "var(--litt-device-screen-focus)", "--litt-focus-pink": "var(--litt-device-screen-focus-pink)", "--litt-accent-pink-tint": "var(--litt-device-screen-accent-pink-tint)", "--litt-danger-fg": "var(--litt-device-screen-danger-fg)", "--litt-success": "var(--litt-device-screen-success)", "--litt-warning": "var(--litt-device-screen-warning)", "--litt-danger": "var(--litt-device-screen-danger)", "--litt-data-blue": "var(--litt-device-screen-data-blue)", "--litt-data-blue-text": "var(--litt-device-screen-data-blue-text)", "--litt-data-amber": "var(--litt-device-screen-data-amber)", "--litt-data-amber-text": "var(--litt-device-screen-data-amber-text)", "--litt-data-teal": "var(--litt-device-screen-data-teal)", "--litt-data-teal-text": "var(--litt-device-screen-data-teal-text)", "--litt-data-violet": "var(--litt-device-screen-data-violet)", "--litt-data-violet-text": "var(--litt-device-screen-data-violet-text)", "--litt-data-rose": "var(--litt-device-screen-data-rose)", "--litt-data-rose-text": "var(--litt-device-screen-data-rose-text)", "--litt-highlight": "var(--litt-device-screen-highlight)", "--litt-tray-shade": "var(--litt-device-screen-tray-shade)", "--litt-cut-shade": "var(--litt-device-screen-cut-shade)", "--litt-field-shade": "var(--litt-device-screen-field-shade)", "--litt-block-lift": "var(--litt-device-screen-block-lift)", "--litt-block-press": "var(--litt-device-screen-block-press)", "--litt-key-lift": "var(--litt-device-screen-key-lift)", "--litt-slot-shade": "var(--litt-device-screen-slot-shade)", "--litt-slot-fill-shade": "var(--litt-device-screen-slot-fill-shade)", "--litt-plate-lift": "var(--litt-device-screen-plate-lift)", "--litt-cap-lift": "var(--litt-device-screen-cap-lift)", "--litt-cap-press": "var(--litt-device-screen-cap-press)", "--litt-engrave": "var(--litt-device-screen-engrave)", "--litt-glass-bg": "var(--litt-device-screen-glass-bg)", "--litt-glass-bg-solid": "var(--litt-device-screen-glass-bg-solid)", "--litt-glass-border": "var(--litt-device-screen-glass-border)", "--litt-block-hover": "color-mix(in oklab, var(--litt-block), var(--litt-fg) 4%)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent) var(--litt-glow-strength), transparent)", "--litt-data-blue-tint": "color-mix(in oklab, var(--litt-data-blue) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-amber-tint": "color-mix(in oklab, var(--litt-data-amber) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-teal-tint": "color-mix(in oklab, var(--litt-data-teal) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-violet-tint": "color-mix(in oklab, var(--litt-data-violet) var(--litt-tint-strength), var(--litt-surface-1))", "--litt-data-rose-tint": "color-mix(in oklab, var(--litt-data-rose) var(--litt-tint-strength), var(--litt-surface-1))" }, ":is([data-material=\"device\"][data-accent=\"blue\"], [data-material=\"device\"] [data-accent=\"blue\"], [data-accent=\"blue\"] [data-material=\"device\"]) :is(.litt-raised, .litt-glass)": { "--litt-accent": "var(--litt-accent-blue)", "--litt-accent-fg": "var(--litt-accent-blue-fg)", "--litt-accent-hover": "var(--litt-accent-blue-hover)", "--litt-accent-text": "var(--litt-accent-blue-text)", "--litt-accent-tint": "var(--litt-accent-blue-tint)", "--litt-focus": "var(--litt-focus-blue)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-blue) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-blue) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-blue) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-blue)" }, ":is([data-material=\"device\"][data-accent=\"pink\"], [data-material=\"device\"] [data-accent=\"pink\"], [data-accent=\"pink\"] [data-material=\"device\"]) :is(.litt-raised, .litt-glass)": { "--litt-accent": "var(--litt-accent-pink)", "--litt-accent-fg": "var(--litt-accent-pink-fg)", "--litt-accent-hover": "var(--litt-accent-pink-hover)", "--litt-accent-text": "var(--litt-accent-pink-text)", "--litt-accent-tint": "var(--litt-accent-pink-tint)", "--litt-focus": "var(--litt-focus-pink)", "--litt-light": "radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--litt-accent-pink) var(--litt-light-strength), transparent) 0%, transparent 65%)", "--litt-glow": "0 0 0 1px color-mix(in oklab, var(--litt-accent-pink) 55%, transparent), 0 0 24px color-mix(in oklab, var(--litt-accent-pink) var(--litt-glow-strength), transparent)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-focus-pink)" }, ":is([data-material=\"device\"][data-accent=\"mono\"], [data-material=\"device\"] [data-accent=\"mono\"], [data-accent=\"mono\"] [data-material=\"device\"]) :is(.litt-raised, .litt-glass)": { "--litt-accent": "var(--litt-fg)", "--litt-accent-hover": "color-mix(in oklab, var(--litt-fg), var(--litt-canvas) 18%)", "--litt-accent-fg": "var(--litt-canvas)", "--litt-accent-text": "var(--litt-fg)", "--litt-accent-tint": "color-mix(in oklab, var(--litt-fg) 7%, var(--litt-canvas))", "--litt-focus": "var(--litt-fg)", "--litt-light": "none", "--litt-glow": "var(--litt-block-lift)", "--litt-focus-ring": "0 0 0 2px var(--litt-canvas), 0 0 0 4px var(--litt-fg)" }, "@supports not (color: color-mix(in oklab, red, blue))": { ":root, [data-theme], .dark, .light": { "--litt-light": "none", "--litt-glow": "0 0 0 1px var(--litt-accent)", "--litt-block-hover": "var(--litt-surface-2)", "--litt-data-blue-tint": "var(--litt-surface-2)", "--litt-data-amber-tint": "var(--litt-surface-2)", "--litt-data-teal-tint": "var(--litt-surface-2)", "--litt-data-violet-tint": "var(--litt-surface-2)", "--litt-data-rose-tint": "var(--litt-surface-2)" }, ":root[data-accent=\"blue\"], [data-accent=\"blue\"]": { "--litt-light": "none", "--litt-glow": "0 0 0 1px var(--litt-accent-blue)" }, ":root[data-accent=\"pink\"], [data-accent=\"pink\"]": { "--litt-light": "none", "--litt-glow": "0 0 0 1px var(--litt-accent-pink)" }, ":root[data-material=\"device\"], [data-material=\"device\"]": { "--litt-block-hover": "var(--litt-surface-2)", "--litt-data-blue-tint": "var(--litt-surface-2)", "--litt-data-amber-tint": "var(--litt-surface-2)", "--litt-data-teal-tint": "var(--litt-surface-2)", "--litt-data-violet-tint": "var(--litt-surface-2)", "--litt-data-rose-tint": "var(--litt-surface-2)" }, ":root[data-material=\"flat\"], [data-material=\"flat\"]": { "--litt-slot-fill": "var(--litt-line-strong)", "--litt-block-hover": "var(--litt-surface-2)", "--litt-cap": "var(--litt-line-control)", "--litt-cap-held": "var(--litt-fg-muted)", "--litt-data-blue-tint": "var(--litt-surface-2)", "--litt-data-amber-tint": "var(--litt-surface-2)", "--litt-data-teal-tint": "var(--litt-surface-2)", "--litt-data-violet-tint": "var(--litt-surface-2)", "--litt-data-rose-tint": "var(--litt-surface-2)" } }, "@media (prefers-reduced-motion: reduce)": { ":root, :root[data-material=\"device\"], [data-material=\"device\"]": { "--litt-dur-instant": "0ms", "--litt-dur-responsive": "0ms", "--litt-dur-expressive": "0ms", "--litt-dur-exit-responsive": "0ms", "--litt-dur-exit-expressive": "0ms", "--litt-stagger": "0ms", "--litt-travel": "0px", "--litt-press-scale": "1", "--litt-press-depth": "0px" } }, "@media (prefers-contrast: more)": { ":root, :root:not([data-theme=\"light\"], .light), [data-theme], .dark, .light, :root[data-material=\"flat\"], [data-material=\"flat\"], :root[data-material=\"device\"], [data-material=\"device\"]": { "--litt-fg-muted": "var(--litt-fg)", "--litt-fg-subtle": "var(--litt-fg)", "--litt-line": "var(--litt-line-control)", "--litt-line-strong": "var(--litt-line-control)", "--litt-glass-bg": "var(--litt-glass-bg-solid)" } }, "@layer components": { ".litt-glass": { "position": "relative", "isolation": "isolate", "border-radius": "var(--litt-radius-surface)" }, ".litt-glass::before": { "content": "\"\"", "position": "absolute", "inset": "0", "z-index": "-1", "border-radius": "inherit", "background": "var(--litt-glass-bg)", "-webkit-backdrop-filter": "blur(var(--litt-glass-blur)) saturate(var(--litt-glass-saturate))", "backdrop-filter": "blur(var(--litt-glass-blur)) saturate(var(--litt-glass-saturate))", "box-shadow": "inset 0 0 0 1px var(--litt-glass-border), var(--litt-highlight), var(--litt-glass-shadow, var(--litt-shadow-float))", "pointer-events": "none" }, ".litt-raised": { "background": "var(--litt-surface-1)", "border-radius": "var(--litt-radius-surface)", "box-shadow": "inset 0 0 0 1px var(--litt-line), var(--litt-highlight)" }, "@media (pointer: coarse)": { ".litt-target::before": { "content": "\"\"", "position": "absolute", "top": "50%", "left": "50%", "width": "max(100%, 44px)", "height": "max(100%, 44px)", "translate": "-50% -50%" } }, ".litt-trim": { "line-height": "1", "text-box": "trim-both cap alphabetic" }, ".litt-legend": { "text-transform": "var(--litt-label-case)", "letter-spacing": "var(--litt-label-tracking)", "text-shadow": "var(--litt-engrave)" }, ".litt-lit": { "background-image": "var(--litt-light)", "background-repeat": "no-repeat" }, ".litt-grain": { "position": "relative" }, ".litt-grain::after": { "content": "\"\"", "position": "absolute", "inset": "0", "border-radius": "inherit", "background-image": "var(--litt-grain)", "opacity": "var(--litt-grain-opacity)", "pointer-events": "none" }, ".litt-grain-fade::after": { "-webkit-mask-image": "linear-gradient(to bottom, black 30%, transparent 95%)", "mask-image": "linear-gradient(to bottom, black 30%, transparent 95%)" } }, "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": { ".litt-glass::before": { "background": "var(--litt-glass-bg-solid)" } }, "@media (prefers-reduced-transparency: reduce)": { ".litt-glass::before": { "background": "var(--litt-surface-1)", "-webkit-backdrop-filter": "none", "backdrop-filter": "none" } } }, "docs": "Added to your global CSS: --litt-* variables, Tailwind names such as bg-litt-surface-1 and rounded-litt-control, and the litt-glass class and its siblings. Nothing of yours is changed. Dark follows .dark, [data-theme=\"dark\"] or the system setting. For Monochrome or Pink instead of Blue 4, set data-accent=\"mono\" or \"pink\" on . For Flat instead of the press material, set data-material=\"flat\" on .", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" } }, { "name": "base-styles", "type": "registry:style", "title": "litt base styles", "description": "Optional. Loads Geist at 400, 500 and 600 and Geist Mono at 400, and applies litt's page defaults: headings and bold at the title weight, table headers at the label weight, the control radius on native controls and the litt focus ring.", "dependencies": [ "@fontsource/geist-sans", "@fontsource/geist-mono" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "css": { "@import \"@fontsource/geist-sans/400.css\"": {}, "@import \"@fontsource/geist-sans/500.css\"": {}, "@import \"@fontsource/geist-sans/600.css\"": {}, "@import \"@fontsource/geist-mono/400.css\"": {}, "@layer base": { "html": { "font-synthesis-weight": "none", "font-family": "var(--litt-font-sans)", "font-size": "100%", "-webkit-font-smoothing": "antialiased", "-moz-osx-font-smoothing": "grayscale", "text-rendering": "optimizeLegibility" }, "h1, h2, h3, h4, h5, h6, b, strong": { "font-weight": "var(--litt-weight-title)" }, "th": { "font-weight": "var(--litt-weight-label)" }, "button, input, select, textarea": { "border-radius": "var(--litt-radius-control)" }, ":focus-visible": { "outline": "2px solid var(--litt-focus)", "outline-offset": "2px" }, "[data-theme], [data-material], .dark, .light": { "font-family": "var(--litt-font-sans)" } }, ":root, [data-theme=\"light\"], .light": { "color-scheme": "light" }, "[data-theme=\"dark\"], .dark": { "color-scheme": "dark" }, "@media (prefers-color-scheme: dark)": { ":root:not([data-theme=\"light\"], .light)": { "color-scheme": "dark" } } }, "docs": "This one restyles your whole app: the html font, heading weight, button and input radius and the focus outline. No component needs it. Skip it if you only want the components.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" } }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Sections that open in place, split by hairlines: 56px triggers in headings with a chevron that turns half a turn, one section open at a time or several. The height snaps, the content fades in and drops a little, and the rows below move by transform, so the page never jumps.", "dependencies": [ "@radix-ui/react-accordion", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Accordion, AccordionItem, AccordionTrigger and AccordionContent from components/litt/accordion. Give each AccordionItem a unique value and put an AccordionTrigger and an AccordionContent in it. Use type=\"multiple\" to let several stay open (the value is then a list), defaultValue or value with onValueChange for the open state, and headingLevel to fit the page's outline.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/accordion.tsx", "type": "registry:ui", "target": "components/litt/accordion.tsx" } ] }, { "name": "action-bar", "type": "registry:ui", "title": "Action bar", "description": "A glass bar that floats at the bottom of the view while rows or cards are selected: the count in words, the actions as small buttons and Clear. A toolbar with one Tab stop and the arrow keys inside; Esc clears.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import ActionBar from components/litt/action-bar and place it after the list, inside the same scrolling area. Pass the count, a noun and onClear, and sm Buttons as children. Never an accent fill.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/action-bar.tsx", "type": "registry:ui", "target": "components/litt/action-bar.tsx" } ] }, { "name": "activity", "type": "registry:block", "title": "Activity block", "description": "A studio's activity as one screen: a filter by kind, then the events grouped by day, each one sentence with who and what in the foreground and the time in the mono. A deploy says how it ended in a tag, and Show earlier adds the day before below.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/states.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Activity from components/litt-blocks/activity and render it inside your app's shell. The sample days sit at the top of the file, newest first; Show earlier is where your next page loads. See it live at https://littmd.vercel.app/#activity.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/activity.tsx", "type": "registry:component", "target": "components/litt-blocks/activity.tsx" } ] }, { "name": "agent", "type": "registry:block", "title": "Agent block", "description": "A chat with an agent as one screen, from the first word to the deploy: the conversation, the thinking, a plan, a run of tool calls, an approval, the answer with its code and the composer. A scripted run plays every state without a model and waits for you at the approval.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/agent-indicator.json", "https://littmd.vercel.app/r/composer.json", "https://littmd.vercel.app/r/file-changes.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/log-view.json", "https://littmd.vercel.app/r/message.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/plan.json", "https://littmd.vercel.app/r/run-list.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/sources.json", "https://littmd.vercel.app/r/thinking.json", "https://littmd.vercel.app/r/tool-call.json" ], "docs": "Import AgentChat from components/litt-blocks/agent and give its box a height; the conversation scrolls inside it. The run is a script: to wire in your agent, keep LittTurn and the layout and replace useRun with your stream. See it live at https://littmd.vercel.app/#agent.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/agent.tsx", "type": "registry:component", "target": "components/litt-blocks/agent.tsx" } ] }, { "name": "agent-indicator", "type": "registry:ui", "title": "Agent indicator", "description": "What an agent is doing, in hardware: a seven-segment chase for thinking, a tuner for searching, stereo meters for reading, a dot matrix for reasoning, step lights for running and tape reels for writing, each moving only while tokens arrive. A Device part.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Needs data-material=\"device\" on . Pass the phase and it crossfades between mechanisms; pass paused to hold it. Under reduced motion each holds one frame. It says the phase in words for a screen reader.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/agent-indicator.tsx", "type": "registry:ui", "target": "components/litt/agent-indicator.tsx" } ] }, { "name": "app-shell", "type": "registry:ui", "title": "App shell", "description": "The frame around an app's pages: a 240px sidebar that runs the full height of the page with its links kept in view, and a main area. On a phone the sidebar goes, a glass top bar holds a menu button, and the nav opens in the bottom sheet.", "dependencies": [ "@radix-ui/react-dialog" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/dialog.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import AppShell, SidebarNav and SidebarLink from components/litt/app-shell. Pass a wordmark, a nav and the page. Mark the current link with current. It needs no router: pass as={Link} to a SidebarLink to use yours.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/app-shell.tsx", "type": "registry:ui", "target": "components/litt/app-shell.tsx" } ] }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A round mark for a person, a client or a company, in three sizes: a photo, or initials on the tint of one of the five data hues, picked from the name so the same name always gets the same color. A group overlaps them with a ring in the surface they sit on, and counts the rest in a +N pill.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Avatar and AvatarGroup from components/litt/avatar. Pass a name: the initials and the hue come from it unless you set a hue. Set decorative when the name is written beside the avatar. Give AvatarGroup a label, the first few avatars and a total, and match its ring to the surface it sits on.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/avatar.tsx", "type": "registry:ui", "target": "components/litt/avatar.tsx" } ] }, { "name": "bar-list", "type": "registry:ui", "title": "Bar list", "description": "A ranked list where each row carries a thin bar for its share: top pages, most-used shortcuts, busiest repos. An optional lead, a label, a 4px rail, a mono value and a change in words. The bars line up across rows, and under 28rem the bar moves under the label.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import BarList from components/litt/bar-list. Pass a label and items of { label, value }, plus a unit for screen readers. A row with an href is a link, and with onSelect the others are buttons.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/bar-list.tsx", "type": "registry:ui", "target": "components/litt/bar-list.tsx" } ] }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Where a page sits, with a slash between the levels and the current page in the foreground. Past four levels the middle folds into a round ghost button that opens the Menu, and phones show the last two levels. No motion of its own.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/menu.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Breadcrumb from components/litt/breadcrumb. Pass items as { label, href }, the last one being the current page. Pass renderLink and onNavigate to route with your router, and maxVisible to change where the trail folds.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/breadcrumb.tsx", "type": "registry:ui", "target": "components/litt/breadcrumb.tsx" } ] }, { "name": "breakdown", "type": "registry:ui", "title": "Breakdown", "description": "One whole split into its parts: a thin split rail with a segment per part in the data hues, then a row per part with its own 4px rail, a label and a mono reading, or a small legend for a tile. Storage by file type, credits by feature.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Breakdown from components/litt/breakdown. Pass a label, the parts as { label, value } largest first, and the total when there is free space. Past five parts the rest fold into Other. Pin a hue on a part to keep a kind's color across a page.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/breakdown.tsx", "type": "registry:ui", "target": "components/litt/breakdown.tsx" } ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Roomy and slightly rounded, with the label at the title weight, in primary, secondary and ghost, on the shared control scale. Hover and press are instant and never move the box.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Button from components/litt/button. Primary is the one accent fill in a view. An icon-only button needs an aria-label.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/button.tsx", "type": "registry:ui", "target": "components/litt/button.tsx" }, { "path": "registry/litt/ui/bodies/button.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/button.device.tsx" }, { "path": "registry/litt/ui/bodies/button.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/button.flat.tsx" } ] }, { "name": "callout", "type": "registry:ui", "title": "Callout", "description": "An inline note in the page flow: a tip, a heads-up or a result to act on. A raised surface with a 16px icon, a title, a line of detail, and an optional action and close button. Only the icon takes the status color, and a hidden word before the title says the same thing, so there is never a rail, a tinted fill or a colored border. It measures its own width and drops the action below the text under 28rem.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import Callout from components/litt/callout. Pass a title, a description and a tone, and an action (an sm Button or a Kbd) or onDismiss when there is something to do. Set live for a callout that appears after an action. It fills the width of its container, so give the container a width.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/callout.tsx", "type": "registry:ui", "target": "components/litt/callout.tsx" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "A raised surface for one object that links somewhere. A linked card is one real link stretched over the whole card, and hover moves the fill one step, with no lift, growth or scale.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Card, CardCover, CardBody, CardTitle, CardDescription and CardLink from components/litt/card. Put CardLink around the title to make the card a link. Anything else you can press inside it needs relative.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/card.tsx", "type": "registry:ui", "target": "components/litt/card.tsx" } ] }, { "name": "card-picker", "type": "registry:ui", "title": "Card picker", "description": "One choice shown as cards: tiles of a picture over a word in one tray, or cards with a title, a line and a detail such as a price, in a row when they fit and stacked when they do not. Native radios; the picked card is the raised block, gliding to the pick.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import CardPicker from components/litt/card-picker. Give it a legend, options ({ value, label, description, detail, picture, disabled }), and value with onValueChange. size=\"sm\" draws tiles; name and required make it a form field.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/card-picker.tsx", "type": "registry:ui", "target": "components/litt/card-picker.tsx" }, { "path": "registry/litt/ui/bodies/card-picker.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/card-picker.device.tsx" }, { "path": "registry/litt/ui/bodies/card-picker.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/card-picker.flat.tsx" } ] }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "A row of slides that scrolls sideways with the browser's own scrolling, snaps each slide to the start edge and lets the next one peek. The range in words with Previous and Next, arrow keys on the track and a mouse drag. It never moves on its own.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Carousel, CarouselContent, CarouselItem and CarouselControls from components/litt/carousel, as shadcn's carousel is written. Give Carousel a label and perView; never add autoplay.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/carousel.tsx", "type": "registry:ui", "target": "components/litt/carousel.tsx" } ] }, { "name": "cart", "type": "registry:ui", "title": "Cart", "description": "The cart as a sheet from the right (a bottom sheet on a phone): lines with a quantity and Remove undone from a toast, and a summary with a free-shipping meter, a rolling subtotal and Check out. Plus the header's cart button, Add to cart with its Added state, and useCartState, a cart in memory.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/dialog.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/media.json", "https://littmd.vercel.app/r/number-field.json", "https://littmd.vercel.app/r/price.json", "https://littmd.vercel.app/r/product-card.json", "https://littmd.vercel.app/r/rolling-number.json", "https://littmd.vercel.app/r/states.json", "https://littmd.vercel.app/r/toast.json" ], "docs": "Import Cart, CartButton, AddToCart and useCartState from components/litt/cart. Mount the Toaster once near your root for Remove's Undo. useShopifyCart from the shopify item returns the same CartState, so the parts work with either.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/cart.tsx", "type": "registry:ui", "target": "components/litt/cart.tsx" } ] }, { "name": "case-study", "type": "registry:block", "title": "Case study block", "description": "One project told as a page: a wide hero image, the facts in a row, the story with its labels in a narrow left column, the series in a carousel, the details in a grid and the next project as a card. Every image opens one lightbox that runs through them all, and the carousel follows it.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/breadcrumb.json", "https://littmd.vercel.app/r/card.json", "https://littmd.vercel.app/r/carousel.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/lightbox.json", "https://littmd.vercel.app/r/list-cover.json", "https://littmd.vercel.app/r/media.json" ], "docs": "Import CaseStudy from components/litt-blocks/case-study and render it as a page's content. The project, its words and its images sit at the top of the file: replace the drawn stand-ins with your images and give each its width and height. See it live at https://littmd.vercel.app/#case-study.", "meta": { "version": "2026.11.07", "released": "2026-11-07", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/case-study.tsx", "type": "registry:component", "target": "components/litt-blocks/case-study.tsx" } ] }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Bar, line and stacked charts in plain SVG, and a meter. The marks are never the accent: the quiet foreground by default, one series at 55% with the current mark full or up to three stepping down, or up to five data hues when color tells the series apart. The stacked chart draws each category's parts as one thin rail, a hue per series, with the total in the tooltip. Hairline gridlines, mono labels, a tooltip on hover and focus, and one entrance on the responsive tier.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import BarChart, LineChart, StackedBarChart and Meter from components/litt/chart. Pass a label, the category labels and series of { name, values }, with an optional hue per series or hues on the chart. The chart measures its container, so give it a width. Every chart ships a hidden table and a summary for screen readers.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/chart.tsx", "type": "registry:ui", "target": "components/litt/chart.tsx" } ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox and radio", "description": "Real checkboxes and radios drawn in the litt look, with the label on the right and the whole row clickable. A group is a fieldset with a legend, and a select-all box can show the mixed state.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Checkbox, CheckboxGroup, Radio and RadioGroup from components/litt/checkbox. They are native inputs, so name and value work in a form. Pass appearance=\"native\" for the browser's own 16px box.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/checkbox.tsx", "type": "registry:ui", "target": "components/litt/checkbox.tsx" }, { "path": "registry/litt/ui/bodies/checkbox.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/checkbox.device.tsx" }, { "path": "registry/litt/ui/bodies/checkbox.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/checkbox.flat.tsx" } ] }, { "name": "code-block", "type": "registry:ui", "title": "Code block", "description": "Code in an answer, a tool's output or a diff: mono on a quiet surface with a 32px header that holds the file name and a Copy button. tsx, ts, jsx and js are highlighted in the foreground's tones only (strings take a hint of the accent text), a diff shows a + in success and a - in danger on a faint band with hidden \"Added\" and \"Removed\" words, line numbers sit in a gutter that is not selected or copied, and long lines scroll sideways inside a focusable, labelled block. Static.", "dependencies": [ "sugar-high" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import CodeBlock from components/litt/code-block. Pass the code, a lang (tsx, ts, jsx, js, diff, shell or text) and a filename for the header. The label names the scroll area and defaults to the file name. lineNumbers adds a gutter, wrap wraps long lines, and maxHeight (a number or a CSS length) makes a tall block scroll. A diff reads each line's first character as its sign. The syntax colors are declared on the block itself, so it needs no stylesheet. It imports sugar-high.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/code-block.tsx", "type": "registry:ui", "target": "components/litt/code-block.tsx" } ] }, { "name": "code-input", "type": "registry:ui", "title": "Code input", "description": "A short one-time code drawn as one cell per character but built as one real field, so paste, one-time-code autofill and screen readers work as in any field. The last character runs onComplete once.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import CodeInput from components/litt/code-input. Give it a label and check the code in onComplete; show what was wrong in error.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/code-input.tsx", "type": "registry:ui", "target": "components/litt/code-input.tsx" }, { "path": "registry/litt/ui/bodies/code-input.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/code-input.device.tsx" }, { "path": "registry/litt/ui/bodies/code-input.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/code-input.flat.tsx" } ] }, { "name": "cohort-grid", "type": "registry:ui", "title": "Cohort grid", "description": "Retention by signup week as a real table: a row per cohort, a column per period since signup, and in every cell the number in mono with a dot before it in one data hue's four steps. Younger cohorts have fewer periods and their empty cells draw nothing. An optional row sums up every cohort, weighted by size. The cohort column stays put while the periods scroll sideways inside the grid's own box. Static, with a legend from less to more.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import CohortGrid from components/litt/cohort-grid. Pass a label and cohorts as { label, size, values }, oldest first. Each value is the share still active (0 to 100), or a count with valueType=\"count\", and a missing or null value is a period the cohort has not reached. Set periodLabel=\"Month\" or pass periods for other headers. Add average for an All cohorts row and pick a hue.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/cohort-grid.tsx", "type": "registry:ui", "target": "components/litt/cohort-grid.tsx" } ] }, { "name": "collection", "type": "registry:block", "title": "Collection block", "description": "A store's products as a grid: the title and the count, a filter row with what to show and the order, product cards with no buy buttons (two across on a phone), an empty state for a filter with nothing in it, and the cart as a sheet.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/cart.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/price.json", "https://littmd.vercel.app/r/product-card.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/states.json" ], "docs": "Import Collection from components/litt-blocks/collection and render it as a page's content. The products sit at the top of the file: replace them with yours, or with the ones the shopify item's toProduct maps from a collection. See it live at https://littmd.vercel.app/#collection.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/collection.tsx", "type": "registry:component", "target": "components/litt-blocks/collection.tsx" } ] }, { "name": "color-picker", "type": "registry:ui", "title": "Color picker", "description": "One color as a hex string: a saturation and brightness area, a hue rail, the hex in mono, an eyedropper where the browser has one, and optional swatches as radios. A field in the Select trigger's look opens it in a popover, a bottom sheet on a phone. The thumbs follow the pointer and the keys at once, and every input says the color in words.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/popover.json" ], "docs": "Import ColorPicker and ColorPanel from components/litt/color-picker, plus parseHex, describeColor, getContrastInk, hexToHsv and hsvToHex. Values are six-digit lowercase hex strings with the hash. ColorPicker needs a label; hold the value in state with value and onValueChange (null for none), pass name for a form, and swatches as { label, value }. Save with onValueCommit, which fires on release. Use getContrastInk for text drawn on the picked color.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/color-picker.tsx", "type": "registry:ui", "target": "components/litt/color-picker.tsx" } ] }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Type to find one value, or several, in a long list: a client, a framework, a teammate. The Input's field with the Menu's glass list under it: filtered as you type, ignoring case and accents, with the first match lit, one gliding highlight, a check on each pick and optional group labels. With multiple the picks sit in the field as removable tokens. Solid inside a dialog, and anchored under the field on a phone.", "dependencies": [ "@radix-ui/react-popover", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/glide.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Combobox from components/litt/combobox. Give it a label and options as { value, label, disabled?, group? } or groups of { label, options }, and hold the value in state with value and onValueChange: a string (\"\" for none), or an array with multiple. Add hint, error and placeholder as on a field, and name to post the value with a form.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/combobox.tsx", "type": "registry:ui", "target": "components/litt/combobox.tsx" } ] }, { "name": "command-menu", "type": "registry:ui", "title": "Command menu", "description": "Search every page, project and action from the keyboard. The panel drops in over a dimmed canvas and one highlight glides between rows.", "dependencies": [ "@radix-ui/react-dialog", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/glide.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/kbd.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import CommandMenu and useCommandShortcut from components/litt/command-menu. Give it groups of items and an onSelect.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/command-menu.tsx", "type": "registry:ui", "target": "components/litt/command-menu.tsx" } ] }, { "name": "composer", "type": "registry:ui", "title": "Composer", "description": "Where the person writes to an agent: a box on surface-1 with the Input's edge, a text field that grows a line at a time to eight rows, file chips, a toolbar for your controls and a round Send that turns into Stop while the agent answers. Send is the view's one accent fill. Enter sends, Shift+Enter starts a line, Esc stops, and Enter never sends mid-composition. Attach, paste and drop add files, suggestions fill the field, and a count shows near maxLength. FileChip is exported for a message that was already sent.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Composer (and FileChip) from components/litt/composer. Hold the files yourself and pass onSend, streaming and onStop: the field clears after a send, and Send becomes Stop while streaming is true. Pass onFiles to show Attach and take pastes and drops, files and onRemoveFile to draw the chips, tools for a model Select at sm, suggestions for an empty chat, hint for a line under the box, and maxLength for the count. On a touch screen Return adds a line and Send sends by itself (enterSends overrides it); keep the composer above the keyboard with useVisibleScreen.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/composer.tsx", "type": "registry:ui", "target": "components/litt/composer.tsx" }, { "path": "registry/litt/ui/bodies/composer.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/composer.device.tsx" }, { "path": "registry/litt/ui/bodies/composer.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/composer.flat.tsx" } ] }, { "name": "context-menu", "type": "registry:ui", "title": "Context menu", "description": "The Menu at the pointer: a right-click, Shift+F10 or a 500ms hold on touch. The same glass, rows, gliding highlight and solid submenus as the Menu, grown from the pointer's corner, and on a phone a submenu that replaces the list in place.", "dependencies": [ "@radix-ui/react-context-menu", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/menu.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import ContextMenu from components/litt/context-menu and fill it with the Menu's rows from components/litt/menu. Pass the target element as trigger and a label. Every action in it must also be reachable another way, such as a Menu on the row.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/context-menu.tsx", "type": "registry:ui", "target": "components/litt/context-menu.tsx" } ] }, { "name": "copy-button", "type": "registry:ui", "title": "Copy button", "description": "A key that copies a command shown on LCD glass: the key sinks its 2px, the check draws in, and the command's glyphs decode back in a wave. A Device part.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Needs data-material=\"device\" on . Pass the text to copy; it says Copied for a moment and goes back. Under reduced motion the glyphs swap at once.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/copy-button.tsx", "type": "registry:ui", "target": "components/litt/copy-button.tsx" } ] }, { "name": "curve-editor", "type": "registry:ui", "title": "Curve editor", "description": "An easing shaped by hand, as a cubic Bézier: two round caps pull the curve from its start and its end, on a well that shows progress from -0.25 to 1.25. It writes the curve as CSS, says what it feels like in words, and a dot crosses a rail on it when you let go.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import CurveEditor from components/litt/curve-editor. Give it a label and hold the curve ([x1, y1, x2, y2]) in state with value and onValueChange; toCubicBezier writes it as CSS. Pass defaultMark to show the default and duration for the preview. Each handle is one tab stop with two range inputs.", "meta": { "version": "2026.10.27", "released": "2026-10-27", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/curve-editor.tsx", "type": "registry:ui", "target": "components/litt/curve-editor.tsx" } ] }, { "name": "dashboard", "type": "registry:block", "title": "Dashboard block", "description": "A deploy dashboard as one screen: an app shell with a full-height sidebar, four number tiles, a chart of deploys per day and a table of recent deploys with its pagination. On a phone the sidebar becomes a top bar and its nav opens in the bottom sheet.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/app-shell.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/pagination.json", "https://littmd.vercel.app/r/stat.json", "https://littmd.vercel.app/r/table.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Dashboard from components/litt-blocks/dashboard and render it as a whole page. The sample deploys and the sidebar links sit at the top of the file: replace them with your data and your routes. See it live at https://littmd.vercel.app/#dashboard.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/dashboard.tsx", "type": "registry:component", "target": "components/litt-blocks/dashboard.tsx" } ] }, { "name": "date-picker", "type": "registry:ui", "title": "Date picker", "description": "A day or a range from a month calendar, as YYYY-MM-DD strings. A field in the Select trigger's look opens the calendar in a popover, a bottom sheet on a phone, with optional presets. Day numbers in mono, the picked day filled with the foreground, today ringed, six weeks always, the full date-grid keyboard, and months that slide in from the side they come from.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/popover.json" ], "docs": "Import DatePicker and Calendar from components/litt/date-picker, plus getToday, addDays and getWeekday for date math on YYYY-MM-DD strings. Values are YYYY-MM-DD strings, or { start, end } with mode=\"range\". DatePicker needs a label; hold the value in state with value and onValueChange, and pass name for a form (a range sends name-start and name-end). min, max and isDisabled rule days out; presets take { label, value }.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/date-picker.tsx", "type": "registry:ui", "target": "components/litt/date-picker.tsx" } ] }, { "name": "deployment", "type": "registry:block", "title": "Deployment block", "description": "One deploy as a screen: its commit and who started it, the status, the facts and a progress rail, then the changed files in a tree beside the build log with a line to drag, and each file's diff a press away. On a phone the two take turns.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/breadcrumb.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/code-block.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/hover-card.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/log-view.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/progress.json", "https://littmd.vercel.app/r/resizable.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/tag.json", "https://littmd.vercel.app/r/tree.json" ], "docs": "Import Deployment from components/litt-blocks/deployment and render it inside your app's shell. The deploy, its files and diffs and the build script sit at the top of the file; replace useBuild with your build's stream. See it live at https://littmd.vercel.app/#deployment.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/deployment.tsx", "type": "registry:component", "target": "components/litt-blocks/deployment.tsx" } ] }, { "name": "details", "type": "registry:ui", "title": "Details", "description": "An information card of labelled facts about one thing, such as a deployment or a client: rows with the labels in one column, or a grid with each label above its value. Values can be copied, a missing one says Not set, and a loading card keeps its height.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/states.json" ], "docs": "Import Details, DetailsItem and DetailsLink from components/litt/details. Give Details a title and one DetailsItem per fact, with copy on the values people paste. Use layout=\"grid\" for a few short facts, and bare inside a dialog or a panel.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/details.tsx", "type": "registry:ui", "target": "components/litt/details.tsx" } ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "The one expressive moment. The panel is placed, not thrown: it rises a short distance and settles, and exits are quicker and never bounce.", "dependencies": [ "@radix-ui/react-dialog", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Dialog, DialogTrigger, DialogContent and DialogClose from components/litt/dialog. Pair a form's submit with a Cancel, both at size md.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/dialog.tsx", "type": "registry:ui", "target": "components/litt/dialog.tsx" } ] }, { "name": "dot-plot", "type": "registry:ui", "title": "Dot plot", "description": "A distribution drawn as stacks of dots, mirrored about a center line, so you see where most values fall. With a goal, dots inside it take a data hue and the rest stay gray; the median is a line, an outlier can be named, and the legend gives the shares in numbers.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import DotPlot from components/litt/dot-plot. Pass a label, the values, a scale (log for durations) and a formatValue. Add a goal to split the dots, markers to name outliers. It measures its container, so give it a width. Each non-empty column is reachable with the arrow keys.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/dot-plot.tsx", "type": "registry:ui", "target": "components/litt/dot-plot.tsx" } ] }, { "name": "file-changes", "type": "registry:ui", "title": "File changes", "description": "What an agent changed in a codebase, to review before keeping it: the files added, modified, deleted and renamed, each with its lines added and removed said in words and figures, each opening to its diff, each kept or undone on its row, and Keep all and Undo all for the rest. Send keeps the view's accent fill: Keep all is a raised block unless accent is set on a screen with no composer.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/code-block.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/rolling-number.json", "https://littmd.vercel.app/r/tooltip.json" ], "docs": "Import FileChanges from components/litt/file-changes. Pass changes ({ id, path, kind, diff?, added?, removed?, from? for a rename, state? }) and onDecide(ids, decision), and set each change's state from it: the component holds no decision of its own. Use one change in an edit call's details and every change at the end of the turn.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/file-changes.tsx", "type": "registry:ui", "target": "components/litt/file-changes.tsx" } ] }, { "name": "file-drop", "type": "registry:ui", "title": "File drop", "description": "An area to drop files on or choose them from, that turns away the wrong type or size and says why, and rows that show each file uploading on a Progress rail, with Retry for one that failed.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/progress.json" ], "docs": "Import FileDrop, FileList and FileRow from components/litt/file-drop. FileDrop hands the files that passed to onFiles; you upload them and render a FileRow for each.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/file-drop.tsx", "type": "registry:ui", "target": "components/litt/file-drop.tsx" }, { "path": "registry/litt/ui/bodies/file-drop.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/file-drop.device.tsx" }, { "path": "registry/litt/ui/bodies/file-drop.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/file-drop.flat.tsx" } ] }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "The pieces that turn fields into a page: settings sections, fieldsets, an error summary that takes focus and links to each field, and the action row.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import FormSection, Fieldset, ErrorSummary and FormActions from components/litt/form. The fields themselves come from input, select, checkbox, switch and slider.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/form.tsx", "type": "registry:ui", "target": "components/litt/form.tsx" } ] }, { "name": "framed", "type": "registry:ui", "title": "Framed", "description": "Whether a whole screen stands alone or sits inside a page that has its own main landmark and h1. Inside Framed, a block's Main is a div and its headings drop one level, so the page keeps one main, one h1 and an outline that never skips.", "docs": "Import Framed from components/litt/framed and wrap a block's preview in it, such as a screen shown in a docs page. A block rendered as your page needs nothing.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/framed.tsx", "type": "registry:ui", "target": "components/litt/framed.tsx" } ] }, { "name": "funnel", "type": "registry:ui", "title": "Funnel", "description": "How many went on at each step, as rows rather than a trapezoid: a thin 4px rail per step filled to its share of the first, in one data hue, with the label and a mono reading beside it, and between two steps a quiet line that says in words how many went on (\"38% continued\"). The header ends with the overall conversion. Static. Visited, signed up, activated, paid.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Funnel from components/litt/funnel. Pass a label and the steps as { label, value } in the order people go through them. Every rail is measured against the first step. hue picks the one data hue (blue by default), unit or formatValue writes the numbers, overallText replaces \"4.1% overall\", and formatStep(value, previous) rewrites the line between steps.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/funnel.tsx", "type": "registry:ui", "target": "components/litt/funnel.tsx" } ] }, { "name": "gauge", "type": "registry:ui", "title": "Gauge", "description": "One value against a range on a semicircle of fine ticks, with the label, the figure and a caption in the opening. The ticks up to the value take the foreground or one data hue, and the last, longer tick marks the value. Static, like the meter.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Gauge from components/litt/gauge. Pass a label, a value, a max and a value text (what a screen reader hears); add a figure, a caption or a hue. It scales down to its container.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/gauge.tsx", "type": "registry:ui", "target": "components/litt/gauge.tsx" } ] }, { "name": "glide", "type": "registry:lib", "title": "Glide", "description": "The highlight that glides from row to row in the Menu and the Command menu.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Installed in lib/litt/glide.tsx. Menu and Command menu use it for you.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/lib/glide.tsx", "type": "registry:lib", "target": "lib/litt/glide.tsx" } ] }, { "name": "growth", "type": "registry:block", "title": "Growth block", "description": "Twelve weeks of growth as one screen: sign-ups by source as thin stacked columns with a legend and a week range that filter them, the funnel from visit to paid and retention by signup week. Each source keeps one data hue.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/cohort-grid.json", "https://littmd.vercel.app/r/funnel.json", "https://littmd.vercel.app/r/legend.json", "https://littmd.vercel.app/r/slider.json", "https://littmd.vercel.app/r/sparkline.json", "https://littmd.vercel.app/r/stat.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Growth from components/litt-blocks/growth. The sample weeks and sources sit at the top of the file: give each of your sources its own hue and keep it when the legend hides one. See it live at https://littmd.vercel.app/#growth.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/growth.tsx", "type": "registry:component", "target": "components/litt-blocks/growth.tsx" } ] }, { "name": "header", "type": "registry:ui", "title": "Glass header", "description": "A sticky glass bar with a wordmark, a nav and your actions. The page blurs under it as it scrolls, and on a narrow bar the links fold behind a menu button instead of squeezing.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/menu.json" ], "docs": "Import Header from components/litt/header. Pass a wordmark, links with a current flag and your actions. It needs no router and no provider; pass renderLink and onNavigate to use yours.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/header.tsx", "type": "registry:ui", "target": "components/litt/header.tsx" } ] }, { "name": "heatmap", "type": "registry:ui", "title": "Heatmap", "description": "A dot matrix whose depth says how much: usage per day in a month, deploys per day over a year, mail per hour of the week. One data hue in four steps over an empty dot, row labels and totals in mono, a tooltip on hover, touch and focus, and a legend from less to more. A wide grid scrolls sideways inside its own box.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Heatmap from components/litt/heatmap. Pass a label, rows of { label, values, total? } and columns that name each column, and pick a hue. Use null for a day with no data. The dots are a grid you can arrow through.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/heatmap.tsx", "type": "registry:ui", "target": "components/litt/heatmap.tsx" } ] }, { "name": "hover-card", "type": "registry:ui", "title": "Hover card", "description": "A preview of what a link points at, opened after the pointer rests on it or at once on keyboard focus, and kept while the pointer crosses into it. Floating glass that grows from the link on the responsive tier. A touch never opens it.", "dependencies": [ "@radix-ui/react-popover", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import HoverCard, HoverCardTrigger and HoverCardContent from components/litt/hover-card, as shadcn's hover card is written. The trigger must be a real link to the same information: never put anything only in the card.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/hover-card.tsx", "type": "registry:ui", "target": "components/litt/hover-card.tsx" } ] }, { "name": "icons", "type": "registry:ui", "title": "Icons", "description": "99 solid icons and a status mark on one 16-unit grid: filled shapes with their details cut out, lines at 1.5, four keylines, in the text color.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import the icons you need from components/litt/icons. They are decorative unless you label them. Draw a missing one on the same grid, never from another set.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/icons.tsx", "type": "registry:ui", "target": "components/litt/icons.tsx" } ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "A roomy, slightly rounded text field on the 32, 44 and 56 scale, with a label above and a hint or an error below. Focus and error turn the edge on the instant tier, and the box never moves.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import TextField, Input and Textarea from components/litt/input. TextField wires the label, hint and error for you, and a bare Input needs an aria-label. Text is 16px on touch screens.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/input.tsx", "type": "registry:ui", "target": "components/litt/input.tsx" }, { "path": "registry/litt/ui/bodies/input.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/input.device.tsx" }, { "path": "registry/litt/ui/bodies/input.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/input.flat.tsx" } ] }, { "name": "insights", "type": "registry:block", "title": "Insights block", "description": "Seven raised panels, one idea each: reply times as a dot plot, shortcuts as a bar list, a mail rule, a voice pad, a deploy timeline, a credits gauge and a heatmap of credits by day. Two columns when wide, one on a phone, and Create rule is the one accent fill.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/bar-list.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/callout.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/dot-plot.json", "https://littmd.vercel.app/r/gauge.json", "https://littmd.vercel.app/r/heatmap.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/kbd.json", "https://littmd.vercel.app/r/pad.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/tag.json", "https://littmd.vercel.app/r/timeline.json", "https://littmd.vercel.app/r/token-input.json" ], "docs": "Import Insights from components/litt-blocks/insights, or copy the panels you need: each is its own function in the file, with its sample data above it. See it live at https://littmd.vercel.app/#insights.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/insights.tsx", "type": "registry:component", "target": "components/litt-blocks/insights.tsx" } ] }, { "name": "inspector", "type": "registry:ui", "title": "Inspector", "description": "A floating glass panel for tuning one thing live, built from litt's own controls: groups that fold, versions you save and go back to, a check against your rules with a Fits or Change row each, and Copy tokens.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Inspector and InspectorGroup from components/litt/inspector. Hold every value in one object and pass it as value with onValueChange, then put a Slider, a Switch, a Spring editor or a Curve editor in each InspectorGroup. Add defaultValue for Reset, presets and storageKey for versions, checks for the rules and tokens for Copy tokens.", "meta": { "version": "2026.10.27", "released": "2026-10-27", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/inspector.tsx", "type": "registry:ui", "target": "components/litt/inspector.tsx" } ] }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "The key cap for a real shortcut, such as ⌘K or esc. One chip everywhere, in Geist Mono.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Kbd from components/litt/kbd. Use it for real shortcuts only.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/kbd.tsx", "type": "registry:ui", "target": "components/litt/kbd.tsx" } ] }, { "name": "legend", "type": "registry:ui", "title": "Legend", "description": "Toggles which series a chart shows: a wrapping row of buttons, each a 12 by 4px hued rail swatch, the name and an optional mono reading, pressed while its series shows. Hidden turns the swatch to the grey track and the name to the subtle ink. The last shown series cannot be hidden.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Legend and legendHues from components/litt/legend. Pass a label and the items as { name, hue?, value? } in the chart's order, five at most. Control it with hidden and onHiddenChange, or start it with defaultHidden. Pass the chart only the shown series, each with hue: legendHues(items)[name], so a series keeps its color when another is hidden, and turn the chart's own legend off with legend={false}. Alt with a click or Enter shows only that series.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/legend.tsx", "type": "registry:ui", "target": "components/litt/legend.tsx" }, { "path": "registry/litt/ui/bodies/legend.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/legend.device.tsx" }, { "path": "registry/litt/ui/bodies/legend.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/legend.flat.tsx" } ] }, { "name": "lightbox", "type": "registry:ui", "title": "Lightbox", "description": "One image of a set at the size of the screen, on the canvas, opened from a Media. Opening is the view's expressive moment; arrow keys, Previous and Next or a swipe move through the set, and Esc, Close or a click around the image closes it.", "dependencies": [ "@radix-ui/react-dialog", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/media.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Lightbox from components/litt/lightbox and hold the open index in state: set it from each Media's onOpen and pass setIndex as onIndexChange. Give each item its width and height.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/lightbox.tsx", "type": "registry:ui", "target": "components/litt/lightbox.tsx" } ] }, { "name": "list", "type": "registry:ui", "title": "List and cards", "description": "Airy project rows and raised cards that arrive in one staggered cascade. Filtering and inserting stay responsive, and hover never moves anything.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/list-cover.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/states.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import ProjectList, ProjectGrid, ProjectFilters and ProjectsEmpty from components/litt/list.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/list.tsx", "type": "registry:ui", "target": "components/litt/list.tsx" } ] }, { "name": "list-cover", "type": "registry:ui", "title": "List cover", "description": "The generated cover art used by project rows and cards.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import ProjectCover from components/litt/list-cover.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/list-cover.tsx", "type": "registry:ui", "target": "components/litt/list-cover.tsx" } ] }, { "name": "log-view", "type": "registry:ui", "title": "Log view", "description": "A build's or a deploy's output as it arrives, on the code block's surface: numbered, timed lines, warnings and errors in their status color with a mark and a hidden word, following the newest line until you scroll up to read.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import LogView and LogLine from components/litt/log-view. Append lines ({ time, level, text }) as the run writes, and give it a height. Say how the run ended in your own status; lines are not read out one by one.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/log-view.tsx", "type": "registry:ui", "target": "components/litt/log-view.tsx" } ] }, { "name": "media", "type": "registry:ui", "title": "Media", "description": "One picture in a frame with a fixed shape, so the page never jumps when it arrives: still surface-2 while it loads, a fade in on the instant tier, and its words when it fails. A hairline lies over the image, and with onOpen the frame is a button that opens a Lightbox.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import Media from components/litt/media. Pass src, a sentence of alt text and a ratio; priority only for the image the page opens on. Use it for every image in the page flow instead of a bare img.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/media.tsx", "type": "registry:ui", "target": "components/litt/media.tsx" } ] }, { "name": "menu", "type": "registry:ui", "title": "Menu", "description": "A glass dropdown with one highlight that glides from row to row. It grows from its trigger and travels from the side it really opens on.", "dependencies": [ "@radix-ui/react-dropdown-menu", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/glide.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Menu and MenuItem from components/litt/menu. Its submenus are solid, never glass on glass.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/menu.tsx", "type": "registry:ui", "target": "components/litt/menu.tsx" } ] }, { "name": "message", "type": "registry:ui", "title": "Message", "description": "A chat between a person and an agent. The agent's words sit on the page with no bubble, and the person's turn is a raised bubble on the right. MessageText styles what a markdown renderer produces, with no library: paragraphs, lists, accent links, inline code, a quiet pre and quotes with no rail. MessageActions puts Copy and Retry under a finished answer, and a turn that stopped says so with a Retry button. The conversation scrolls on its own in a column up to 48rem, follows the newest line while an answer streams, and offers Jump to latest once you scroll up.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/tooltip.json" ], "docs": "Import Conversation, Message, MessageText and MessageActions from components/litt/message. Give the Conversation a label and a height, and mark it busy while the agent answers. Inside it put a Message with from=\"user\" for the person's turn, and a Message for the agent's, holding a MessageText (your markdown renderer's output goes inside it) and actions={}. Pass streaming while the text arrives, and error with onRetry for a turn that stopped.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/message.tsx", "type": "registry:ui", "target": "components/litt/message.tsx" } ] }, { "name": "motion", "type": "registry:lib", "title": "Motion", "description": "The motion engine the components share. Hooks for the instant, responsive and expressive tiers, exits, travel and stagger, and the compact and coarse device signals, all reading litt's tokens.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Installed in lib/litt/motion. The components use it for you, and it needs no provider. Fun mode, a trial, is a around the app: springier motion, the same at rest.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/lib/motion/index.tsx", "type": "registry:lib", "target": "lib/litt/motion/index.tsx" }, { "path": "registry/litt/lib/motion/spring.ts", "type": "registry:lib", "target": "lib/litt/motion/spring.ts" }, { "path": "registry/litt/lib/motion/tokens.ts", "type": "registry:lib", "target": "lib/litt/motion/tokens.ts" }, { "path": "registry/litt/lib/motion/rules.ts", "type": "registry:lib", "target": "lib/litt/motion/rules.ts" }, { "path": "registry/litt/lib/motion/device.ts", "type": "registry:lib", "target": "lib/litt/motion/device.ts" }, { "path": "registry/litt/lib/motion/drag.ts", "type": "registry:lib", "target": "lib/litt/motion/drag.ts" }, { "path": "registry/litt/lib/motion/deal.ts", "type": "registry:lib", "target": "lib/litt/motion/deal.ts" }, { "path": "registry/litt/lib/motion/hand.ts", "type": "registry:lib", "target": "lib/litt/motion/hand.ts" }, { "path": "registry/litt/lib/motion/fun.tsx", "type": "registry:lib", "target": "lib/litt/motion/fun.tsx" } ] }, { "name": "number-field", "type": "registry:ui", "title": "Number field", "description": "A labelled number with − and + inside the field's end: steps by the arrow keys, a press or a hold, reads what is typed in the page's locale, keeps it between its bounds and on its step, and shows it formatted with Intl.NumberFormat.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import NumberField from components/litt/number-field. Pass a label, min, max and step, and a unit or a format for a currency or a percent. The value is a number, or null when empty.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/number-field.tsx", "type": "registry:ui", "target": "components/litt/number-field.tsx" }, { "path": "registry/litt/ui/bodies/number-field.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/number-field.device.tsx" }, { "path": "registry/litt/ui/bodies/number-field.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/number-field.flat.tsx" } ] }, { "name": "option-picker", "type": "registry:ui", "title": "Option picker", "description": "One option of a product (a size, a frame, a color) as native radios with a visible legend that names the pick. Words take the segmented track, colors and images take chips with a check in black or white. A sold-out value stays pickable and says so in words.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import OptionPicker from components/litt/option-picker. Pass the option's name and values; give values a swatch ({ color } or { image }) to show chips. optionsFor from product-card marks which values are sold out among the other picks.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/option-picker.tsx", "type": "registry:ui", "target": "components/litt/option-picker.tsx" }, { "path": "registry/litt/ui/bodies/option-picker.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/option-picker.device.tsx" }, { "path": "registry/litt/ui/bodies/option-picker.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/option-picker.flat.tsx" } ] }, { "name": "pad", "type": "registry:ui", "title": "Pad", "description": "Two values set at once on one surface, like a reply's tone against its length. A well with a static dot grid, a round thumb with dashed crosshairs, a dashed circle for the default, and a tooltip that says the value in words. It is the Slider in two dimensions, in the foreground and never the accent.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Pad from components/litt/pad. Give it a label, an x and a y axis ({ label, min, max, step, minLabel, maxLabel }), and hold the value in state with value and onValueChange. Pass defaultMark to show the default and formatValue to say the value in words. Each axis is a range input for the keyboard and screen readers, and the arrow keys move it.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/pad.tsx", "type": "registry:ui", "target": "components/litt/pad.tsx" } ] }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Previous and next for a table that shows one page of many. The range comes first, in words and mono, like 21 to 40 of 143. Page numbers show only when the row is wide enough, and the buttons at either end disable.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/seven-segment.json" ], "docs": "Import Pagination from components/litt/pagination. Hold the page in state and pass page, pageSize, total and onPageChange. Give it a label that says what is paged.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/pagination.tsx", "type": "registry:ui", "target": "components/litt/pagination.tsx" }, { "path": "registry/litt/ui/bodies/pagination.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/pagination.device.tsx" }, { "path": "registry/litt/ui/bodies/pagination.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/pagination.flat.tsx" } ] }, { "name": "plan", "type": "registry:ui", "title": "Plan", "description": "An agent's steps for a task, ticked off as it works: the label and a mono count (\"3 of 7\") over a 4px rail in the foreground, then an ordered list of steps, each with a 16px status mark. The running step is a half-filled circle that never spins, a done step steps its color back and is never struck through, a failed step has a danger x and says Failed, a skipped one is a dashed circle that says Skipped, and any step can carry a detail line. A polite live region says which step started and when the plan is done. Statuses swap at once, and a step added later fades in.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Plan from components/litt/plan. Pass a label and steps of { id, label, status, detail? }, with status one of pending, running, done, failed or skipped. Hold the steps in state and change a status in place as the agent works, and give every step a stable id so only a step you add later fades in. The count is the done steps over all steps, and failed and skipped steps do not count. It fills its container and has no card, so put it in a turn or in a panel you draw.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/plan.tsx", "type": "registry:ui", "target": "components/litt/plan.tsx" } ] }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "A floating glass panel for a small form, a share link or a detail card. It grows from its trigger's corner, slides in from the side it really opens on, and flips near an edge.", "dependencies": [ "@radix-ui/react-dialog", "@radix-ui/react-popover", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/dialog.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Popover, PopoverTrigger, PopoverContent and PopoverClose from components/litt/popover. It turns solid when its trigger sits inside glass.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/popover.tsx", "type": "registry:ui", "target": "components/litt/popover.tsx" } ] }, { "name": "price", "type": "registry:ui", "title": "Price", "description": "One amount at the title weight with tabular figures, formatted from Shopify's MoneyV2 shape (an amount and a currency code) in the page's locale. A sale strikes the old price through with hidden words, and can add a neutral tag with the saving. Never red, never the accent.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Price and formatMoney from components/litt/price. Pass price as { amount, currencyCode }; compareAt shows only when it is higher. multiplyMoney and sumMoney do a line's and a cart's sums.", "meta": { "version": "2026.10.24", "released": "2026-10-24", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/price.tsx", "type": "registry:ui", "target": "components/litt/price.tsx" } ] }, { "name": "product", "type": "registry:block", "title": "Product block", "description": "One product's page for a store: the pictures beside the details (a carousel on a phone), the title, the price, the options with sold-out picks said in words, the quantity and Add to cart as the one accent fill, the rest in an accordion, and the cart as a sheet. Every picture opens a lightbox.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/accordion.json", "https://littmd.vercel.app/r/breadcrumb.json", "https://littmd.vercel.app/r/carousel.json", "https://littmd.vercel.app/r/cart.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/lightbox.json", "https://littmd.vercel.app/r/media.json", "https://littmd.vercel.app/r/number-field.json", "https://littmd.vercel.app/r/option-picker.json", "https://littmd.vercel.app/r/price.json", "https://littmd.vercel.app/r/product-card.json", "https://littmd.vercel.app/r/toast.json" ], "docs": "Import ProductPage from components/litt-blocks/product and render it as a page's content. The product sits at the top of the file: replace it with yours, or with one the shopify item's toProduct maps from your store. Mount the Toaster once near your root. See it live at https://littmd.vercel.app/#product.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/product.tsx", "type": "registry:component", "target": "components/litt-blocks/product.tsx" } ] }, { "name": "product-card", "type": "registry:ui", "title": "Product card", "description": "One product in a grid: an inset 4/5 cover, the name and its price (From when the variants differ), as one link to its page. No buy button and no accent. Also the Product type and priceRange, findVariant, defaultPicks and optionsFor for a product page.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/card.json", "https://littmd.vercel.app/r/media.json", "https://littmd.vercel.app/r/option-picker.json", "https://littmd.vercel.app/r/price.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import ProductCard and ProductGrid from components/litt/product-card. A Product is plain data: the shopify item's toProduct makes one from the Storefront API, or write your own. Give every card in a grid one ratio.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/product-card.tsx", "type": "registry:ui", "target": "components/litt/product-card.tsx" } ] }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "A thin rail for work that is happening now, such as an upload or an import. It fills on the instant tier, ends done or failed in words, and with no value yet stays empty: nothing sweeps, pulses or shimmers.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Progress from components/litt/progress. Pass a label, a value and a max, and status=\"done\" or \"failed\" when it ends. A quantity that does not move while you watch is a Meter.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/progress.tsx", "type": "registry:ui", "target": "components/litt/progress.tsx" } ] }, { "name": "projects", "type": "registry:block", "title": "Projects block", "description": "A studio's projects as one screen: a title with the count, a toolbar with the status filters, a search, a list or grid switch and New project, then the rows or the cards. Every empty case says why and offers the way back.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/action-bar.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/list.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/states.json" ], "docs": "Import Projects from components/litt-blocks/projects and render it inside your app's shell. The sample projects sit at the top of the file in the list's Project shape; give each one an href to make its row a link. See it live at https://littmd.vercel.app/#projects.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/projects.tsx", "type": "registry:component", "target": "components/litt-blocks/projects.tsx" } ] }, { "name": "range-chart", "type": "registry:ui", "title": "Range chart", "description": "One quantity over time as a barcode of thin bars, with labelled segments and their shares in a tray above, and a range you brush by hand: drag across the bars, drag either edge, or drag the whole span. The edges follow the pointer one to one and settle on a bar or a segment start; the segment that matches the range is raised. The total of what is brushed rolls as you go, its last group of digits in the quiet ink. In fun mode the span can be thrown and the bars it sweeps rise and settle.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/rolling-number.json" ], "docs": "Import RangeChart from components/litt/range-chart. Give it a label, bars as { label, value }, and optionally segments as { label, start }, axis ticks and a unit. Hold the range in state with value and onValueChange ([first, last], both inclusive), or load on onValueCommit, which fires once the edges have settled. The figure is a sum, so the values must add up. A single moment in a run is a TimeScrubber; a value that stays is a Slider.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/range-chart.tsx", "type": "registry:ui", "target": "components/litt/range-chart.tsx" } ] }, { "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Panels side by side or stacked, with a hairline between each two that follows the pointer one to one. Each panel keeps between its smallest and largest size, the arrow keys move the line, a double click puts it back, and autoSaveId keeps the layout.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import ResizablePanelGroup, ResizablePanel and ResizableHandle from components/litt/resizable, as shadcn's resizable is written. Sizes are percents. On a phone, show one panel at a time instead.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/resizable.tsx", "type": "registry:ui", "target": "components/litt/resizable.tsx" } ] }, { "name": "rolling-number", "type": "registry:ui", "title": "Rolling number", "description": "A figure whose changed digits roll to the new value: each leaves half of the travel token and fades as the new one comes in from the other side, on the responsive tier, up when the value rises and down when it falls. Any Intl.NumberFormat format, tabular figures, the whole figure as text for screen readers. The first render and reduced motion just show the number.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/motion.json" ], "docs": "Import RollingNumber from components/litt/rolling-number and pass it a number as value, with Intl.NumberFormat options as format and a locale. It takes the font, size and color of where it sits: pass it as a Stat's value to roll a tile, since Stat itself stays still. A change is not announced; say it in a live region if it matters.", "meta": { "version": "2026.10.21", "released": "2026-10-21", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/rolling-number.tsx", "type": "registry:ui", "target": "components/litt/rolling-number.tsx" } ] }, { "name": "rule-builder", "type": "registry:ui", "title": "Rule builder", "description": "Conditions built from rows: a field, an operator and a value, joined by And or Or, grouped and nested, added, removed and reordered by a handle. A row picked up by its handle rises into a raised block and the others make room; the new order is committed once it has settled. Space lifts a row for the arrow keys.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/combobox.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/number-field.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/select.json" ], "docs": "Import RuleBuilder from components/litt/rule-builder. Give it a label and fields ({ id, label, type: text, number or choice, options, operators }) and hold the tree in state with value and onValueChange, or pass name and defaultValue in a form (it posts one JSON string). newCondition, newGroup and isGroup build and read the tree. errors by condition id says a problem under its row. A filter on one table column is a TableFilter.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/rule-builder.tsx", "type": "registry:ui", "target": "components/litt/rule-builder.tsx" } ] }, { "name": "run-card", "type": "registry:ui", "title": "Run card", "description": "An agent's run as a card: what it is making, how far it has got in words (Step 2 of 3) and in a ring, and its steps. Hide folds it into a raised block you press to open again; the ring travels between the two while the words glide, and the height snaps. A polite status keeps saying the step while the card is folded.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/plan.json", "https://littmd.vercel.app/r/rolling-number.json" ], "docs": "Import RunCard from components/litt/run-card. Give it a title and the run's steps as Plan takes them (label, status, an id), and optionally progress from 0 to 1, a preview, actions such as a Stop button, and open with onOpenChange. Update steps in place as the agent works. A plan with no run behind it is a Plan.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/run-card.tsx", "type": "registry:ui", "target": "components/litt/run-card.tsx" } ] }, { "name": "run-list", "type": "registry:ui", "title": "Run list", "description": "An agent's runs for a sidebar or an inbox: each run's title, its status in words and a mark (running, needs you, done, failed, stopped), where it has got and when it last changed, the runs that need you first, the selected run as a raised block that glides from row to row, a filter by status with counts, and Stop or Archive on a row.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/glide.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/states.json", "https://littmd.vercel.app/r/tooltip.json" ], "docs": "Import RunList from components/litt/run-list. Pass runs ({ id, title, status, detail?, progress?, updated, href? }) in your order, selectedId and onSelect, and onStop and onArchive for the row actions. updated is words you give (\"2m ago\"): the list reads no clock.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/run-list.tsx", "type": "registry:ui", "target": "components/litt/run-list.tsx" } ] }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll area", "description": "A region that scrolls inside the page: native scrolling with litt's 6px thumb, shown while it scrolls or a mouse is over it, and a hairline on any edge with more beyond it. While it scrolls it is a labelled Tab stop with an inset focus ring. No gradient fades.", "dependencies": [ "@radix-ui/react-scroll-area" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import ScrollArea from components/litt/scroll-area. Pass a label and give it a height (or a max height) in className; set orientation to \"horizontal\" or \"both\" to scroll sideways. Pass viewportRef to read or set the scroll position.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/scroll-area.tsx", "type": "registry:ui", "target": "components/litt/scroll-area.tsx" } ] }, { "name": "segmented", "type": "registry:ui", "title": "Segmented control", "description": "A short choice of two to five options in one track. The selected surface glides to your pick, and the control is built from native radios, so the arrow keys work.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Segmented from components/litt/segmented. Give it a legend, a value, onValueChange and options. In a form, pass showLegend and block.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/segmented.tsx", "type": "registry:ui", "target": "components/litt/segmented.tsx" }, { "path": "registry/litt/ui/bodies/segmented.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/segmented.device.tsx" }, { "path": "registry/litt/ui/bodies/segmented.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/segmented.flat.tsx" } ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "One value from a short list. The trigger looks like the input, and the list is the menu's glass panel with 44px rows, a gliding highlight and a check on the current option. It stays anchored on phones.", "dependencies": [ "@radix-ui/react-select", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/glide.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Select or SelectField from components/litt/select. Pass options as { value, label } and a label, because a placeholder is not a label.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/select.tsx", "type": "registry:ui", "target": "components/litt/select.tsx" }, { "path": "registry/litt/ui/bodies/select.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/select.device.tsx" }, { "path": "registry/litt/ui/bodies/select.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/select.flat.tsx" } ] }, { "name": "settings", "type": "registry:block", "title": "Settings block", "description": "An account's settings as one screen: the profile, the notifications and the appearance, Save and Cancel, and deleting the studio apart behind a slide to confirm. A failed save puts a summary on top that takes focus, and a good one ends in a toast.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/form.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/slide-confirm.json", "https://littmd.vercel.app/r/slider.json", "https://littmd.vercel.app/r/switch.json", "https://littmd.vercel.app/r/toast.json" ], "docs": "Import Settings from components/litt-blocks/settings and render it inside your app's shell, with the Toaster mounted once near your root. The saved values sit at the top of the file, and useSave stands in for your request. See it live at https://littmd.vercel.app/#settings.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/settings.tsx", "type": "registry:component", "target": "components/litt-blocks/settings.tsx" } ] }, { "name": "seven-segment", "type": "registry:ui", "title": "Seven-segment readout", "description": "A figure or a count on seven-segment digits behind LCD glass, each digit's segments lit from the ink and fading like phosphor when they change. A Device part.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Needs data-material=\"device\" on . Pass a value and the digits; a change rolls the segments on the instant tier. Under reduced motion they switch at once.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/seven-segment.tsx", "type": "registry:ui", "target": "components/litt/seven-segment.tsx" } ] }, { "name": "shopify", "type": "registry:lib", "title": "Shopify", "description": "litt's commerce parts on a Shopify store: a small Storefront API client pinned to one version, getProduct, getProducts and getCollection that return litt's Product, and toProduct for your own queries. No React in it, so it runs in a server component too.", "registryDependencies": [ "https://littmd.vercel.app/r/cart.json", "https://littmd.vercel.app/r/option-picker.json", "https://littmd.vercel.app/r/price.json", "https://littmd.vercel.app/r/product-card.json" ], "docs": "Installed in lib/litt/shopify.ts. Make a client with createStorefront({ domain, token }) using the store's public Storefront token, and pass what getProduct returns to ProductCard, OptionPicker or the product block. For the cart, add shopify-cart.", "meta": { "version": "2026.10.24", "released": "2026-10-24", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/lib/shopify.ts", "type": "registry:lib", "target": "lib/litt/shopify.ts" } ] }, { "name": "shopify-cart", "type": "registry:lib", "title": "Shopify cart", "description": "A cart kept in Shopify: ShopifyCart near the root and useShopifyCart() anywhere under it, with the same CartState as useCartState, so Cart, CartButton and AddToCart work unchanged. The cart's id survives a reload, and Check out goes to Shopify's hosted checkout.", "registryDependencies": [ "https://littmd.vercel.app/r/cart.json", "https://littmd.vercel.app/r/shopify.json" ], "docs": "Installed in lib/litt/shopify-cart.tsx. Wrap your app in with a client from createStorefront, then pass useShopifyCart() to Cart as its cart.", "meta": { "version": "2026.10.24", "released": "2026-10-24", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/lib/shopify-cart.tsx", "type": "registry:lib", "target": "lib/litt/shopify-cart.tsx" } ] }, { "name": "sign-in", "type": "registry:block", "title": "Sign in block", "description": "The page before the app: the wordmark, one left-aligned column with email, password, Sign in and a second way in, and a quiet column of what is new on a wide screen. Wrong fields say so under themselves and take focus, and a refusal shows in a callout.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/callout.json", "https://littmd.vercel.app/r/form.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/input.json" ], "docs": "Import SignIn from components/litt-blocks/sign-in and render it as a whole page. signIn at the top of the file stands in for your auth call; return your server's message the same way, and point the links at your routes. See it live at https://littmd.vercel.app/#sign-in.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/sign-in.tsx", "type": "registry:component", "target": "components/litt-blocks/sign-in.tsx" } ] }, { "name": "slide-confirm", "type": "registry:ui", "title": "Slide to confirm", "description": "A deliberate yes to something that cannot be undone: the segmented control's track and a raised thumb to slide to the end. The thumb follows the finger one to one, springs back on the responsive tier if let go early, and confirms at the end with a check. The thumb is also a button: Enter, Space or a screen reader confirms, a mouse click alone does not.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import SlideConfirm from components/litt/slide-confirm. Give it a label that says what happens (\"Slide to delete Atelier Nord\"), a confirmedLabel and onConfirm, which runs once. Remount it with a new key to ask again. Use it for what cannot be undone, on touch screens; anything that can be undone should just happen, with Undo in a toast.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/slide-confirm.tsx", "type": "registry:ui", "target": "components/litt/slide-confirm.tsx" }, { "path": "registry/litt/ui/bodies/slide-confirm.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/slide-confirm.device.tsx" }, { "path": "registry/litt/ui/bodies/slide-confirm.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/slide-confirm.flat.tsx" } ] }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "A value on a range, such as an animation speed, or a span with two thumbs, such as builds that took 20s to 80s. A thin rail, a foreground range and round thumbs that follow the pointer one to one, with words for the two ends. The thumbs of a range never cross, and a form sends both values under one name.", "dependencies": [ "@radix-ui/react-slider" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Slider, or RangeSlider for a span, from components/litt/slider. Give it a label, and minLabel and maxLabel to say which way is which. A range value is [from, to], and each thumb is named by the label and its end.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/slider.tsx", "type": "registry:ui", "target": "components/litt/slider.tsx" }, { "path": "registry/litt/ui/bodies/slider.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/slider.device.tsx" }, { "path": "registry/litt/ui/bodies/slider.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/slider.flat.tsx" } ] }, { "name": "sources", "type": "registry:ui", "title": "Sources", "description": "Where an answer came from: Sources holds a turn's sources and numbers them once, Citation is a quiet numbered chip in the running text that opens its source and previews it in a hover card (the site, the title, the passage, when it was read), and SourceList lists them under the answer or as what a search call found. Resting on a citation lights its row, and resting on a row lights its citations. A source the model gives a url that is not http or https shows as text.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/hover-card.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Sources, Citation and SourceList from components/litt/sources. Wrap the turn's parts in Sources with the sources ({ id, title, url, site?, passage?, readAt?, kind? }); a source's number is its place in that list. Have your markdown renderer turn a #cite- link into \" /> (citationId reads the href, unlinkCitations cleans text for Copy). Put a SourceList after the answer, and a SourceList with the search's own sources in a ToolCall's details.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/sources.tsx", "type": "registry:ui", "target": "components/litt/sources.tsx" } ] }, { "name": "sparkline", "type": "registry:ui", "title": "Sparkline", "description": "A trend in one thin line, with no axes, gridlines or labels: a 2px line in the foreground or a data hue, a dot on the latest value and an optional dashed baseline. For a stat tile, a table cell or a list row. It shows shape, not values.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Sparkline from components/litt/sparkline. Pass a label and the values, oldest first. It fills its container's width, so give a table cell a wrapper with a width, and fix min and max so rows compare. Put the exact figure beside it. Stat takes one in its trend prop.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/sparkline.tsx", "type": "registry:ui", "target": "components/litt/sparkline.tsx" } ] }, { "name": "spread", "type": "registry:ui", "title": "Spread", "description": "How values spread, one thin rail per row on a shared scale: the full range faint, the middle half in a data hue, the median as a tick and in mono at the end. Build times by site, reply times by client. A row gives its values or its quartiles, a goal is a dashed line through every rail, and under 28rem the label moves above its rail. Static, with a legend in words.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json" ], "docs": "Import Spread from components/litt/spread. Pass a label and items of { label, values } or { label, min, p25, median, p75, max }, and a formatValue that includes the unit. Rows share one scale (linear or log, with an optional domain and ticks) and an optional goal. It fills its container's width, so give the container a width.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/spread.tsx", "type": "registry:ui", "target": "components/litt/spread.tsx" } ] }, { "name": "spring-editor", "type": "registry:ui", "title": "Spring editor", "description": "A spring shaped by hand, as time and bounce (Motion's visualDuration and bounce, Framer's Time and Bounce). The Pad's well with the spring's curve on its floor: drag the cap right for a slower spring and up for more bounce. It says what the spring does in words, a dot crosses a rail on it when you let go, and tier draws litt's limits with a Fits or Change row per rule.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import SpringEditor from components/litt/spring-editor. Give it a label and hold the spring ({ time, bounce }) in state with value and onValueChange. Pass tier=\"expressive\" or \"responsive\" to check it against litt's motion rules, and defaultMark for the default. Time and Bounce are range inputs for the keyboard and screen readers.", "meta": { "version": "2026.10.27", "released": "2026-10-27", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/spring-editor.tsx", "type": "registry:ui", "target": "components/litt/spring-editor.tsx" } ] }, { "name": "stat", "type": "registry:ui", "title": "Stat", "description": "A number tile for one figure: a small label, the value large in the sans with tabular numbers, and an optional change in words. Green and red are for good and bad news only. A group of tiles measures its own width.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Stat and StatGroup from components/litt/stat. Say the direction in the delta's words, and set tone to good, bad or neutral for whether it is news. Put the tiles in a StatGroup: two across, four across from 40rem.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/stat.tsx", "type": "registry:ui", "target": "components/litt/stat.tsx" } ] }, { "name": "states", "type": "registry:ui", "title": "Empty and loading states", "description": "What a view says when it has nothing yet, is waiting or has failed. Empty offers one action, a skeleton keeps the content's exact size, and an error says what went wrong and how to retry.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import Empty, Skeleton, Loading and ErrorState from components/litt/states. Wrap Skeleton blocks in Loading, so a screen reader hears what is loading once.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/states.tsx", "type": "registry:ui", "target": "components/litt/states.tsx" } ] }, { "name": "steps", "type": "registry:ui", "title": "Steps", "description": "Where someone is in a flow of a few steps, in the step marks: a check for done, a half-filled circle for now, an empty circle for what is left. A row, a column, or in a narrow box Step 2 of 4 with a rail per step.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import Steps from components/litt/steps. Pass the steps and the current index; onStepSelect lets done steps go back.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/steps.tsx", "type": "registry:ui", "target": "components/litt/steps.tsx" } ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "An on or off setting. A pill track that fills with the foreground color when on, never the accent, and a thumb that slides on the instant tier.", "dependencies": [ "@radix-ui/react-switch" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Switch from components/litt/switch. Give it a label. Use align=\"end\" in a settings list so the switches line up at the row's end.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/switch.tsx", "type": "registry:ui", "target": "components/litt/switch.tsx" }, { "path": "registry/litt/ui/bodies/switch.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/switch.device.tsx" }, { "path": "registry/litt/ui/bodies/switch.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/switch.flat.tsx" } ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "A table with real semantics, hairline rows, mono figures and a sticky header. It scrolls inside its own region on a phone, and its rows can arrive in one staggered cascade, sort, filter and insert. A virtual body draws ten thousand rows and loads more from a server as you scroll.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/checkbox.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Table, TableHeader, TableBody, TableRow, TableHead and TableCell from components/litt/table. Give the Table a label, and a max height such as max-h-96 if you want the header to stick. The entrance is off until you pass entrance.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/table.tsx", "type": "registry:ui", "target": "components/litt/table.tsx" } ] }, { "name": "table-filter", "type": "registry:ui", "title": "Table filter", "description": "A filter for one column of a Table, in its header: a funnel button that opens the column's values as Menu rows, checkboxes with how many rows each would show, or radio buckets for a number. A filtering column's button wears the selected segment.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/menu.json" ], "docs": "Import TableFilter from components/litt/table-filter and pass it as a TableHead's filter. Hold the values on in state ([] is no filter) and filter your rows with them; count each value against the other filters. To keep them in the page address, so the view can be shared or reloaded, hold them with useUrlFilter (and a search or sort with useUrlParam) instead of useState.", "meta": { "version": "2026.11.02", "released": "2026-11-02", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/table-filter.tsx", "type": "registry:ui", "target": "components/litt/table-filter.tsx" } ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Underline or segmented tabs. The indicator slides between tabs, the label only changes color and the panel fades in from the side of the tab you picked.", "dependencies": [ "@radix-ui/react-tabs", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Tabs, TabsList, TabsTrigger, TabsPanels and TabsPanel from components/litt/tabs.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tabs.tsx", "type": "registry:ui", "target": "components/litt/tabs.tsx" }, { "path": "registry/litt/ui/bodies/tabs.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/tabs.device.tsx" }, { "path": "registry/litt/ui/bodies/tabs.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/tabs.flat.tsx" } ] }, { "name": "tag", "type": "registry:ui", "title": "Tag", "description": "A small label at the control radius that names a thing or reports its state. A status tag colors its text, never the fill, and always says the status in words.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Tag from components/litt/tag. Leave status out for a plain label, or set it to success, warning, danger or neutral: the text takes that color and there is no dot, so the word carries the status.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tag.tsx", "type": "registry:ui", "target": "components/litt/tag.tsx" }, { "path": "registry/litt/ui/bodies/tag.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/tag.device.tsx" }, { "path": "registry/litt/ui/bodies/tag.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/tag.flat.tsx" } ] }, { "name": "tape-progress", "type": "registry:ui", "title": "Tape progress", "description": "Progress as two tape reels: the supply empties and the take-up fills, each turning at the speed the tape's constant pace gives its radius, with the value said in words. A Device part.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Needs data-material=\"device\" on . The same props as Progress (label, value, max, status). Under reduced motion the reels jump to the value.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tape-progress.tsx", "type": "registry:ui", "target": "components/litt/tape-progress.tsx" } ] }, { "name": "team", "type": "registry:block", "title": "Team block", "description": "A studio's people as one screen: the seats as a meter, and a table with each person's role to change in place, open invites, when they were last active and a menu of actions. Invite opens a dialog that takes several addresses, and a removal is undone from its toast.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/dialog.json", "https://littmd.vercel.app/r/framed.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/menu.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/table.json", "https://littmd.vercel.app/r/tag.json", "https://littmd.vercel.app/r/toast.json", "https://littmd.vercel.app/r/token-input.json" ], "docs": "Import Team from components/litt-blocks/team and render it inside your app's shell, with the Toaster mounted once near your root. The members and the seat count sit at the top of the file; setRole, remove and invite are where your requests go. See it live at https://littmd.vercel.app/#team.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/team.tsx", "type": "registry:component", "target": "components/litt-blocks/team.tsx" } ] }, { "name": "thinking", "type": "registry:ui", "title": "Thinking", "description": "The agent's reasoning as a quiet disclosure above its answer: a row with a chevron, \"Thinking\" and a clock that counts whole seconds, never a shimmer, a pulse or a spinner, then \"Thought for 12s\". The reasoning sits under it in the quiet text tone with no box. It is open while the agent thinks and closes itself when it stops, unless the reader toggled it.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Thinking from components/litt/thinking. Pass active while the agent thinks and the reasoning as children: the clock counts from when active turned true. For a thought loaded from history leave active off and pass duration in seconds. open, defaultOpen and onOpenChange control it, and label replaces the words.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/thinking.tsx", "type": "registry:ui", "target": "components/litt/thinking.tsx" } ] }, { "name": "time-scrubber", "type": "registry:ui", "title": "Time scrubber", "description": "A moment in a run that already happened, found by dragging a ruler of its time under a fixed needle: ticks every step, labelled times, and what happened along the run marked in its status color. The ruler follows the pointer one to one and settles on the nearest step or an event, Page Up and Page Down go from event to event, and in fun mode it can be thrown.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import TimeScrubber from components/litt/time-scrubber. Give it a label, max (and min), the run's events as marks ({ at, label, tone }) and a formatValue for the units (\"+12s\", \"09:30\"). Hold the value in state and show what it replays beside it, such as a LogView with the lines up to the needle. A setting that stays is a Slider.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/time-scrubber.tsx", "type": "registry:ui", "target": "components/litt/time-scrubber.tsx" } ] }, { "name": "timeline", "type": "registry:ui", "title": "Timeline", "description": "The steps of a run in order, such as a deploy: when each started, a status icon on a hairline rail, the label and how long it took, grouped into phases. In a proportional timeline long steps draw their time as a bar in the phase's data hue, with the last run beside it. A strip shows the whole run at a glance.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Timeline, TimelinePhase, TimelineStep, TimelineResult and TimelineBar from components/litt/timeline. Put steps in phases, give each step an at, a label, a status and its seconds, and close with a TimelineResult. Feed TimelineBar the same data as the list, and keep it beside the list.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/timeline.tsx", "type": "registry:ui", "target": "components/litt/timeline.tsx" } ] }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Toasts arrive from just below the corner and leave sideways. Older ones stack behind the newest and open into a list on hover or focus.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Toaster, toast and useToast from components/litt/toast. Mount Toaster once, then call toast() anywhere.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/toast.tsx", "type": "registry:ui", "target": "components/litt/toast.tsx" } ] }, { "name": "token-input", "type": "registry:ui", "title": "Token input", "description": "A field that collects short values as removable tokens: recipients, sender domains, tags. Enter, a comma or blur adds what you typed, a pasted list is split, and Backspace or the x removes one. The Input's own size, edge, label and focus ring, with the Tag's look inside. A long list folds into a +N token until the field is focused.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import TokenInput from components/litt/token-input. Give it a label and hold the values in state with value and onValueChange, or pass a defaultValue. Add validate to reject a value with a message, max to cap the list, collapseAfter to fold it, and name to post every value with a form.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/token-input.tsx", "type": "registry:ui", "target": "components/litt/token-input.tsx" }, { "path": "registry/litt/ui/bodies/token-input.device.tsx", "type": "registry:ui", "target": "components/litt/bodies/token-input.device.tsx" }, { "path": "registry/litt/ui/bodies/token-input.flat.tsx", "type": "registry:ui", "target": "components/litt/bodies/token-input.flat.tsx" } ] }, { "name": "tool-call", "type": "registry:ui", "title": "Tool call", "description": "What an agent did, one row per call: a status mark (a still half circle while it runs, never a spinner), the action in words, the target in mono cut at the end, what it found (\"5 sources\", \"+2 −2\") and the time. A call with an input or an output opens them under it, in a mono well; a part with its own surface (a log, a diff, a list of sources) opens as given in details. A group folds a run of calls and closes itself when they finish, and an approval asks first on a raised panel with Allow as the accent fill and Deny beside it, then becomes a row that says what was chosen.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/checkbox.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import ToolCall, ToolCallGroup and ToolApproval from components/litt/tool-call. Give a call a status, an action and a target, plus an input or an output to make it open. Put a LogView, a SourceList or a FileChanges in details, never in output, and say what the call found in result. Pass running to a group, and hold decision in state for an approval, setting it in onAllow and onDeny. Keep an approval outside a group, and disable your Send while it waits so the view holds one accent fill.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tool-call.tsx", "type": "registry:ui", "target": "components/litt/tool-call.tsx" } ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A small solid label for icons, shortcuts and status. It opens after a short hover or at once on focus, then grows from its trigger.", "dependencies": [ "@radix-ui/react-tooltip", "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/kbd.json", "https://littmd.vercel.app/r/motion.json" ], "docs": "Import Tooltip from components/litt/tooltip. Mount TooltipProvider once near the root so tooltips share one skip window.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tooltip.tsx", "type": "registry:ui", "target": "components/litt/tooltip.tsx" } ] }, { "name": "tree", "type": "registry:ui", "title": "Tree", "description": "Things inside things, opened a level at a time: a project's files, a docs site's pages. Indented rows with a hairline guide down each level, the selected row in the selected segment's look, and the keys of a file tree.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import Tree and TreeNode from components/litt/tree. Pass a label and items as data ({ id, label, detail, children }); an item with children is a branch. Hold expanded and selected in state, or leave them to the tree.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tree.tsx", "type": "registry:ui", "target": "components/litt/tree.tsx" } ] }, { "name": "tune", "type": "registry:ui", "title": "Tune", "description": "One line that tunes a component: useTune(name, (t) => ({ … })) returns typed live values and builds a litt Inspector for them. Every corner, space and spring is checked against litt's rules as you drag, values sit on litt's tokens once they fit, takes are saved as versions, and Copy tokens writes litt's own names. The panels show only in development unless you turn them on.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/curve-editor.json", "https://littmd.vercel.app/r/inspector.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/segmented.json", "https://littmd.vercel.app/r/select.json", "https://littmd.vercel.app/r/slider.json", "https://littmd.vercel.app/r/spring-editor.json", "https://littmd.vercel.app/r/switch.json" ], "docs": "Import useTune and TuneRoot from components/litt/tune. Wrap the app in TuneRoot once, then call useTune with a name and fields from t (radius, space, spring, easing, toggle, choice, number, action). Pass enabled to show the panels in a production build, and inline to draw them after the children instead of floating. The code ships wherever tune is imported, hidden or not, so paste the copied tokens and remove the call once the values fit.", "meta": { "version": "2026.11.01", "released": "2026-11-01", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/ui/tune.tsx", "type": "registry:ui", "target": "components/litt/tune.tsx" } ] }, { "name": "usage", "type": "registry:block", "title": "Usage block", "description": "A plan's usage as one screen, drawn only in rails: trends under the figures, storage and bandwidth by kind of file, the plan's limits against their budgets and build times by site. Each kind of file keeps one data hue on the whole screen, and nothing moves.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/breakdown.json", "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/sparkline.json", "https://littmd.vercel.app/r/spread.json", "https://littmd.vercel.app/r/stat.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import Usage from components/litt-blocks/usage. The sample data sits at the top of the file: keep one hue per kind of thing across the screen when you replace it. See it live at https://littmd.vercel.app/#usage.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md" }, "files": [ { "path": "registry/litt/components/litt-blocks/usage.tsx", "type": "registry:component", "target": "components/litt-blocks/usage.tsx" } ] }, { "name": "button-demo", "type": "registry:example", "title": "Button example", "description": "A working button: VariantsDemo, the first demo on its page (https://littmd.vercel.app/#button). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/button.json" ], "docs": "Import VariantsDemo from components/litt/examples/button-demo, or read it for how @litt/button is used. Import Button from components/litt/button. Primary is the one accent fill in a view. An icon-only button needs an aria-label.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/button" }, "files": [ { "path": "registry/litt/examples/button-demo.tsx", "type": "registry:example", "target": "components/litt/examples/button-demo.tsx" } ] }, { "name": "code-input-demo", "type": "registry:example", "title": "Code input example", "description": "A working code input: VerifyDemo, the first demo on its page (https://littmd.vercel.app/#code-input). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/code-input.json" ], "docs": "Import VerifyDemo from components/litt/examples/code-input-demo, or read it for how @litt/code-input is used. Import CodeInput from components/litt/code-input. Give it a label and check the code in onComplete; show what was wrong in error.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/code-input" }, "files": [ { "path": "registry/litt/examples/code-input-demo.tsx", "type": "registry:example", "target": "components/litt/examples/code-input-demo.tsx" } ] }, { "name": "combobox-demo", "type": "registry:example", "title": "Combobox example", "description": "A working combobox: NewProjectDemo, the first demo on its page (https://littmd.vercel.app/#combobox). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/combobox.json", "https://littmd.vercel.app/r/input.json" ], "docs": "Import NewProjectDemo from components/litt/examples/combobox-demo, or read it for how @litt/combobox is used. Import Combobox from components/litt/combobox. Give it a label and options as { value, label, disabled?, group? } or groups of { label, options }, and hold the value in state with value and onValueChange: a string (\"\" for none), or an array with multiple. Add hint, error and placeholder as on a field, and name to post the value with a form.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/combobox" }, "files": [ { "path": "registry/litt/examples/combobox-demo.tsx", "type": "registry:example", "target": "components/litt/examples/combobox-demo.tsx" } ] }, { "name": "date-picker-demo", "type": "registry:example", "title": "Date picker example", "description": "A working date picker: LaunchDateDemo, the first demo on its page (https://littmd.vercel.app/#date-picker). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/date-picker.json" ], "docs": "Import LaunchDateDemo from components/litt/examples/date-picker-demo, or read it for how @litt/date-picker is used. Import DatePicker and Calendar from components/litt/date-picker, plus getToday, addDays and getWeekday for date math on YYYY-MM-DD strings. Values are YYYY-MM-DD strings, or { start, end } with mode=\"range\". DatePicker needs a label; hold the value in state with value and onValueChange, and pass name for a form (a range sends name-start and name-end). min, max and isDisabled rule days out; presets take { label, value }.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/date-picker" }, "files": [ { "path": "registry/litt/examples/date-picker-demo.tsx", "type": "registry:example", "target": "components/litt/examples/date-picker-demo.tsx" } ] }, { "name": "file-drop-demo", "type": "registry:example", "title": "File drop example", "description": "A working file drop: UploadDemo, the first demo on its page (https://littmd.vercel.app/#file-drop). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/file-drop.json" ], "docs": "Import UploadDemo from components/litt/examples/file-drop-demo, or read it for how @litt/file-drop is used. Import FileDrop, FileList and FileRow from components/litt/file-drop. FileDrop hands the files that passed to onFiles; you upload them and render a FileRow for each.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/file-drop" }, "files": [ { "path": "registry/litt/examples/file-drop-demo.tsx", "type": "registry:example", "target": "components/litt/examples/file-drop-demo.tsx" } ] }, { "name": "input-demo", "type": "registry:example", "title": "Input example", "description": "A working input: StatesDemo, the first demo on its page (https://littmd.vercel.app/#input). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/input.json" ], "docs": "Import StatesDemo from components/litt/examples/input-demo, or read it for how @litt/input is used. Import TextField, Input and Textarea from components/litt/input. TextField wires the label, hint and error for you, and a bare Input needs an aria-label. Text is 16px on touch screens.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/input" }, "files": [ { "path": "registry/litt/examples/input-demo.tsx", "type": "registry:example", "target": "components/litt/examples/input-demo.tsx" } ] }, { "name": "number-field-demo", "type": "registry:example", "title": "Number field example", "description": "A working number field: SeatsDemo, the first demo on its page (https://littmd.vercel.app/#number-field). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/number-field.json" ], "docs": "Import SeatsDemo from components/litt/examples/number-field-demo, or read it for how @litt/number-field is used. Import NumberField from components/litt/number-field. Pass a label, min, max and step, and a unit or a format for a currency or a percent. The value is a number, or null when empty.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/number-field" }, "files": [ { "path": "registry/litt/examples/number-field-demo.tsx", "type": "registry:example", "target": "components/litt/examples/number-field-demo.tsx" } ] }, { "name": "select-demo", "type": "registry:example", "title": "Select example", "description": "A working select: AccountFormDemo, the first demo on its page (https://littmd.vercel.app/#select). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/select.json" ], "docs": "Import AccountFormDemo from components/litt/examples/select-demo, or read it for how @litt/select is used. Import Select or SelectField from components/litt/select. Pass options as { value, label } and a label, because a placeholder is not a label.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/select" }, "files": [ { "path": "registry/litt/examples/select-demo.tsx", "type": "registry:example", "target": "components/litt/examples/select-demo.tsx" } ] }, { "name": "token-input-demo", "type": "registry:example", "title": "Token input example", "description": "A working token input: SendersDemo, the first demo on its page (https://littmd.vercel.app/#token-input). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/tag.json", "https://littmd.vercel.app/r/token-input.json" ], "docs": "Import SendersDemo from components/litt/examples/token-input-demo, or read it for how @litt/token-input is used. Import TokenInput from components/litt/token-input. Give it a label and hold the values in state with value and onValueChange, or pass a defaultValue. Add validate to reject a value with a message, max to cap the list, collapseAfter to fold it, and name to post every value with a form.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/token-input" }, "files": [ { "path": "registry/litt/examples/token-input-demo.tsx", "type": "registry:example", "target": "components/litt/examples/token-input-demo.tsx" } ] }, { "name": "checkbox-demo", "type": "registry:example", "title": "Checkbox and radio example", "description": "A working checkbox and radio: StatesDemo, the first demo on its page (https://littmd.vercel.app/#checkbox). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/checkbox.json" ], "docs": "Import StatesDemo from components/litt/examples/checkbox-demo, or read it for how @litt/checkbox is used. Import Checkbox, CheckboxGroup, Radio and RadioGroup from components/litt/checkbox. They are native inputs, so name and value work in a form. Pass appearance=\"native\" for the browser's own 16px box.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/checkbox" }, "files": [ { "path": "registry/litt/examples/checkbox-demo.tsx", "type": "registry:example", "target": "components/litt/examples/checkbox-demo.tsx" } ] }, { "name": "color-picker-demo", "type": "registry:example", "title": "Color picker example", "description": "A working color picker: BrandColorDemo, the first demo on its page (https://littmd.vercel.app/#color-picker). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/color-picker.json" ], "docs": "Import BrandColorDemo from components/litt/examples/color-picker-demo, or read it for how @litt/color-picker is used. Import ColorPicker and ColorPanel from components/litt/color-picker, plus parseHex, describeColor, getContrastInk, hexToHsv and hsvToHex. Values are six-digit lowercase hex strings with the hash. ColorPicker needs a label; hold the value in state with value and onValueChange (null for none), pass name for a form, and swatches as { label, value }. Save with onValueCommit, which fires on release. Use getContrastInk for text drawn on the picked color.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/color-picker" }, "files": [ { "path": "registry/litt/examples/color-picker-demo.tsx", "type": "registry:example", "target": "components/litt/examples/color-picker-demo.tsx" } ] }, { "name": "curve-editor-demo", "type": "registry:example", "title": "Curve editor example", "description": "A working curve editor: ExitDemo, the first demo on its page (https://littmd.vercel.app/#curve-editor). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/curve-editor.json", "https://littmd.vercel.app/r/segmented.json" ], "docs": "Import ExitDemo from components/litt/examples/curve-editor-demo, or read it for how @litt/curve-editor is used. Import CurveEditor from components/litt/curve-editor. Give it a label and hold the curve ([x1, y1, x2, y2]) in state with value and onValueChange; toCubicBezier writes it as CSS. Pass defaultMark to show the default and duration for the preview. Each handle is one tab stop with two range inputs.", "meta": { "version": "2026.10.27", "released": "2026-10-27", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/curve-editor" }, "files": [ { "path": "registry/litt/examples/curve-editor-demo.tsx", "type": "registry:example", "target": "components/litt/examples/curve-editor-demo.tsx" } ] }, { "name": "pad-demo", "type": "registry:example", "title": "Pad example", "description": "A working pad: VoiceDemo, the first demo on its page (https://littmd.vercel.app/#pad). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/pad.json" ], "docs": "Import VoiceDemo from components/litt/examples/pad-demo, or read it for how @litt/pad is used. Import Pad from components/litt/pad. Give it a label, an x and a y axis ({ label, min, max, step, minLabel, maxLabel }), and hold the value in state with value and onValueChange. Pass defaultMark to show the default and formatValue to say the value in words. Each axis is a range input for the keyboard and screen readers, and the arrow keys move it.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/pad" }, "files": [ { "path": "registry/litt/examples/pad-demo.tsx", "type": "registry:example", "target": "components/litt/examples/pad-demo.tsx" } ] }, { "name": "slide-confirm-demo", "type": "registry:example", "title": "Slide to confirm example", "description": "A working slide to confirm: DeleteProjectDemo, the first demo on its page (https://littmd.vercel.app/#slide-confirm). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/slide-confirm.json" ], "docs": "Import DeleteProjectDemo from components/litt/examples/slide-confirm-demo, or read it for how @litt/slide-confirm is used. Import SlideConfirm from components/litt/slide-confirm. Give it a label that says what happens (\"Slide to delete Atelier Nord\"), a confirmedLabel and onConfirm, which runs once. Remount it with a new key to ask again. Use it for what cannot be undone, on touch screens; anything that can be undone should just happen, with Undo in a toast.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/slide-confirm" }, "files": [ { "path": "registry/litt/examples/slide-confirm-demo.tsx", "type": "registry:example", "target": "components/litt/examples/slide-confirm-demo.tsx" } ] }, { "name": "slider-demo", "type": "registry:example", "title": "Slider example", "description": "A working slider: SpeedDemo, the first demo on its page (https://littmd.vercel.app/#slider). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/slider.json" ], "docs": "Import SpeedDemo from components/litt/examples/slider-demo, or read it for how @litt/slider is used. Import Slider, or RangeSlider for a span, from components/litt/slider. Give it a label, and minLabel and maxLabel to say which way is which. A range value is [from, to], and each thumb is named by the label and its end.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/slider" }, "files": [ { "path": "registry/litt/examples/slider-demo.tsx", "type": "registry:example", "target": "components/litt/examples/slider-demo.tsx" } ] }, { "name": "spring-editor-demo", "type": "registry:example", "title": "Spring editor example", "description": "A working spring editor: ToastSpringDemo, the first demo on its page (https://littmd.vercel.app/#spring-editor). It installs the components it uses.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/spring-editor.json" ], "docs": "Import ToastSpringDemo from components/litt/examples/spring-editor-demo, or read it for how @litt/spring-editor is used. Import SpringEditor from components/litt/spring-editor. Give it a label and hold the spring ({ time, bounce }) in state with value and onValueChange. Pass tier=\"expressive\" or \"responsive\" to check it against litt's motion rules, and defaultMark for the default. Time and Bounce are range inputs for the keyboard and screen readers.", "meta": { "version": "2026.10.27", "released": "2026-10-27", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/spring-editor" }, "files": [ { "path": "registry/litt/examples/spring-editor-demo.tsx", "type": "registry:example", "target": "components/litt/examples/spring-editor-demo.tsx" } ] }, { "name": "switch-demo", "type": "registry:example", "title": "Switch example", "description": "A working switch: SettingsListDemo, the first demo on its page (https://littmd.vercel.app/#switch). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/switch.json" ], "docs": "Import SettingsListDemo from components/litt/examples/switch-demo, or read it for how @litt/switch is used. Import Switch from components/litt/switch. Give it a label. Use align=\"end\" in a settings list so the switches line up at the row's end.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/switch" }, "files": [ { "path": "registry/litt/examples/switch-demo.tsx", "type": "registry:example", "target": "components/litt/examples/switch-demo.tsx" } ] }, { "name": "time-scrubber-demo", "type": "registry:example", "title": "Time scrubber example", "description": "A working time scrubber: ReplayDemo, the first demo on its page (https://littmd.vercel.app/#time-scrubber). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/log-view.json", "https://littmd.vercel.app/r/time-scrubber.json" ], "docs": "Import ReplayDemo from components/litt/examples/time-scrubber-demo, or read it for how @litt/time-scrubber is used. Import TimeScrubber from components/litt/time-scrubber. Give it a label, max (and min), the run's events as marks ({ at, label, tone }) and a formatValue for the units (\"+12s\", \"09:30\"). Hold the value in state and show what it replays beside it, such as a LogView with the lines up to the needle. A setting that stays is a Slider.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/time-scrubber" }, "files": [ { "path": "registry/litt/examples/time-scrubber-demo.tsx", "type": "registry:example", "target": "components/litt/examples/time-scrubber-demo.tsx" } ] }, { "name": "card-picker-demo", "type": "registry:example", "title": "Card picker example", "description": "A working card picker: PlanDemo, the first demo on its page (https://littmd.vercel.app/#card-picker). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/card-picker.json" ], "docs": "Import PlanDemo from components/litt/examples/card-picker-demo, or read it for how @litt/card-picker is used. Import CardPicker from components/litt/card-picker. Give it a legend, options ({ value, label, description, detail, picture, disabled }), and value with onValueChange. size=\"sm\" draws tiles; name and required make it a form field.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/card-picker" }, "files": [ { "path": "registry/litt/examples/card-picker-demo.tsx", "type": "registry:example", "target": "components/litt/examples/card-picker-demo.tsx" } ] }, { "name": "inspector-demo", "type": "registry:example", "title": "Inspector example", "description": "A working inspector: ToastInspectorDemo, the first demo on its page (https://littmd.vercel.app/#inspector). It installs the components it uses.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/curve-editor.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/inspector.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/slider.json", "https://littmd.vercel.app/r/spring-editor.json", "https://littmd.vercel.app/r/switch.json" ], "docs": "Import ToastInspectorDemo from components/litt/examples/inspector-demo, or read it for how @litt/inspector is used. Import Inspector and InspectorGroup from components/litt/inspector. Hold every value in one object and pass it as value with onValueChange, then put a Slider, a Switch, a Spring editor or a Curve editor in each InspectorGroup. Add defaultValue for Reset, presets and storageKey for versions, checks for the rules and tokens for Copy tokens.", "meta": { "version": "2026.10.27", "released": "2026-10-27", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/inspector" }, "files": [ { "path": "registry/litt/examples/inspector-demo.tsx", "type": "registry:example", "target": "components/litt/examples/inspector-demo.tsx" } ] }, { "name": "rule-builder-demo", "type": "registry:example", "title": "Rule builder example", "description": "A working rule builder: ExpensePolicyDemo, the first demo on its page (https://littmd.vercel.app/#rule-builder). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/rule-builder.json" ], "docs": "Import ExpensePolicyDemo from components/litt/examples/rule-builder-demo, or read it for how @litt/rule-builder is used. Import RuleBuilder from components/litt/rule-builder. Give it a label and fields ({ id, label, type: text, number or choice, options, operators }) and hold the tree in state with value and onValueChange, or pass name and defaultValue in a form (it posts one JSON string). newCondition, newGroup and isGroup build and read the tree. errors by condition id says a problem under its row. A filter on one table column is a TableFilter.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/rule-builder" }, "files": [ { "path": "registry/litt/examples/rule-builder-demo.tsx", "type": "registry:example", "target": "components/litt/examples/rule-builder-demo.tsx" } ] }, { "name": "segmented-demo", "type": "registry:example", "title": "Segmented control example", "description": "A working segmented control: ThemeDemo, the first demo on its page (https://littmd.vercel.app/#segmented). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/segmented.json" ], "docs": "Import ThemeDemo from components/litt/examples/segmented-demo, or read it for how @litt/segmented is used. Import Segmented from components/litt/segmented. Give it a legend, a value, onValueChange and options. In a form, pass showLegend and block.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/segmented" }, "files": [ { "path": "registry/litt/examples/segmented-demo.tsx", "type": "registry:example", "target": "components/litt/examples/segmented-demo.tsx" } ] }, { "name": "tune-demo", "type": "registry:example", "title": "Tune example", "description": "A working tune: PlanCardDemo, the first demo on its page (https://littmd.vercel.app/#tune). It installs the components it uses.", "dependencies": [ "motion" ], "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/switch.json", "https://littmd.vercel.app/r/tag.json", "https://littmd.vercel.app/r/tune.json" ], "docs": "Import PlanCardDemo from components/litt/examples/tune-demo, or read it for how @litt/tune is used. Import useTune and TuneRoot from components/litt/tune. Wrap the app in TuneRoot once, then call useTune with a name and fields from t (radius, space, spring, easing, toggle, choice, number, action). Pass enabled to show the panels in a production build, and inline to draw them after the children instead of floating. The code ships wherever tune is imported, hidden or not, so paste the copied tokens and remove the call once the values fit.", "meta": { "version": "2026.11.01", "released": "2026-11-01", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tune" }, "files": [ { "path": "registry/litt/examples/tune-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tune-demo.tsx" } ] }, { "name": "tabs-demo", "type": "registry:example", "title": "Tabs example", "description": "A working tabs: ProjectTabs, the first demo on its page (https://littmd.vercel.app/#tabs). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/tabs.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import ProjectTabs from components/litt/examples/tabs-demo, or read it for how @litt/tabs is used. Import Tabs, TabsList, TabsTrigger, TabsPanels and TabsPanel from components/litt/tabs.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tabs" }, "files": [ { "path": "registry/litt/examples/tabs-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tabs-demo.tsx" } ] }, { "name": "tag-demo", "type": "registry:example", "title": "Tag example", "description": "A working tag: LabelsDemo, the first demo on its page (https://littmd.vercel.app/#tag). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import LabelsDemo from components/litt/examples/tag-demo, or read it for how @litt/tag is used. Import Tag from components/litt/tag. Leave status out for a plain label, or set it to success, warning, danger or neutral: the text takes that color and there is no dot, so the word carries the status.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tag" }, "files": [ { "path": "registry/litt/examples/tag-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tag-demo.tsx" } ] }, { "name": "icons-demo", "type": "registry:example", "title": "Icons example", "description": "A working icons: KeylinesDemo, the first demo on its page (https://littmd.vercel.app/#icons). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import KeylinesDemo from components/litt/examples/icons-demo, or read it for how @litt/icons is used. Import the icons you need from components/litt/icons. They are decorative unless you label them. Draw a missing one on the same grid, never from another set.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/icons" }, "files": [ { "path": "registry/litt/examples/icons-demo.tsx", "type": "registry:example", "target": "components/litt/examples/icons-demo.tsx" } ] }, { "name": "kbd-demo", "type": "registry:example", "title": "Kbd example", "description": "A working kbd: KeysDemo, the first demo on its page (https://littmd.vercel.app/#kbd). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/kbd.json" ], "docs": "Import KeysDemo from components/litt/examples/kbd-demo, or read it for how @litt/kbd is used. Import Kbd from components/litt/kbd. Use it for real shortcuts only.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/kbd" }, "files": [ { "path": "registry/litt/examples/kbd-demo.tsx", "type": "registry:example", "target": "components/litt/examples/kbd-demo.tsx" } ] }, { "name": "tooltip-demo", "type": "registry:example", "title": "Tooltip example", "description": "A working tooltip: Toolbar, the first demo on its page (https://littmd.vercel.app/#tooltip). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/tooltip.json" ], "docs": "Import Toolbar from components/litt/examples/tooltip-demo, or read it for how @litt/tooltip is used. Import Tooltip from components/litt/tooltip. Mount TooltipProvider once near the root so tooltips share one skip window.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tooltip" }, "files": [ { "path": "registry/litt/examples/tooltip-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tooltip-demo.tsx" } ] }, { "name": "hover-card-demo", "type": "registry:example", "title": "Hover card example", "description": "A working hover card: PersonDemo, the first demo on its page (https://littmd.vercel.app/#hover-card). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/hover-card.json" ], "docs": "Import PersonDemo from components/litt/examples/hover-card-demo, or read it for how @litt/hover-card is used. Import HoverCard, HoverCardTrigger and HoverCardContent from components/litt/hover-card, as shadcn's hover card is written. The trigger must be a real link to the same information: never put anything only in the card.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/hover-card" }, "files": [ { "path": "registry/litt/examples/hover-card-demo.tsx", "type": "registry:example", "target": "components/litt/examples/hover-card-demo.tsx" } ] }, { "name": "popover-demo", "type": "registry:example", "title": "Popover example", "description": "A working popover: ShareDemo, the first demo on its page (https://littmd.vercel.app/#popover). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/popover.json" ], "docs": "Import ShareDemo from components/litt/examples/popover-demo, or read it for how @litt/popover is used. Import Popover, PopoverTrigger, PopoverContent and PopoverClose from components/litt/popover. It turns solid when its trigger sits inside glass.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/popover" }, "files": [ { "path": "registry/litt/examples/popover-demo.tsx", "type": "registry:example", "target": "components/litt/examples/popover-demo.tsx" } ] }, { "name": "context-menu-demo", "type": "registry:example", "title": "Context menu example", "description": "A working context menu: ProjectRowsDemo, the first demo on its page (https://littmd.vercel.app/#context-menu). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/context-menu.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/list.json", "https://littmd.vercel.app/r/menu.json" ], "docs": "Import ProjectRowsDemo from components/litt/examples/context-menu-demo, or read it for how @litt/context-menu is used. Import ContextMenu from components/litt/context-menu and fill it with the Menu's rows from components/litt/menu. Pass the target element as trigger and a label. Every action in it must also be reachable another way, such as a Menu on the row.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/context-menu" }, "files": [ { "path": "registry/litt/examples/context-menu-demo.tsx", "type": "registry:example", "target": "components/litt/examples/context-menu-demo.tsx" } ] }, { "name": "menu-demo", "type": "registry:example", "title": "Menu example", "description": "A working menu: ProjectMenu, the first demo on its page (https://littmd.vercel.app/#menu). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/menu.json" ], "docs": "Import ProjectMenu from components/litt/examples/menu-demo, or read it for how @litt/menu is used. Import Menu and MenuItem from components/litt/menu. Its submenus are solid, never glass on glass.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/menu" }, "files": [ { "path": "registry/litt/examples/menu-demo.tsx", "type": "registry:example", "target": "components/litt/examples/menu-demo.tsx" } ] }, { "name": "command-menu-demo", "type": "registry:example", "title": "Command menu example", "description": "A working command menu: OpenDemo, the first demo on its page (https://littmd.vercel.app/#command-menu). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/command-menu.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/kbd.json" ], "docs": "Import OpenDemo from components/litt/examples/command-menu-demo, or read it for how @litt/command-menu is used. Import CommandMenu and useCommandShortcut from components/litt/command-menu. Give it groups of items and an onSelect.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/command-menu" }, "files": [ { "path": "registry/litt/examples/command-menu-demo.tsx", "type": "registry:example", "target": "components/litt/examples/command-menu-demo.tsx" } ] }, { "name": "dialog-demo", "type": "registry:example", "title": "Dialog example", "description": "A working dialog: PublishDemo, the first demo on its page (https://littmd.vercel.app/#dialog). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/dialog.json" ], "docs": "Import PublishDemo from components/litt/examples/dialog-demo, or read it for how @litt/dialog is used. Import Dialog, DialogTrigger, DialogContent and DialogClose from components/litt/dialog. Pair a form's submit with a Cancel, both at size md.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/dialog" }, "files": [ { "path": "registry/litt/examples/dialog-demo.tsx", "type": "registry:example", "target": "components/litt/examples/dialog-demo.tsx" } ] }, { "name": "toast-demo", "type": "registry:example", "title": "Toast example", "description": "A working toast: SavedDemo, the first demo on its page (https://littmd.vercel.app/#toast). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/toast.json" ], "docs": "Import SavedDemo from components/litt/examples/toast-demo, or read it for how @litt/toast is used. Import Toaster, toast and useToast from components/litt/toast. Mount Toaster once, then call toast() anywhere.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/toast" }, "files": [ { "path": "registry/litt/examples/toast-demo.tsx", "type": "registry:example", "target": "components/litt/examples/toast-demo.tsx" } ] }, { "name": "breadcrumb-demo", "type": "registry:example", "title": "Breadcrumb example", "description": "A working breadcrumb: SettingsTrailDemo, the first demo on its page (https://littmd.vercel.app/#breadcrumb). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/breadcrumb.json" ], "docs": "Import SettingsTrailDemo from components/litt/examples/breadcrumb-demo, or read it for how @litt/breadcrumb is used. Import Breadcrumb from components/litt/breadcrumb. Pass items as { label, href }, the last one being the current page. Pass renderLink and onNavigate to route with your router, and maxVisible to change where the trail folds.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/breadcrumb" }, "files": [ { "path": "registry/litt/examples/breadcrumb-demo.tsx", "type": "registry:example", "target": "components/litt/examples/breadcrumb-demo.tsx" } ] }, { "name": "header-demo", "type": "registry:example", "title": "Glass header example", "description": "A working glass header: DesktopDemo, the first demo on its page (https://littmd.vercel.app/#header). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/header.json", "https://littmd.vercel.app/r/list-cover.json" ], "docs": "Import DesktopDemo from components/litt/examples/header-demo, or read it for how @litt/header is used. Import Header from components/litt/header. Pass a wordmark, links with a current flag and your actions. It needs no router and no provider; pass renderLink and onNavigate to use yours.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/header" }, "files": [ { "path": "registry/litt/examples/header-demo.tsx", "type": "registry:example", "target": "components/litt/examples/header-demo.tsx" } ] }, { "name": "steps-demo", "type": "registry:example", "title": "Steps example", "description": "A working steps: SetupDemo, the first demo on its page (https://littmd.vercel.app/#steps). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/steps.json" ], "docs": "Import SetupDemo from components/litt/examples/steps-demo, or read it for how @litt/steps is used. Import Steps from components/litt/steps. Pass the steps and the current index; onStepSelect lets done steps go back.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/steps" }, "files": [ { "path": "registry/litt/examples/steps-demo.tsx", "type": "registry:example", "target": "components/litt/examples/steps-demo.tsx" } ] }, { "name": "accordion-demo", "type": "registry:example", "title": "Accordion example", "description": "A working accordion: StudioQuestionsDemo, the first demo on its page (https://littmd.vercel.app/#accordion). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/accordion.json" ], "docs": "Import StudioQuestionsDemo from components/litt/examples/accordion-demo, or read it for how @litt/accordion is used. Import Accordion, AccordionItem, AccordionTrigger and AccordionContent from components/litt/accordion. Give each AccordionItem a unique value and put an AccordionTrigger and an AccordionContent in it. Use type=\"multiple\" to let several stay open (the value is then a list), defaultValue or value with onValueChange for the open state, and headingLevel to fit the page's outline.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/accordion" }, "files": [ { "path": "registry/litt/examples/accordion-demo.tsx", "type": "registry:example", "target": "components/litt/examples/accordion-demo.tsx" } ] }, { "name": "avatar-demo", "type": "registry:example", "title": "Avatar example", "description": "A working avatar: InboxDemo, the first demo on its page (https://littmd.vercel.app/#avatar). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json" ], "docs": "Import InboxDemo from components/litt/examples/avatar-demo, or read it for how @litt/avatar is used. Import Avatar and AvatarGroup from components/litt/avatar. Pass a name: the initials and the hue come from it unless you set a hue. Set decorative when the name is written beside the avatar. Give AvatarGroup a label, the first few avatars and a total, and match its ring to the surface it sits on.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/avatar" }, "files": [ { "path": "registry/litt/examples/avatar-demo.tsx", "type": "registry:example", "target": "components/litt/examples/avatar-demo.tsx" } ] }, { "name": "callout-demo", "type": "registry:example", "title": "Callout example", "description": "A working callout: TipDemo, the first demo on its page (https://littmd.vercel.app/#callout). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/callout.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/kbd.json" ], "docs": "Import TipDemo from components/litt/examples/callout-demo, or read it for how @litt/callout is used. Import Callout from components/litt/callout. Pass a title, a description and a tone, and an action (an sm Button or a Kbd) or onDismiss when there is something to do. Set live for a callout that appears after an action. It fills the width of its container, so give the container a width.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/callout" }, "files": [ { "path": "registry/litt/examples/callout-demo.tsx", "type": "registry:example", "target": "components/litt/examples/callout-demo.tsx" } ] }, { "name": "card-demo", "type": "registry:example", "title": "Card example", "description": "A working card: ClientCardsDemo, the first demo on its page (https://littmd.vercel.app/#card). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/card.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/list-cover.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import ClientCardsDemo from components/litt/examples/card-demo, or read it for how @litt/card is used. Import Card, CardCover, CardBody, CardTitle, CardDescription and CardLink from components/litt/card. Put CardLink around the title to make the card a link. Anything else you can press inside it needs relative.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/card" }, "files": [ { "path": "registry/litt/examples/card-demo.tsx", "type": "registry:example", "target": "components/litt/examples/card-demo.tsx" } ] }, { "name": "progress-demo", "type": "registry:example", "title": "Progress example", "description": "A working progress: UploadDemo, the first demo on its page (https://littmd.vercel.app/#progress). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/progress.json" ], "docs": "Import UploadDemo from components/litt/examples/progress-demo, or read it for how @litt/progress is used. Import Progress from components/litt/progress. Pass a label, a value and a max, and status=\"done\" or \"failed\" when it ends. A quantity that does not move while you watch is a Meter.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/progress" }, "files": [ { "path": "registry/litt/examples/progress-demo.tsx", "type": "registry:example", "target": "components/litt/examples/progress-demo.tsx" } ] }, { "name": "resizable-demo", "type": "registry:example", "title": "Resizable example", "description": "A working resizable: SplitDemo, the first demo on its page (https://littmd.vercel.app/#resizable). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/resizable.json", "https://littmd.vercel.app/r/tree.json" ], "docs": "Import SplitDemo from components/litt/examples/resizable-demo, or read it for how @litt/resizable is used. Import ResizablePanelGroup, ResizablePanel and ResizableHandle from components/litt/resizable, as shadcn's resizable is written. Sizes are percents. On a phone, show one panel at a time instead.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/resizable" }, "files": [ { "path": "registry/litt/examples/resizable-demo.tsx", "type": "registry:example", "target": "components/litt/examples/resizable-demo.tsx" } ] }, { "name": "scroll-area-demo", "type": "registry:example", "title": "Scroll area example", "description": "A working scroll area: DeployLogDemo, the first demo on its page (https://littmd.vercel.app/#scroll-area). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/scroll-area.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import DeployLogDemo from components/litt/examples/scroll-area-demo, or read it for how @litt/scroll-area is used. Import ScrollArea from components/litt/scroll-area. Pass a label and give it a height (or a max height) in className; set orientation to \"horizontal\" or \"both\" to scroll sideways. Pass viewportRef to read or set the scroll position.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/scroll-area" }, "files": [ { "path": "registry/litt/examples/scroll-area-demo.tsx", "type": "registry:example", "target": "components/litt/examples/scroll-area-demo.tsx" } ] }, { "name": "tape-progress-demo", "type": "registry:example", "title": "Tape progress example", "description": "A working tape progress: ExportDemo, the first demo on its page (https://littmd.vercel.app/#tape-progress). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/tape-progress.json" ], "docs": "Import ExportDemo from components/litt/examples/tape-progress-demo, or read it for how @litt/tape-progress is used. Needs data-material=\"device\" on . The same props as Progress (label, value, max, status). Under reduced motion the reels jump to the value.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tape-progress" }, "files": [ { "path": "registry/litt/examples/tape-progress-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tape-progress-demo.tsx" } ] }, { "name": "tree-demo", "type": "registry:example", "title": "Tree example", "description": "A working tree: FilesDemo, the first demo on its page (https://littmd.vercel.app/#tree). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/tree.json" ], "docs": "Import FilesDemo from components/litt/examples/tree-demo, or read it for how @litt/tree is used. Import Tree and TreeNode from components/litt/tree. Pass a label and items as data ({ id, label, detail, children }); an item with children is a branch. Hold expanded and selected in state, or leave them to the tree.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tree" }, "files": [ { "path": "registry/litt/examples/tree-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tree-demo.tsx" } ] }, { "name": "table-demo", "type": "registry:example", "title": "Table example", "description": "A working table: DeployHistoryDemo, the first demo on its page (https://littmd.vercel.app/#table). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/table.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import DeployHistoryDemo from components/litt/examples/table-demo, or read it for how @litt/table is used. Import Table, TableHeader, TableBody, TableRow, TableHead and TableCell from components/litt/table. Give the Table a label, and a max height such as max-h-96 if you want the header to stick. The entrance is off until you pass entrance.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/table" }, "files": [ { "path": "registry/litt/examples/table-demo.tsx", "type": "registry:example", "target": "components/litt/examples/table-demo.tsx" } ] }, { "name": "action-bar-demo", "type": "registry:example", "title": "Action bar example", "description": "A working action bar: SelectDemo, the first demo on its page (https://littmd.vercel.app/#action-bar). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/action-bar.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/list.json" ], "docs": "Import SelectDemo from components/litt/examples/action-bar-demo, or read it for how @litt/action-bar is used. Import ActionBar from components/litt/action-bar and place it after the list, inside the same scrolling area. Pass the count, a noun and onClear, and sm Buttons as children. Never an accent fill.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/action-bar" }, "files": [ { "path": "registry/litt/examples/action-bar-demo.tsx", "type": "registry:example", "target": "components/litt/examples/action-bar-demo.tsx" } ] }, { "name": "bar-list-demo", "type": "registry:example", "title": "Bar list example", "description": "A working bar list: ShortcutsDemo, the first demo on its page (https://littmd.vercel.app/#bar-list). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/bar-list.json", "https://littmd.vercel.app/r/kbd.json" ], "docs": "Import ShortcutsDemo from components/litt/examples/bar-list-demo, or read it for how @litt/bar-list is used. Import BarList from components/litt/bar-list. Pass a label and items of { label, value }, plus a unit for screen readers. A row with an href is a link, and with onSelect the others are buttons.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/bar-list" }, "files": [ { "path": "registry/litt/examples/bar-list-demo.tsx", "type": "registry:example", "target": "components/litt/examples/bar-list-demo.tsx" } ] }, { "name": "breakdown-demo", "type": "registry:example", "title": "Breakdown example", "description": "A working breakdown: StorageDemo, the first demo on its page (https://littmd.vercel.app/#breakdown). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/breakdown.json" ], "docs": "Import StorageDemo from components/litt/examples/breakdown-demo, or read it for how @litt/breakdown is used. Import Breakdown from components/litt/breakdown. Pass a label, the parts as { label, value } largest first, and the total when there is free space. Past five parts the rest fold into Other. Pin a hue on a part to keep a kind's color across a page.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/breakdown" }, "files": [ { "path": "registry/litt/examples/breakdown-demo.tsx", "type": "registry:example", "target": "components/litt/examples/breakdown-demo.tsx" } ] }, { "name": "cohort-grid-demo", "type": "registry:example", "title": "Cohort grid example", "description": "A working cohort grid: WeeklyDemo, the first demo on its page (https://littmd.vercel.app/#cohort-grid). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/cohort-grid.json" ], "docs": "Import WeeklyDemo from components/litt/examples/cohort-grid-demo, or read it for how @litt/cohort-grid is used. Import CohortGrid from components/litt/cohort-grid. Pass a label and cohorts as { label, size, values }, oldest first. Each value is the share still active (0 to 100), or a count with valueType=\"count\", and a missing or null value is a period the cohort has not reached. Set periodLabel=\"Month\" or pass periods for other headers. Add average for an All cohorts row and pick a hue.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/cohort-grid" }, "files": [ { "path": "registry/litt/examples/cohort-grid-demo.tsx", "type": "registry:example", "target": "components/litt/examples/cohort-grid-demo.tsx" } ] }, { "name": "details-demo", "type": "registry:example", "title": "Details example", "description": "A working details: DeploymentDemo, the first demo on its page (https://littmd.vercel.app/#details). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/details.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import DeploymentDemo from components/litt/examples/details-demo, or read it for how @litt/details is used. Import Details, DetailsItem and DetailsLink from components/litt/details. Give Details a title and one DetailsItem per fact, with copy on the values people paste. Use layout=\"grid\" for a few short facts, and bare inside a dialog or a panel.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/details" }, "files": [ { "path": "registry/litt/examples/details-demo.tsx", "type": "registry:example", "target": "components/litt/examples/details-demo.tsx" } ] }, { "name": "dot-plot-demo", "type": "registry:example", "title": "Dot plot example", "description": "A working dot plot: ReplySpeedDemo, the first demo on its page (https://littmd.vercel.app/#dot-plot). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/dot-plot.json", "https://littmd.vercel.app/r/segmented.json" ], "docs": "Import ReplySpeedDemo from components/litt/examples/dot-plot-demo, or read it for how @litt/dot-plot is used. Import DotPlot from components/litt/dot-plot. Pass a label, the values, a scale (log for durations) and a formatValue. Add a goal to split the dots, markers to name outliers. It measures its container, so give it a width. Each non-empty column is reachable with the arrow keys.", "meta": { "version": "2026.11.03", "released": "2026-11-03", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/dot-plot" }, "files": [ { "path": "registry/litt/examples/dot-plot-demo.tsx", "type": "registry:example", "target": "components/litt/examples/dot-plot-demo.tsx" } ] }, { "name": "funnel-demo", "type": "registry:example", "title": "Funnel example", "description": "A working funnel: StoreDemo, the first demo on its page (https://littmd.vercel.app/#funnel). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/funnel.json" ], "docs": "Import StoreDemo from components/litt/examples/funnel-demo, or read it for how @litt/funnel is used. Import Funnel from components/litt/funnel. Pass a label and the steps as { label, value } in the order people go through them. Every rail is measured against the first step. hue picks the one data hue (blue by default), unit or formatValue writes the numbers, overallText replaces \"4.1% overall\", and formatStep(value, previous) rewrites the line between steps.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/funnel" }, "files": [ { "path": "registry/litt/examples/funnel-demo.tsx", "type": "registry:example", "target": "components/litt/examples/funnel-demo.tsx" } ] }, { "name": "gauge-demo", "type": "registry:example", "title": "Gauge example", "description": "A working gauge: CreditsDemo, the first demo on its page (https://littmd.vercel.app/#gauge). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/gauge.json" ], "docs": "Import CreditsDemo from components/litt/examples/gauge-demo, or read it for how @litt/gauge is used. Import Gauge from components/litt/gauge. Pass a label, a value, a max and a value text (what a screen reader hears); add a figure, a caption or a hue. It scales down to its container.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/gauge" }, "files": [ { "path": "registry/litt/examples/gauge-demo.tsx", "type": "registry:example", "target": "components/litt/examples/gauge-demo.tsx" } ] }, { "name": "heatmap-demo", "type": "registry:example", "title": "Heatmap example", "description": "A working heatmap: UsageDemo, the first demo on its page (https://littmd.vercel.app/#heatmap). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/heatmap.json" ], "docs": "Import UsageDemo from components/litt/examples/heatmap-demo, or read it for how @litt/heatmap is used. Import Heatmap from components/litt/heatmap. Pass a label, rows of { label, values, total? } and columns that name each column, and pick a hue. Use null for a day with no data. The dots are a grid you can arrow through.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/heatmap" }, "files": [ { "path": "registry/litt/examples/heatmap-demo.tsx", "type": "registry:example", "target": "components/litt/examples/heatmap-demo.tsx" } ] }, { "name": "legend-demo", "type": "registry:example", "title": "Legend example", "description": "A working legend: ChartDemo, the first demo on its page (https://littmd.vercel.app/#legend). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/chart.json", "https://littmd.vercel.app/r/legend.json" ], "docs": "Import ChartDemo from components/litt/examples/legend-demo, or read it for how @litt/legend is used. Import Legend and legendHues from components/litt/legend. Pass a label and the items as { name, hue?, value? } in the chart's order, five at most. Control it with hidden and onHiddenChange, or start it with defaultHidden. Pass the chart only the shown series, each with hue: legendHues(items)[name], so a series keeps its color when another is hidden, and turn the chart's own legend off with legend={false}. Alt with a click or Enter shows only that series.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/legend" }, "files": [ { "path": "registry/litt/examples/legend-demo.tsx", "type": "registry:example", "target": "components/litt/examples/legend-demo.tsx" } ] }, { "name": "log-view-demo", "type": "registry:example", "title": "Log view example", "description": "A working log view: BuildDemo, the first demo on its page (https://littmd.vercel.app/#log-view). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/log-view.json" ], "docs": "Import BuildDemo from components/litt/examples/log-view-demo, or read it for how @litt/log-view is used. Import LogView and LogLine from components/litt/log-view. Append lines ({ time, level, text }) as the run writes, and give it a height. Say how the run ended in your own status; lines are not read out one by one.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/log-view" }, "files": [ { "path": "registry/litt/examples/log-view-demo.tsx", "type": "registry:example", "target": "components/litt/examples/log-view-demo.tsx" } ] }, { "name": "range-chart-demo", "type": "registry:example", "title": "Range chart example", "description": "A working range chart: VisitorsDemo, the first demo on its page (https://littmd.vercel.app/#range-chart). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/range-chart.json" ], "docs": "Import VisitorsDemo from components/litt/examples/range-chart-demo, or read it for how @litt/range-chart is used. Import RangeChart from components/litt/range-chart. Give it a label, bars as { label, value }, and optionally segments as { label, start }, axis ticks and a unit. Hold the range in state with value and onValueChange ([first, last], both inclusive), or load on onValueCommit, which fires once the edges have settled. The figure is a sum, so the values must add up. A single moment in a run is a TimeScrubber; a value that stays is a Slider.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/range-chart" }, "files": [ { "path": "registry/litt/examples/range-chart-demo.tsx", "type": "registry:example", "target": "components/litt/examples/range-chart-demo.tsx" } ] }, { "name": "sparkline-demo", "type": "registry:example", "title": "Sparkline example", "description": "A working sparkline: BesideAFigureDemo, the first demo on its page (https://littmd.vercel.app/#sparkline). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/sparkline.json", "https://littmd.vercel.app/r/stat.json" ], "docs": "Import BesideAFigureDemo from components/litt/examples/sparkline-demo, or read it for how @litt/sparkline is used. Import Sparkline from components/litt/sparkline. Pass a label and the values, oldest first. It fills its container's width, so give a table cell a wrapper with a width, and fix min and max so rows compare. Put the exact figure beside it. Stat takes one in its trend prop.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/sparkline" }, "files": [ { "path": "registry/litt/examples/sparkline-demo.tsx", "type": "registry:example", "target": "components/litt/examples/sparkline-demo.tsx" } ] }, { "name": "spread-demo", "type": "registry:example", "title": "Spread example", "description": "A working spread: BuildTimesDemo, the first demo on its page (https://littmd.vercel.app/#spread). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/spread.json" ], "docs": "Import BuildTimesDemo from components/litt/examples/spread-demo, or read it for how @litt/spread is used. Import Spread from components/litt/spread. Pass a label and items of { label, values } or { label, min, p25, median, p75, max }, and a formatValue that includes the unit. Rows share one scale (linear or log, with an optional domain and ticks) and an optional goal. It fills its container's width, so give the container a width.", "meta": { "version": "2026.10.26", "released": "2026-10-26", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/spread" }, "files": [ { "path": "registry/litt/examples/spread-demo.tsx", "type": "registry:example", "target": "components/litt/examples/spread-demo.tsx" } ] }, { "name": "timeline-demo", "type": "registry:example", "title": "Timeline example", "description": "A working timeline: DeployDemo, the first demo on its page (https://littmd.vercel.app/#timeline). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/timeline.json" ], "docs": "Import DeployDemo from components/litt/examples/timeline-demo, or read it for how @litt/timeline is used. Import Timeline, TimelinePhase, TimelineStep, TimelineResult and TimelineBar from components/litt/timeline. Put steps in phases, give each step an at, a label, a status and its seconds, and close with a TimelineResult. Feed TimelineBar the same data as the list, and keep it beside the list.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/timeline" }, "files": [ { "path": "registry/litt/examples/timeline-demo.tsx", "type": "registry:example", "target": "components/litt/examples/timeline-demo.tsx" } ] }, { "name": "app-shell-demo", "type": "registry:example", "title": "App shell example", "description": "A working app shell: ShellDemo, the first demo on its page (https://littmd.vercel.app/#app-shell). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/app-shell.json", "https://littmd.vercel.app/r/card.json", "https://littmd.vercel.app/r/icons.json" ], "docs": "Import ShellDemo from components/litt/examples/app-shell-demo, or read it for how @litt/app-shell is used. Import AppShell, SidebarNav and SidebarLink from components/litt/app-shell. Pass a wordmark, a nav and the page. Mark the current link with current. It needs no router: pass as={Link} to a SidebarLink to use yours.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/app-shell" }, "files": [ { "path": "registry/litt/examples/app-shell-demo.tsx", "type": "registry:example", "target": "components/litt/examples/app-shell-demo.tsx" } ] }, { "name": "chart-demo", "type": "registry:example", "title": "Chart example", "description": "A working chart: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#chart). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/chart.json" ], "docs": "Import DeploysDemo from components/litt/examples/chart-demo, or read it for how @litt/chart is used. Import BarChart, LineChart, StackedBarChart and Meter from components/litt/chart. Pass a label, the category labels and series of { name, values }, with an optional hue per series or hues on the chart. The chart measures its container, so give it a width. Every chart ships a hidden table and a summary for screen readers.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/chart" }, "files": [ { "path": "registry/litt/examples/chart-demo.tsx", "type": "registry:example", "target": "components/litt/examples/chart-demo.tsx" } ] }, { "name": "form-demo", "type": "registry:example", "title": "Form example", "description": "A working form: StartProjectDemo, the first demo on its page (https://littmd.vercel.app/#form). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/checkbox.json", "https://littmd.vercel.app/r/form.json", "https://littmd.vercel.app/r/input.json", "https://littmd.vercel.app/r/toast.json" ], "docs": "Import StartProjectDemo from components/litt/examples/form-demo, or read it for how @litt/form is used. Import FormSection, Fieldset, ErrorSummary and FormActions from components/litt/form. The fields themselves come from input, select, checkbox, switch and slider.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/form" }, "files": [ { "path": "registry/litt/examples/form-demo.tsx", "type": "registry:example", "target": "components/litt/examples/form-demo.tsx" } ] }, { "name": "pagination-demo", "type": "registry:example", "title": "Pagination example", "description": "A working pagination: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#pagination). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/pagination.json", "https://littmd.vercel.app/r/table.json", "https://littmd.vercel.app/r/tag.json" ], "docs": "Import DeploysDemo from components/litt/examples/pagination-demo, or read it for how @litt/pagination is used. Import Pagination from components/litt/pagination. Hold the page in state and pass page, pageSize, total and onPageChange. Give it a label that says what is paged.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/pagination" }, "files": [ { "path": "registry/litt/examples/pagination-demo.tsx", "type": "registry:example", "target": "components/litt/examples/pagination-demo.tsx" } ] }, { "name": "rolling-number-demo", "type": "registry:example", "title": "Rolling number example", "description": "A working rolling number: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#rolling-number). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/rolling-number.json", "https://littmd.vercel.app/r/stat.json" ], "docs": "Import DeploysDemo from components/litt/examples/rolling-number-demo, or read it for how @litt/rolling-number is used. Import RollingNumber from components/litt/rolling-number and pass it a number as value, with Intl.NumberFormat options as format and a locale. It takes the font, size and color of where it sits: pass it as a Stat's value to roll a tile, since Stat itself stays still. A change is not announced; say it in a live region if it matters.", "meta": { "version": "2026.10.21", "released": "2026-10-21", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/rolling-number" }, "files": [ { "path": "registry/litt/examples/rolling-number-demo.tsx", "type": "registry:example", "target": "components/litt/examples/rolling-number-demo.tsx" } ] }, { "name": "seven-segment-demo", "type": "registry:example", "title": "Seven-segment readout example", "description": "A working seven-segment readout: CounterDemo, the first demo on its page (https://littmd.vercel.app/#seven-segment). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/seven-segment.json" ], "docs": "Import CounterDemo from components/litt/examples/seven-segment-demo, or read it for how @litt/seven-segment is used. Needs data-material=\"device\" on . Pass a value and the digits; a change rolls the segments on the instant tier. Under reduced motion they switch at once.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/seven-segment" }, "files": [ { "path": "registry/litt/examples/seven-segment-demo.tsx", "type": "registry:example", "target": "components/litt/examples/seven-segment-demo.tsx" } ] }, { "name": "stat-demo", "type": "registry:example", "title": "Stat example", "description": "A working stat: StudioStatsDemo, the first demo on its page (https://littmd.vercel.app/#stat). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/stat.json" ], "docs": "Import StudioStatsDemo from components/litt/examples/stat-demo, or read it for how @litt/stat is used. Import Stat and StatGroup from components/litt/stat. Say the direction in the delta's words, and set tone to good, bad or neutral for whether it is news. Put the tiles in a StatGroup: two across, four across from 40rem.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/stat" }, "files": [ { "path": "registry/litt/examples/stat-demo.tsx", "type": "registry:example", "target": "components/litt/examples/stat-demo.tsx" } ] }, { "name": "states-demo", "type": "registry:example", "title": "Empty and loading states example", "description": "A working empty and loading states: EmptyDemo, the first demo on its page (https://littmd.vercel.app/#states). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/list.json", "https://littmd.vercel.app/r/states.json" ], "docs": "Import EmptyDemo from components/litt/examples/states-demo, or read it for how @litt/states is used. Import Empty, Skeleton, Loading and ErrorState from components/litt/states. Wrap Skeleton blocks in Loading, so a screen reader hears what is loading once.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/states" }, "files": [ { "path": "registry/litt/examples/states-demo.tsx", "type": "registry:example", "target": "components/litt/examples/states-demo.tsx" } ] }, { "name": "agent-indicator-demo", "type": "registry:example", "title": "Agent indicator example", "description": "A working agent indicator: SixDemo, the first demo on its page (https://littmd.vercel.app/#agent-indicator). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/agent-indicator.json" ], "docs": "Import SixDemo from components/litt/examples/agent-indicator-demo, or read it for how @litt/agent-indicator is used. Needs data-material=\"device\" on . Pass the phase and it crossfades between mechanisms; pass paused to hold it. Under reduced motion each holds one frame. It says the phase in words for a screen reader.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/agent-indicator" }, "files": [ { "path": "registry/litt/examples/agent-indicator-demo.tsx", "type": "registry:example", "target": "components/litt/examples/agent-indicator-demo.tsx" } ] }, { "name": "code-block-demo", "type": "registry:example", "title": "Code block example", "description": "A working code block: FilesDemo, the first demo on its page (https://littmd.vercel.app/#code-block). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/code-block.json" ], "docs": "Import FilesDemo from components/litt/examples/code-block-demo, or read it for how @litt/code-block is used. Import CodeBlock from components/litt/code-block. Pass the code, a lang (tsx, ts, jsx, js, diff, shell or text) and a filename for the header. The label names the scroll area and defaults to the file name. lineNumbers adds a gutter, wrap wraps long lines, and maxHeight (a number or a CSS length) makes a tall block scroll. A diff reads each line's first character as its sign. The syntax colors are declared on the block itself, so it needs no stylesheet. It imports sugar-high.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/code-block" }, "files": [ { "path": "registry/litt/examples/code-block-demo.tsx", "type": "registry:example", "target": "components/litt/examples/code-block-demo.tsx" } ] }, { "name": "composer-demo", "type": "registry:example", "title": "Composer example", "description": "A working composer: StudioDemo, the first demo on its page (https://littmd.vercel.app/#composer). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/composer.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/select.json" ], "docs": "Import StudioDemo from components/litt/examples/composer-demo, or read it for how @litt/composer is used. Import Composer (and FileChip) from components/litt/composer. Hold the files yourself and pass onSend, streaming and onStop: the field clears after a send, and Send becomes Stop while streaming is true. Pass onFiles to show Attach and take pastes and drops, files and onRemoveFile to draw the chips, tools for a model Select at sm, suggestions for an empty chat, hint for a line under the box, and maxLength for the count. On a touch screen Return adds a line and Send sends by itself (enterSends overrides it); keep the composer above the keyboard with useVisibleScreen.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/composer" }, "files": [ { "path": "registry/litt/examples/composer-demo.tsx", "type": "registry:example", "target": "components/litt/examples/composer-demo.tsx" } ] }, { "name": "file-changes-demo", "type": "registry:example", "title": "File changes example", "description": "A working file changes: TurnDemo, the first demo on its page (https://littmd.vercel.app/#file-changes). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/composer.json", "https://littmd.vercel.app/r/file-changes.json" ], "docs": "Import TurnDemo from components/litt/examples/file-changes-demo, or read it for how @litt/file-changes is used. Import FileChanges from components/litt/file-changes. Pass changes ({ id, path, kind, diff?, added?, removed?, from? for a rename, state? }) and onDecide(ids, decision), and set each change's state from it: the component holds no decision of its own. Use one change in an edit call's details and every change at the end of the turn.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/file-changes" }, "files": [ { "path": "registry/litt/examples/file-changes-demo.tsx", "type": "registry:example", "target": "components/litt/examples/file-changes-demo.tsx" } ] }, { "name": "message-demo", "type": "registry:example", "title": "Message example", "description": "A working message: ThreadDemo, the first demo on its page (https://littmd.vercel.app/#message). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/avatar.json", "https://littmd.vercel.app/r/message.json", "https://littmd.vercel.app/r/switch.json" ], "docs": "Import ThreadDemo from components/litt/examples/message-demo, or read it for how @litt/message is used. Import Conversation, Message, MessageText and MessageActions from components/litt/message. Give the Conversation a label and a height, and mark it busy while the agent answers. Inside it put a Message with from=\"user\" for the person's turn, and a Message for the agent's, holding a MessageText (your markdown renderer's output goes inside it) and actions={}. Pass streaming while the text arrives, and error with onRetry for a turn that stopped.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/message" }, "files": [ { "path": "registry/litt/examples/message-demo.tsx", "type": "registry:example", "target": "components/litt/examples/message-demo.tsx" } ] }, { "name": "plan-demo", "type": "registry:example", "title": "Plan example", "description": "A working plan: MoveDemo, the first demo on its page (https://littmd.vercel.app/#plan). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/plan.json" ], "docs": "Import MoveDemo from components/litt/examples/plan-demo, or read it for how @litt/plan is used. Import Plan from components/litt/plan. Pass a label and steps of { id, label, status, detail? }, with status one of pending, running, done, failed or skipped. Hold the steps in state and change a status in place as the agent works, and give every step a stable id so only a step you add later fades in. The count is the done steps over all steps, and failed and skipped steps do not count. It fills its container and has no card, so put it in a turn or in a panel you draw.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/plan" }, "files": [ { "path": "registry/litt/examples/plan-demo.tsx", "type": "registry:example", "target": "components/litt/examples/plan-demo.tsx" } ] }, { "name": "run-card-demo", "type": "registry:example", "title": "Run card example", "description": "A working run card: WorldDemo, the first demo on its page (https://littmd.vercel.app/#run-card). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/plan.json", "https://littmd.vercel.app/r/run-card.json" ], "docs": "Import WorldDemo from components/litt/examples/run-card-demo, or read it for how @litt/run-card is used. Import RunCard from components/litt/run-card. Give it a title and the run's steps as Plan takes them (label, status, an id), and optionally progress from 0 to 1, a preview, actions such as a Stop button, and open with onOpenChange. Update steps in place as the agent works. A plan with no run behind it is a Plan.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/run-card" }, "files": [ { "path": "registry/litt/examples/run-card-demo.tsx", "type": "registry:example", "target": "components/litt/examples/run-card-demo.tsx" } ] }, { "name": "run-list-demo", "type": "registry:example", "title": "Run list example", "description": "A working run list: SidebarDemo, the first demo on its page (https://littmd.vercel.app/#run-list). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/run-list.json" ], "docs": "Import SidebarDemo from components/litt/examples/run-list-demo, or read it for how @litt/run-list is used. Import RunList from components/litt/run-list. Pass runs ({ id, title, status, detail?, progress?, updated, href? }) in your order, selectedId and onSelect, and onStop and onArchive for the row actions. updated is words you give (\"2m ago\"): the list reads no clock.", "meta": { "version": "2026.11.05", "released": "2026-11-05", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/run-list" }, "files": [ { "path": "registry/litt/examples/run-list-demo.tsx", "type": "registry:example", "target": "components/litt/examples/run-list-demo.tsx" } ] }, { "name": "thinking-demo", "type": "registry:example", "title": "Thinking example", "description": "A working thinking: LiveDemo, the first demo on its page (https://littmd.vercel.app/#thinking). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/thinking.json" ], "docs": "Import LiveDemo from components/litt/examples/thinking-demo, or read it for how @litt/thinking is used. Import Thinking from components/litt/thinking. Pass active while the agent thinks and the reasoning as children: the clock counts from when active turned true. For a thought loaded from history leave active off and pass duration in seconds. open, defaultOpen and onOpenChange control it, and label replaces the words.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/thinking" }, "files": [ { "path": "registry/litt/examples/thinking-demo.tsx", "type": "registry:example", "target": "components/litt/examples/thinking-demo.tsx" } ] }, { "name": "tool-call-demo", "type": "registry:example", "title": "Tool call example", "description": "A working tool call: RunDemo, the first demo on its page (https://littmd.vercel.app/#tool-call). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/tool-call.json" ], "docs": "Import RunDemo from components/litt/examples/tool-call-demo, or read it for how @litt/tool-call is used. Import ToolCall, ToolCallGroup and ToolApproval from components/litt/tool-call. Give a call a status, an action and a target, plus an input or an output to make it open. Put a LogView, a SourceList or a FileChanges in details, never in output, and say what the call found in result. Pass running to a group, and hold decision in state for an approval, setting it in onAllow and onDeny. Keep an approval outside a group, and disable your Send while it waits so the view holds one accent fill.", "meta": { "version": "2026.11.06", "released": "2026-11-06", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/tool-call" }, "files": [ { "path": "registry/litt/examples/tool-call-demo.tsx", "type": "registry:example", "target": "components/litt/examples/tool-call-demo.tsx" } ] }, { "name": "copy-button-demo", "type": "registry:example", "title": "Copy button example", "description": "A working copy button: InstallDemo, the first demo on its page (https://littmd.vercel.app/#copy-button). It installs the components it uses.", "registryDependencies": [ "https://littmd.vercel.app/r/copy-button.json" ], "docs": "Import InstallDemo from components/litt/examples/copy-button-demo, or read it for how @litt/copy-button is used. Needs data-material=\"device\" on . Pass the text to copy; it says Copied for a moment and goes back. Under reduced motion the glyphs swap at once.", "meta": { "version": "2026.11.08", "released": "2026-11-08", "changelog": "https://littmd.vercel.app/changelog.md", "example": "@litt/copy-button" }, "files": [ { "path": "registry/litt/examples/copy-button-demo.tsx", "type": "registry:example", "target": "components/litt/examples/copy-button-demo.tsx" } ] } ] }