{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "ikada", "homepage": "https://sproutboat.com/ikada", "items": [ { "name": "theme", "type": "registry:theme", "title": "ikada theme", "description": "ikada's tokens for Tailwind v4: OKLCH colours for light and dark, an ikada-scoped type scale (text-sb-*), radii, shadows, motion springs, layers and density. Light by default, dark with a .dark class.", "cssVars": { "theme": { "font-sans": "\"Figtree Variable\", \"Figtree\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif", "font-mono": "\"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace", "radius-xs": "0.25rem", "radius-sm": "0.375rem", "radius-md": "0.5rem", "radius-lg": "0.625rem", "radius-xl": "0.75rem", "radius-2xl": "0.875rem", "radius-full": "9999px", "ease-out": "cubic-bezier(0.23, 1, 0.32, 1)", "ease-in-out": "cubic-bezier(0.77, 0, 0.175, 1)", "ease-hover": "ease", "text-sb-xs": "0.75rem", "text-sb-xs--line-height": "1rem", "text-sb-xs--letter-spacing": "0em", "text-sb-xs--font-weight": "500", "text-sb-sm": "0.8125rem", "text-sb-sm--line-height": "1.25rem", "text-sb-sm--letter-spacing": "0em", "text-sb-sm--font-weight": "400", "text-sb-base": "0.875rem", "text-sb-base--line-height": "1.25rem", "text-sb-base--letter-spacing": "0em", "text-sb-base--font-weight": "400", "text-sb-md": "0.9375rem", "text-sb-md--line-height": "1.375rem", "text-sb-md--letter-spacing": "-0.005em", "text-sb-md--font-weight": "600", "text-sb-lg": "1.125rem", "text-sb-lg--line-height": "1.625rem", "text-sb-lg--letter-spacing": "-0.01em", "text-sb-lg--font-weight": "700", "text-sb-xl": "1.5rem", "text-sb-xl--line-height": "2rem", "text-sb-xl--letter-spacing": "-0.015em", "text-sb-xl--font-weight": "700", "text-sb-2xl": "1.75rem", "text-sb-2xl--line-height": "2.25rem", "text-sb-2xl--letter-spacing": "-0.02em", "text-sb-2xl--font-weight": "700", "text-sb-metric": "1.75rem", "text-sb-metric--line-height": "2.25rem", "text-sb-metric--letter-spacing": "-0.02em", "text-sb-metric--font-weight": "700", "color-canvas": "var(--sb-canvas)", "color-surface": "var(--sb-surface)", "color-well": "var(--sb-well)", "color-hover": "var(--sb-hover)", "color-raised": "var(--sb-raised)", "color-hairline": "var(--sb-hairline)", "color-hairline-strong": "var(--sb-hairline-strong)", "color-control-edge": "var(--sb-control-edge)", "color-focus": "var(--sb-focus)", "color-fg": "var(--sb-fg)", "color-fg-muted": "var(--sb-fg-muted)", "color-brand": "var(--sb-brand)", "color-brand-hover": "var(--sb-brand-hover)", "color-on-brand": "var(--sb-on-brand)", "color-brand-fg": "var(--sb-brand-fg)", "color-brand-soft": "var(--sb-brand-soft)", "color-brand-dot": "var(--sb-brand-dot)", "color-warn-fg": "var(--sb-warn-fg)", "color-warn-soft": "var(--sb-warn-soft)", "color-warn-dot": "var(--sb-warn-dot)", "color-danger": "var(--sb-danger)", "color-danger-hover": "var(--sb-danger-hover)", "color-on-danger": "var(--sb-on-danger)", "color-danger-fg": "var(--sb-danger-fg)", "color-danger-soft": "var(--sb-danger-soft)", "color-danger-dot": "var(--sb-danger-dot)", "color-info-fg": "var(--sb-info-fg)", "color-info-soft": "var(--sb-info-soft)", "color-info-dot": "var(--sb-info-dot)", "color-neutral-fg": "var(--sb-neutral-fg)", "color-neutral-soft": "var(--sb-neutral-soft)", "color-neutral-dot": "var(--sb-neutral-dot)", "color-code-bg": "var(--sb-code-bg)", "color-diff-add": "var(--sb-diff-add)", "color-diff-del": "var(--sb-diff-del)", "color-chart-requests": "var(--sb-chart-requests)", "color-chart-errors": "var(--sb-chart-errors)", "color-chart-deploy": "var(--sb-chart-deploy)", "color-chart-grid": "var(--sb-chart-grid)", "color-chart-2xx": "var(--sb-chart-2xx)", "color-chart-3xx": "var(--sb-chart-3xx)", "color-chart-4xx": "var(--sb-chart-4xx)", "color-chart-5xx": "var(--sb-chart-5xx)", "color-chart-other": "var(--sb-chart-other)", "color-chart-series": "var(--sb-chart-series)", "color-scrim": "var(--sb-scrim)", "shadow-card": "var(--sb-shadow-card)", "shadow-card-hover": "var(--sb-shadow-card-hover)", "shadow-button": "var(--sb-shadow-button)", "shadow-button-hover": "var(--sb-shadow-button-hover)", "shadow-button-pressed": "var(--sb-shadow-button-pressed)", "shadow-primary": "var(--sb-shadow-primary)", "shadow-primary-hover": "var(--sb-shadow-primary-hover)", "shadow-primary-pressed": "var(--sb-shadow-primary-pressed)", "shadow-field": "var(--sb-shadow-field)", "shadow-field-hover": "var(--sb-shadow-field-hover)", "shadow-tray": "var(--sb-shadow-tray)", "shadow-pill": "var(--sb-shadow-pill)", "shadow-float": "var(--sb-shadow-float)", "shadow-dialog": "var(--sb-shadow-dialog)", "ease-spring-smooth": "var(--sb-spring-smooth)", "ease-spring-snappy": "var(--sb-spring-snappy)", "ease-spring-bob": "var(--sb-spring-bob)" }, "light": { "sb-canvas": "oklch(0.965 0 0)", "sb-surface": "oklch(0.995 0 0)", "sb-well": "oklch(0.962 0 0)", "sb-hover": "oklch(0.925 0 0)", "sb-raised": "oklch(1 0 0)", "sb-hairline": "oklch(0.9 0 0)", "sb-hairline-strong": "oklch(0.82 0 0)", "sb-control-edge": "oklch(0.6 0 0)", "sb-focus": "oklch(0.22 0 0)", "sb-fg": "oklch(0.22 0 0)", "sb-fg-muted": "oklch(0.44 0 0)", "sb-brand": "oklch(0.47 0.12 152)", "sb-brand-hover": "oklch(0.42 0.105 152)", "sb-on-brand": "oklch(0.99 0.005 150)", "sb-brand-fg": "oklch(0.42 0.11 152)", "sb-brand-soft": "oklch(0.94 0.05 150)", "sb-brand-dot": "oklch(0.62 0.16 150)", "sb-warn-fg": "oklch(0.43 0.09 70)", "sb-warn-soft": "oklch(0.95 0.06 85)", "sb-warn-dot": "oklch(0.63 0.14 72)", "sb-danger": "oklch(0.48 0.18 25)", "sb-danger-hover": "oklch(0.43 0.18 25)", "sb-on-danger": "oklch(1 0 0)", "sb-danger-fg": "oklch(0.46 0.18 25)", "sb-danger-soft": "oklch(0.95 0.035 25)", "sb-danger-dot": "oklch(0.58 0.2 25)", "sb-info-fg": "oklch(0.42 0.14 255)", "sb-info-soft": "oklch(0.94 0.04 255)", "sb-info-dot": "oklch(0.58 0.15 255)", "sb-neutral-fg": "oklch(0.42 0 0)", "sb-neutral-soft": "oklch(0.93 0 0)", "sb-neutral-dot": "oklch(0.55 0 0)", "sb-code-bg": "oklch(0.955 0 0)", "sb-diff-add": "oklch(0.94 0.05 150)", "sb-diff-del": "oklch(0.95 0.04 25)", "sb-chart-requests": "oklch(0.55 0.15 255)", "sb-chart-errors": "oklch(0.58 0.2 25)", "sb-chart-deploy": "oklch(0.4 0 0)", "sb-chart-grid": "oklch(0.88 0 0)", "sb-chart-2xx": "oklch(0.6 0.16 150)", "sb-chart-3xx": "oklch(0.6 0.12 235)", "sb-chart-4xx": "oklch(0.62 0.135 75)", "sb-chart-5xx": "oklch(0.58 0.2 25)", "sb-chart-other": "oklch(0.55 0 0)", "sb-chart-series": "oklch(0.55 0.12 300)", "sb-scrim": "oklch(0.25 0 260 / 0.34)" }, "dark": { "sb-canvas": "oklch(0.18 0.014 255)", "sb-surface": "oklch(0.23 0.016 255)", "sb-well": "oklch(0.2 0.015 255)", "sb-hover": "oklch(0.295 0.018 255)", "sb-raised": "oklch(0.34 0.02 255)", "sb-hairline": "oklch(0.3 0.018 255)", "sb-hairline-strong": "oklch(0.4 0.02 255)", "sb-control-edge": "oklch(0.62 0.02 255)", "sb-focus": "oklch(0.95 0.01 255)", "sb-fg": "oklch(0.95 0.01 255)", "sb-fg-muted": "oklch(0.76 0.018 255)", "sb-brand": "oklch(0.72 0.12 152)", "sb-brand-hover": "oklch(0.77 0.12 152)", "sb-on-brand": "oklch(0.2 0.03 152)", "sb-brand-fg": "oklch(0.82 0.13 152)", "sb-brand-soft": "oklch(0.31 0.045 152)", "sb-brand-dot": "oklch(0.74 0.15 152)", "sb-warn-fg": "oklch(0.88 0.1 85)", "sb-warn-soft": "oklch(0.35 0.06 80)", "sb-warn-dot": "oklch(0.8 0.14 80)", "sb-danger": "oklch(0.68 0.14 25)", "sb-danger-hover": "oklch(0.73 0.13 25)", "sb-on-danger": "oklch(0.18 0.04 25)", "sb-danger-fg": "oklch(0.85 0.1 25)", "sb-danger-soft": "oklch(0.34 0.08 25)", "sb-danger-dot": "oklch(0.74 0.16 25)", "sb-info-fg": "oklch(0.84 0.1 255)", "sb-info-soft": "oklch(0.33 0.07 255)", "sb-info-dot": "oklch(0.76 0.13 255)", "sb-neutral-fg": "oklch(0.85 0.012 255)", "sb-neutral-soft": "oklch(0.33 0.012 255)", "sb-neutral-dot": "oklch(0.72 0.012 255)", "sb-code-bg": "oklch(0.155 0.012 255)", "sb-diff-add": "oklch(0.27 0.05 152)", "sb-diff-del": "oklch(0.27 0.06 25)", "sb-chart-requests": "oklch(0.76 0.13 255)", "sb-chart-errors": "oklch(0.74 0.16 25)", "sb-chart-deploy": "oklch(0.83 0.015 255)", "sb-chart-grid": "oklch(0.34 0.018 255)", "sb-chart-2xx": "oklch(0.76 0.16 152)", "sb-chart-3xx": "oklch(0.78 0.1 235)", "sb-chart-4xx": "oklch(0.8 0.13 80)", "sb-chart-5xx": "oklch(0.74 0.16 25)", "sb-chart-other": "oklch(0.72 0.012 255)", "sb-chart-series": "oklch(0.76 0.1 300)", "sb-scrim": "oklch(0.06 0.012 255 / 0.62)" } }, "css": { "@property --sb-wake": { "syntax": "\"\"", "inherits": "false", "initial-value": "0px" }, "@property --sb-wake-alpha": { "syntax": "\"\"", "inherits": "false", "initial-value": "0%" }, "@keyframes sb-wake": { "from": { "--sb-wake": "4px", "--sb-wake-alpha": "30%" }, "to": { "--sb-wake": "calc(4px + var(--sb-offset-wake))", "--sb-wake-alpha": "0%" } }, "@keyframes sb-bob": { "from": { "scale": "calc(1 - 0.12 * var(--sb-move))" }, "to": { "scale": "1" } }, "@keyframes sb-sprout": { "from": { "opacity": "0.4", "scale": "calc(1 - 0.6 * var(--sb-move))", "translate": "0 calc(2px * var(--sb-move))" }, "to": { "opacity": "1", "scale": "1", "translate": "0 0" } }, "@keyframes sb-sprout-ring": { "0%": { "opacity": "0", "scale": "0.6" }, "20%": { "opacity": "0.6" }, "100%": { "opacity": "0", "scale": "calc(1 + 1.3 * var(--sb-move))" } }, "@keyframes sb-breathe": { "0%, 100%": { "opacity": "1" }, "50%": { "opacity": "0.45" } }, "@layer base": { ":root": { "--sb-move": "1", "--sb-duration-hover": "120ms", "--sb-duration-press": "90ms", "--sb-duration-tooltip-in": "150ms", "--sb-duration-tooltip-out": "100ms", "--sb-duration-popup-in": "140ms", "--sb-duration-popup-out": "110ms", "--sb-duration-dialog-in": "220ms", "--sb-duration-dialog-out": "150ms", "--sb-duration-slide": "250ms", "--sb-duration-toast-in": "300ms", "--sb-duration-toast-out": "110ms", "--sb-duration-wake": "520ms", "--sb-spring-smooth": "linear(0, 0.0238 2.5%, 0.0816 5%, 0.1582 7.5%, 0.2431 10%, 0.3294 12.5%, 0.4129 15%, 0.4909 17.5%, 0.562 20%, 0.6256 22.5%, 0.6819 25%, 0.731 27.5%, 0.7736 30%, 0.8101 32.5%, 0.8412 35%, 0.8677 37.5%, 0.89 40%, 0.9088 42.5%, 0.9246 45%, 0.9377 47.5%, 0.9487 50%, 0.9578 52.5%, 0.9653 55%, 0.9716 57.5%, 0.9767 60%, 0.9809 62.5%, 0.9844 65%, 0.9873 67.5%, 0.9896 70%, 0.9916 72.5%, 0.9931 75%, 0.9944 77.5%, 0.9955 80%, 0.9963 82.5%, 0.997 85%, 0.9976 87.5%, 0.998 90%, 0.9984 92.5%, 0.9987 95%, 0.999 97.5%, 1 100%)", "--sb-duration-spring-smooth": "525ms", "--sb-spring-snappy": "linear(0, 0.0243 2.5%, 0.085 5%, 0.1673 7.5%, 0.2604 10%, 0.3564 12.5%, 0.4501 15%, 0.5378 17.5%, 0.6177 20%, 0.6886 22.5%, 0.7503 25%, 0.803 27.5%, 0.8472 30%, 0.8839 32.5%, 0.9137 35%, 0.9376 37.5%, 0.9564 40%, 0.9711 42.5%, 0.9822 45%, 0.9904 47.5%, 0.9964 50%, 1.0006 52.5%, 1.0033 55%, 1.005 57.5%, 1.0059 60%, 1.0063 62.5%, 1.0062 65%, 1.0059 67.5%, 1.0054 70%, 1.0048 72.5%, 1.0042 75%, 1.0036 77.5%, 1.0031 80%, 1.0026 82.5%, 1.0021 85%, 1.0017 87.5%, 1.0013 90%, 1.001 92.5%, 1.0008 95%, 1.0006 97.5%, 1 100%)", "--sb-duration-spring-snappy": "525ms", "--sb-spring-bob": "linear(0, 0.0246 2.5%, 0.0874 5%, 0.1739 7.5%, 0.2731 10%, 0.3766 12.5%, 0.4783 15%, 0.5741 17.5%, 0.6611 20%, 0.738 22.5%, 0.8042 25%, 0.8598 27.5%, 0.9054 30%, 0.9418 32.5%, 0.9701 35%, 0.9913 37.5%, 1.0067 40%, 1.0171 42.5%, 1.0237 45%, 1.0272 47.5%, 1.0284 50%, 1.0279 52.5%, 1.0262 55%, 1.0239 57.5%, 1.0211 60%, 1.0182 62.5%, 1.0152 65%, 1.0125 67.5%, 1.01 70%, 1.0078 72.5%, 1.0058 75%, 1.0042 77.5%, 1.0029 80%, 1.0018 82.5%, 1.001 85%, 1.0003 87.5%, 0.9999 90%, 0.9996 92.5%, 0.9994 95%, 0.9992 97.5%, 1 100%)", "--sb-duration-spring-bob": "675ms", "--sb-offset-press": "calc(1px * var(--sb-move))", "--sb-offset-wake": "calc(6px * var(--sb-move))", "--sb-scale-popup": "calc(1 - 0.04 * var(--sb-move))", "--sb-scale-dialog": "calc(1 - 0.04 * var(--sb-move))", "--sb-scale-press": "calc(1 - 0.03 * var(--sb-move))", "--sb-scale-icon": "calc(1 - 0.75 * var(--sb-move))", "--sb-z-base": "0", "--sb-z-sticky": "20", "--sb-z-overlay": "50", "--sb-z-modal": "60", "--sb-z-dropdown": "65", "--sb-z-popover": "70", "--sb-z-toast": "80", "--sb-z-tooltip": "90", "--sb-control-h": "36px", "--sb-control-h-sm": "28px", "--sb-row-h": "48px", "--sb-shadow-card": "0 0 0 1px oklch(0.22 0 0 / 0.06), 0 1px 2px oklch(0.3 0 0 / 0.05), 0 10px 24px -14px oklch(0.3 0 0 / 0.18)", "--sb-shadow-card-hover": "0 0 0 1px oklch(0.22 0 0 / 0.08), 0 2px 4px oklch(0.3 0 0 / 0.06), 0 18px 32px -14px oklch(0.3 0 0 / 0.26)", "--sb-shadow-button": "inset 0 0 0 1px oklch(0.22 0 0 / 0.09), 0 1px 2px oklch(0.3 0 0 / 0.06)", "--sb-shadow-button-hover": "inset 0 0 0 1px oklch(0.22 0 0 / 0.11), 0 3px 8px -2px oklch(0.3 0 0 / 0.14)", "--sb-shadow-button-pressed": "inset 0 0 0 1px oklch(0.22 0 0 / 0.12), inset 0 2px 3px oklch(0.3 0 0 / 0.08)", "--sb-shadow-primary": "inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0.3 0.08 152 / 0.3), 0 6px 14px -6px oklch(0.3 0.1 152 / 0.45)", "--sb-shadow-primary-hover": "inset 0 1px 0 oklch(1 0 0 / 0.26), 0 2px 4px oklch(0.3 0.08 152 / 0.3), 0 10px 20px -6px oklch(0.3 0.1 152 / 0.5)", "--sb-shadow-primary-pressed": "inset 0 2px 3px oklch(0.2 0.06 152 / 0.3)", "--sb-shadow-field": "inset 0 0 0 1px var(--sb-control-edge)", "--sb-shadow-field-hover": "inset 0 0 0 1px var(--sb-fg-muted)", "--sb-shadow-tray": "inset 0 1px 2px oklch(0.3 0 0 / 0.08), inset 0 0 0 1px oklch(0.22 0 0 / 0.04)", "--sb-shadow-pill": "0 0 0 1px oklch(0.22 0 0 / 0.07), 0 1px 2px oklch(0.3 0 0 / 0.1), 0 4px 8px -4px oklch(0.3 0 0 / 0.16)", "--sb-shadow-float": "0 0 0 1px oklch(0.22 0 0 / 0.08), 0 2px 4px -1px oklch(0.3 0 0 / 0.1), 0 12px 28px -8px oklch(0.3 0 0 / 0.22), 0 24px 48px -16px oklch(0.3 0 0 / 0.22)", "--sb-shadow-dialog": "0 0 0 1px oklch(0.22 0 0 / 0.08), 0 4px 8px -2px oklch(0.3 0 0 / 0.12), 0 24px 48px -12px oklch(0.3 0 0 / 0.28), 0 48px 96px -24px oklch(0.3 0 0 / 0.3)", "color-scheme": "light" }, ".dark": { "--sb-shadow-card": "0 0 0 1px oklch(1 0 0 / 0.06), inset 0 1px 0 oklch(1 0 0 / 0.04), 0 10px 24px -14px oklch(0 0 0 / 0.5)", "--sb-shadow-card-hover": "0 0 0 1px oklch(1 0 0 / 0.09), inset 0 1px 0 oklch(1 0 0 / 0.05), 0 18px 32px -14px oklch(0 0 0 / 0.6)", "--sb-shadow-button": "inset 0 0 0 1px oklch(1 0 0 / 0.09), inset 0 1px 0 oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.3)", "--sb-shadow-button-hover": "inset 0 0 0 1px oklch(1 0 0 / 0.12), inset 0 1px 0 oklch(1 0 0 / 0.05), 0 3px 8px -2px oklch(0 0 0 / 0.45)", "--sb-shadow-button-pressed": "inset 0 0 0 1px oklch(1 0 0 / 0.1), inset 0 2px 3px oklch(0 0 0 / 0.3)", "--sb-shadow-primary": "inset 0 1px 0 oklch(1 0 0 / 0.35), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 14px -6px oklch(0.6 0.12 152 / 0.4)", "--sb-shadow-primary-hover": "inset 0 1px 0 oklch(1 0 0 / 0.4), 0 2px 4px oklch(0 0 0 / 0.4), 0 10px 20px -6px oklch(0.6 0.12 152 / 0.5)", "--sb-shadow-primary-pressed": "inset 0 2px 3px oklch(0.2 0.06 152 / 0.45)", "--sb-shadow-field": "inset 0 0 0 1px var(--sb-control-edge)", "--sb-shadow-field-hover": "inset 0 0 0 1px var(--sb-fg-muted)", "--sb-shadow-tray": "inset 0 1px 2px oklch(0 0 0 / 0.35), inset 0 0 0 1px oklch(1 0 0 / 0.04)", "--sb-shadow-pill": "0 0 0 1px oklch(1 0 0 / 0.1), inset 0 1px 0 oklch(1 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.4)", "--sb-shadow-float": "0 0 0 1px oklch(1 0 0 / 0.11), inset 0 1px 0 oklch(1 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.35), 0 18px 44px -6px oklch(0 0 0 / 0.65)", "--sb-shadow-dialog": "0 0 0 1px oklch(1 0 0 / 0.11), inset 0 1px 0 oklch(1 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.35), 0 28px 72px -8px oklch(0 0 0 / 0.75)", "color-scheme": "dark" }, "[data-density=\"compact\"]": { "--sb-control-h": "32px", "--sb-control-h-sm": "24px", "--sb-row-h": "36px" }, "@media (prefers-reduced-motion: reduce)": { ":root": { "--sb-move": "0", "--sb-spring-smooth": "cubic-bezier(0.23, 1, 0.32, 1)", "--sb-duration-spring-smooth": "160ms", "--sb-spring-snappy": "cubic-bezier(0.23, 1, 0.32, 1)", "--sb-duration-spring-snappy": "160ms", "--sb-spring-bob": "cubic-bezier(0.23, 1, 0.32, 1)", "--sb-duration-spring-bob": "160ms" } }, ":root[data-motion=\"reduce\"]": { "--sb-move": "0", "--sb-spring-smooth": "cubic-bezier(0.23, 1, 0.32, 1)", "--sb-duration-spring-smooth": "160ms", "--sb-spring-snappy": "cubic-bezier(0.23, 1, 0.32, 1)", "--sb-duration-spring-snappy": "160ms", "--sb-spring-bob": "cubic-bezier(0.23, 1, 0.32, 1)", "--sb-duration-spring-bob": "160ms" }, ".sb-chart": { "--ts-chart-1": "var(--sb-chart-requests)", "--ts-chart-2": "var(--sb-chart-series)", "--ts-chart-3": "var(--sb-chart-4xx)", "--ts-chart-4": "var(--sb-chart-errors)", "--ts-chart-5": "var(--sb-chart-3xx)", "--ts-chart-6": "var(--sb-chart-other)", "--ts-chart-tooltip-background": "var(--sb-raised)", "--ts-chart-tooltip-color": "var(--sb-fg)", "--ts-chart-tooltip-border": "0", "--ts-chart-tooltip-border-radius": "10px", "--ts-chart-tooltip-shadow": "var(--sb-shadow-float)", "--ts-chart-tooltip-padding": "8px 10px", "--ts-chart-tooltip-font": "500 12px/1.4 var(--font-sans)", "font-variant-numeric": "tabular-nums" }, ".sb-chart .ts-chart-tooltip": { "z-index": "var(--sb-z-tooltip)" } } }, "categories": [ "theme" ], "docs": "Light is the default; add class=\"dark\" to for dark (next-themes: attribute=\"class\"). Load Figtree and JetBrains Mono if you want ikada's faces (otherwise the system faces are used). ikada never redefines Tailwind's text-* scale: its sizes are text-sb-*." }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A person's picture with their initial when there is none (or it fails to load).", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/avatar.tsx", "type": "registry:ui", "target": "@components/ikada/avatar.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "data-display" ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A short status or label in a soft tinted pill.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-glyph.json" ], "files": [ { "path": "registry/ikada/ui/badge.tsx", "type": "registry:ui", "target": "@components/ikada/badge.tsx" } ], "categories": [ "data-display" ] }, { "name": "banner", "type": "registry:ui", "title": "Banner", "description": "An inline notice about the page it sits on: a deploy is blocked, a quota is near.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-glyph.json" ], "files": [ { "path": "registry/ikada/ui/banner.tsx", "type": "registry:ui", "target": "@components/ikada/banner.tsx" } ], "categories": [ "feedback" ] }, { "name": "breadcrumbs", "type": "registry:ui", "title": "Breadcrumbs", "description": "A breadcrumb trail for the org, project and environment you are in, collapsing on narrow screens.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/dropdown-menu.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/breadcrumbs.tsx", "type": "registry:ui", "target": "@components/ikada/breadcrumbs.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "navigation" ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "The action control: primary (green, one per view), secondary, ghost and danger, in three sizes.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/button.tsx", "type": "registry:ui", "target": "@components/ikada/button.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "actions" ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "A yes/no choice for forms, with a checked, unchecked and indeterminate state and a springy tick.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/checkbox.tsx", "type": "registry:ui", "target": "@components/ikada/checkbox.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "A monospace block for commands and output, with a copy button.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icon-button.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/inline-confirm.json" ], "files": [ { "path": "registry/ikada/ui/code-block.tsx", "type": "registry:ui", "target": "@components/ikada/code-block.tsx" } ], "categories": [ "data-display" ] }, { "name": "command-palette", "type": "registry:ui", "title": "Command Palette", "description": "Global search and jump on Cmd or Ctrl K: grouped results, prefix filters and keyboard navigation.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/kbd.json", "https://sproutboat.com/ikada/r/portal.json", "https://sproutboat.com/ikada/r/spinner.json" ], "files": [ { "path": "registry/ikada/ui/command-palette.tsx", "type": "registry:ui", "target": "@components/ikada/command-palette.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "navigation", "overlays" ], "docs": "Mount it once in your layout and open it with useCommandPaletteShortcut()." }, { "name": "copy-id", "type": "registry:ui", "title": "Copy Id", "description": "An ID or token in a mono well with a copy button; \"Copied\" confirms in place, never as a toast.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icon-button.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/inline-confirm.json" ], "files": [ { "path": "registry/ikada/ui/copy-id.tsx", "type": "registry:ui", "target": "@components/ikada/copy-id.tsx" } ], "categories": [ "data-display" ] }, { "name": "description-list", "type": "registry:ui", "title": "Description List", "description": "Term and details pairs: an account, a deployment.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/description-list.tsx", "type": "registry:ui", "target": "@components/ikada/description-list.tsx" } ], "categories": [ "data-display" ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A modal dialog with title, description and actions; a click opens it with a spring, a key press opens it instantly.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/instant.json", "https://sproutboat.com/ikada/r/portal.json" ], "files": [ { "path": "registry/ikada/ui/dialog.tsx", "type": "registry:ui", "target": "@components/ikada/dialog.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "overlays" ] }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "A menu of actions that opens from a trigger.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/instant.json", "https://sproutboat.com/ikada/r/portal.json" ], "files": [ { "path": "registry/ikada/ui/dropdown-menu.tsx", "type": "registry:ui", "target": "@components/ikada/dropdown-menu.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "overlays" ] }, { "name": "empty-state", "type": "registry:ui", "title": "Empty State", "description": "What an empty list or page says: a title, one line on what goes here, and one action.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/empty-state.tsx", "type": "registry:ui", "target": "@components/ikada/empty-state.tsx" } ], "categories": [ "feedback", "data-display" ] }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "A form control with its label, hint and error, wired together for screen readers.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/label.json" ], "files": [ { "path": "registry/ikada/ui/field.tsx", "type": "registry:ui", "target": "@components/ikada/field.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "icon-button", "type": "registry:ui", "title": "Icon Button", "description": "A Button that shows only an icon, with a required accessible label and a tooltip-ready target.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/tooltip.json" ], "files": [ { "path": "registry/ikada/ui/icon-button.tsx", "type": "registry:ui", "target": "@components/ikada/icon-button.tsx" } ], "categories": [ "actions" ] }, { "name": "inline-confirm", "type": "registry:ui", "title": "Inline Confirm", "description": "Feedback next to the control that was used, not in the corner: Copied, Saved.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/inline-confirm.tsx", "type": "registry:ui", "target": "@components/ikada/inline-confirm.tsx" } ], "categories": [ "feedback" ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "A single-line text field: a well with the control edge as an inset ring, and the focus wake.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/input.tsx", "type": "registry:ui", "target": "@components/ikada/input.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "A keycap for shortcut hints, such as the K in Cmd K.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/kbd.tsx", "type": "registry:ui", "target": "@components/ikada/kbd.tsx" } ], "categories": [ "data-display" ] }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "A form label that pairs with Input, Select and the other controls, with a required marker.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/label.tsx", "type": "registry:ui", "target": "@components/ikada/label.tsx" } ], "categories": [ "forms" ] }, { "name": "link", "type": "registry:ui", "title": "Link", "description": "An inline link with an underline that follows the text colour; renders any element through the render prop.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/link.tsx", "type": "registry:ui", "target": "@components/ikada/link.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "actions", "navigation" ] }, { "name": "meter", "type": "registry:ui", "title": "Meter", "description": "A labelled bar for a bounded measurement, with normal, warning and danger tones and a usage variant.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/locale.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-glyph.json" ], "files": [ { "path": "registry/ikada/ui/meter.tsx", "type": "registry:ui", "target": "@components/ikada/meter.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "feedback", "data-display" ] }, { "name": "metric-tile", "type": "registry:ui", "title": "Metric Tile", "description": "One headline number with its unit, change and trend.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/locale.json", "https://sproutboat.com/ikada/r/skeleton.json" ], "files": [ { "path": "registry/ikada/ui/metric-tile.tsx", "type": "registry:ui", "target": "@components/ikada/metric-tile.tsx" } ], "categories": [ "data-display" ] }, { "name": "page-header", "type": "registry:ui", "title": "Page Header", "description": "The title row of a page: breadcrumbs, title, status, actions and optional page tabs.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/page-header.tsx", "type": "registry:ui", "target": "@components/ikada/page-header.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "navigation", "layout" ] }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Previous, next and numbered pages for a long list, with gaps past the neighbours of the current page.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/pagination.tsx", "type": "registry:ui", "target": "@components/ikada/pagination.tsx" } ], "categories": [ "navigation" ] }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Interactive content anchored to a trigger, such as a small form.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/instant.json", "https://sproutboat.com/ikada/r/portal.json" ], "files": [ { "path": "registry/ikada/ui/popover.tsx", "type": "registry:ui", "target": "@components/ikada/popover.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "overlays" ] }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "One choice out of a few, all visible at once, with keyboard arrows and a springy dot.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/radio-group.tsx", "type": "registry:ui", "target": "@components/ikada/radio-group.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "segmented-control", "type": "registry:ui", "title": "Segmented Control", "description": "One choice out of a few, always one selected (a click on the selected segment does nothing).", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/segmented-control.tsx", "type": "registry:ui", "target": "@components/ikada/segmented-control.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Pick one value from a list that opens like a menu.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/instant.json", "https://sproutboat.com/ikada/r/portal.json" ], "files": [ { "path": "registry/ikada/ui/select.tsx", "type": "registry:ui", "target": "@components/ikada/select.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "sensitive-input", "type": "registry:ui", "title": "Sensitive Input", "description": "A password or token field: masked by default, with a button that reveals it and an optional one that copies it.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icon-button.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/inline-confirm.json", "https://sproutboat.com/ikada/r/input.json" ], "files": [ { "path": "registry/ikada/ui/sensitive-input.tsx", "type": "registry:ui", "target": "@components/ikada/sensitive-input.tsx" } ], "categories": [ "forms" ] }, { "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "The account navigation: a collapsible rail on desktop and a drawer on mobile, with grouped items and a footer.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/portal.json", "https://sproutboat.com/ikada/r/tooltip.json" ], "files": [ { "path": "registry/ikada/ui/sidebar.tsx", "type": "registry:ui", "target": "@components/ikada/sidebar.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "navigation", "layout" ], "docs": "Wrap the app shell in the sidebar's state hook as shown in the docs; on mobile it becomes a drawer." }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Decorative placeholder (a fade, so it stays under reduced motion).", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/skeleton.tsx", "type": "registry:ui", "target": "@components/ikada/skeleton.tsx" } ], "categories": [ "feedback" ] }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "A turning ring for pending work, in three sizes; it stays still under reduced motion.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json" ], "files": [ { "path": "registry/ikada/ui/spinner.tsx", "type": "registry:ui", "target": "@components/ikada/spinner.tsx" } ], "categories": [ "feedback" ] }, { "name": "status-dot", "type": "registry:ui", "title": "Status Dot", "description": "A status shape with its label, for lists and headers.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-glyph.json" ], "files": [ { "path": "registry/ikada/ui/status-dot.tsx", "type": "registry:ui", "target": "@components/ikada/status-dot.tsx" } ], "categories": [ "data-display" ] }, { "name": "status-glyph", "type": "registry:ui", "title": "Status Glyph", "description": "A 10px shape per status (circle, bullseye for live, triangle, cross, half ring, square).", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/status.json" ], "files": [ { "path": "registry/ikada/ui/status-glyph.tsx", "type": "registry:ui", "target": "@components/ikada/status-glyph.tsx" } ], "categories": [ "data-display" ] }, { "name": "status", "type": "registry:ui", "title": "Status", "description": "The status vocabulary (live, building, failed, paused and others) shared by Badge, StatusDot and Toast.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json" ], "files": [ { "path": "registry/ikada/ui/status.ts", "type": "registry:ui", "target": "@components/ikada/status.ts" } ], "categories": [ "data-display", "utilities" ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "An on/off setting that applies at once, with a label slot and a thumb that settles on a spring.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/switch.tsx", "type": "registry:ui", "target": "@components/ikada/switch.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "A semantic table in a scroll container, with sortable headers, loading, empty and error rows.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/skeleton.json" ], "files": [ { "path": "registry/ikada/ui/table.tsx", "type": "registry:ui", "target": "@components/ikada/table.tsx" } ], "categories": [ "data-display" ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Switches between views of one subject in place.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/tabs.tsx", "type": "registry:ui", "target": "@components/ikada/tabs.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "navigation" ] }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "A multi-line text field in the Input's surface, wired into Field like Input is.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/ui/textarea.tsx", "type": "registry:ui", "target": "@components/ikada/textarea.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "forms" ] }, { "name": "toast-api", "type": "registry:ui", "title": "Toast API", "description": "The toast store behind the toast component: toast(), success and error helpers, undo, merging repeats and mutable deploy toasts.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/status.json" ], "files": [ { "path": "registry/ikada/ui/toast-api.ts", "type": "registry:ui", "target": "@components/ikada/toast-api.ts" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "feedback", "utilities" ], "docs": "Mount from the toast item once near the root; toast() works from anywhere after that." }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Toasts as a deck at the bottom end: hover or focus fans out the history, ↩ undoes (⌘Z), a flick dismisses.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/crossfade.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-glyph.json", "https://sproutboat.com/ikada/r/toast-api.json", "https://sproutboat.com/ikada/r/tooltip.json" ], "files": [ { "path": "registry/ikada/ui/toast.tsx", "type": "registry:ui", "target": "@components/ikada/toast.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "feedback" ], "docs": "Mount once near the root of your app (and for tooltips), then call toast() from anywhere." }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A short plain-text label on hover or focus, after a delay.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/portal.json" ], "files": [ { "path": "registry/ikada/ui/tooltip.tsx", "type": "registry:ui", "target": "@components/ikada/tooltip.tsx" } ], "dependencies": [ "@base-ui/react@^1.9.0" ], "categories": [ "overlays" ], "docs": "Wrap your app (or the part that uses tooltips) in once." }, { "name": "sparkline", "type": "registry:ui", "title": "Sparkline", "description": "A 44px trend line with no axes, a dot on the current point, a hover value and the same tokens as TimeseriesChart.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/accessible-name.json", "https://sproutboat.com/ikada/r/chart-theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/tooltip-card.json" ], "files": [ { "path": "registry/ikada/ui/sparkline.tsx", "type": "registry:ui", "target": "@components/ikada/sparkline.tsx" } ], "dependencies": [ "@tanstack/charts@^1.2.1" ], "categories": [ "charts" ], "docs": "Uses @tanstack/charts (installed with this item). Load it lazily where the chart is below the fold." }, { "name": "chart-theme", "type": "registry:ui", "title": "Chart theme", "description": "Chart colour tokens as CSS variable references, so TanStack Charts follow light and dark.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/tokens.json" ], "files": [ { "path": "registry/ikada/ui/chart-theme.ts", "type": "registry:ui", "target": "@components/ikada/chart-theme.ts" } ], "categories": [ "charts", "utilities" ] }, { "name": "timeseries-chart", "type": "registry:ui", "title": "Timeseries Chart", "description": "A line (and optional area) chart on TanStack Charts, themed by the chart tokens: grid and tooltip follow light and dark, and the deploy marker is a dashed rule so a before and after read at a glance.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/accessible-name.json", "https://sproutboat.com/ikada/r/chart-theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/locale.json", "https://sproutboat.com/ikada/r/tooltip-card.json" ], "files": [ { "path": "registry/ikada/ui/timeseries-chart.tsx", "type": "registry:ui", "target": "@components/ikada/timeseries-chart.tsx" } ], "dependencies": [ "@tanstack/charts@^1.2.1" ], "categories": [ "charts" ], "docs": "Uses @tanstack/charts (installed with this item). Load it lazily in routes that show charts, for example with React.lazy or next/dynamic." }, { "name": "tooltip-card", "type": "registry:ui", "title": "Chart tooltip card", "description": "Builds the hover card (a title over swatch rows) that Sparkline and TimeseriesChart share.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json" ], "files": [ { "path": "registry/ikada/ui/tooltip-card.ts", "type": "registry:ui", "target": "@components/ikada/tooltip-card.ts" } ], "dependencies": [ "@tanstack/charts@^1.2.1" ], "categories": [ "charts", "utilities" ] }, { "name": "accessible-name", "type": "registry:lib", "title": "Accessible name", "description": "The aria-label or deprecated ariaLabel prop type that the chart components share.", "registryDependencies": [], "files": [ { "path": "registry/ikada/lib/ikada/accessible-name.ts", "type": "registry:lib", "target": "@components/ikada/lib/accessible-name.ts" } ], "categories": [ "utilities" ] }, { "name": "cn", "type": "registry:lib", "title": "cn and style primitives", "description": "ikada's class helper (clsx plus tailwind-merge that understands the text-sb-* sizes) and the shared style primitives: focus ring, press motion, popup motion and field surfaces. Installs to components/ikada/lib, never to lib/utils.", "registryDependencies": [ "https://sproutboat.com/ikada/r/tokens.json" ], "files": [ { "path": "registry/ikada/lib/ikada/cn.ts", "type": "registry:lib", "target": "@components/ikada/lib/cn.ts" } ], "dependencies": [ "clsx@^2.1.1", "tailwind-merge@^3.6.0" ], "categories": [ "utilities" ] }, { "name": "crossfade", "type": "registry:lib", "title": "Crossfade", "description": "Crossfades between versions of its content: the old layer blurs out while the new one blurs in (the blur hides that two different things overlap), and for text the box animates to the new height.", "registryDependencies": [ "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/lib/ikada/crossfade.tsx", "type": "registry:lib", "target": "@components/ikada/lib/crossfade.tsx" } ], "categories": [ "utilities" ] }, { "name": "format", "type": "registry:lib", "title": "Format", "description": "Number and byte formatting shared by every ikada component: compact, grouped and locale-aware.", "registryDependencies": [], "files": [ { "path": "registry/ikada/lib/ikada/format.ts", "type": "registry:lib", "target": "@components/ikada/lib/format.ts" } ], "categories": [ "utilities" ] }, { "name": "icons", "type": "registry:lib", "title": "Icons", "description": "The ikada icon set: 16px line icons on a 1.6px stroke that inherit the text colour.", "registryDependencies": [ "https://sproutboat.com/ikada/r/cn.json" ], "files": [ { "path": "registry/ikada/lib/ikada/icons.tsx", "type": "registry:lib", "target": "@components/ikada/lib/icons.tsx" } ], "categories": [ "utilities" ] }, { "name": "instant", "type": "registry:lib", "title": "Instant", "description": "Keyboard-opened overlays do not animate: they answer a deliberate key press and are opened constantly.", "registryDependencies": [], "files": [ { "path": "registry/ikada/lib/ikada/instant.tsx", "type": "registry:lib", "target": "@components/ikada/lib/instant.tsx" } ], "categories": [ "utilities" ] }, { "name": "locale", "type": "registry:lib", "title": "Locale", "description": "The number and date locale for a subtree, with `en` as the default.", "registryDependencies": [ "https://sproutboat.com/ikada/r/format.json" ], "files": [ { "path": "registry/ikada/lib/ikada/locale.tsx", "type": "registry:lib", "target": "@components/ikada/lib/locale.tsx" } ], "categories": [ "utilities" ] }, { "name": "portal", "type": "registry:lib", "title": "Portal", "description": "Where floating layers mount, so menus and dialogs can sit inside a themed container.", "registryDependencies": [], "files": [ { "path": "registry/ikada/lib/ikada/portal.tsx", "type": "registry:lib", "target": "@components/ikada/lib/portal.tsx" } ], "categories": [ "utilities" ] }, { "name": "spring", "type": "registry:lib", "title": "Spring", "description": "A damped spring as a CSS `linear()` easing, described the way Apple's HIG does: a perceived `seconds` and a `bounce` (0 is critically damped, 0.25 overshoots once).", "registryDependencies": [], "files": [ { "path": "registry/ikada/lib/ikada/spring.ts", "type": "registry:lib", "target": "@components/ikada/lib/spring.ts" } ], "categories": [ "utilities" ] }, { "name": "tokens", "type": "registry:lib", "title": "Design tokens", "description": "ikada's design tokens as typed data: colours, type, spacing, radii, shadows, motion, springs and layers.", "registryDependencies": [], "files": [ { "path": "registry/ikada/lib/ikada/tokens.ts", "type": "registry:lib", "target": "@components/ikada/lib/tokens.ts" } ], "categories": [ "utilities", "theme" ] }, { "name": "d1-console", "type": "registry:block", "title": "D1 console", "description": "A SQL console for a D1 database: the tables and their columns, an editor that runs with ⌘↵, and the result grid with its row count and timing.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/badge.json", "https://sproutboat.com/ikada/r/banner.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/kbd.json", "https://sproutboat.com/ikada/r/table.json", "https://sproutboat.com/ikada/r/textarea.json" ], "files": [ { "path": "registry/ikada/blocks/d1-console/d1-console.tsx", "type": "registry:component", "target": "@components/ikada/blocks/d1-console/d1-console.tsx" } ] }, { "name": "empty-states", "type": "registry:block", "title": "Empty states", "description": "The four things an empty view can mean, each with one way forward: nothing created yet, nothing matching a filter, nothing deployed, and a load that failed with a retry.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/code-block.json", "https://sproutboat.com/ikada/r/empty-state.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/input.json" ], "files": [ { "path": "registry/ikada/blocks/empty-states/empty-states.tsx", "type": "registry:component", "target": "@components/ikada/blocks/empty-states/empty-states.tsx" } ] }, { "name": "kv-browser", "type": "registry:block", "title": "KV browser", "description": "A KV namespace's keys, filtered by prefix or search, beside the selected key's value, metadata and expiry, with copy and a two-step delete that can be undone.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/code-block.json", "https://sproutboat.com/ikada/r/copy-id.json", "https://sproutboat.com/ikada/r/description-list.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/inline-confirm.json", "https://sproutboat.com/ikada/r/input.json", "https://sproutboat.com/ikada/r/segmented-control.json", "https://sproutboat.com/ikada/r/table.json" ], "files": [ { "path": "registry/ikada/blocks/kv-browser/kv-browser.tsx", "type": "registry:component", "target": "@components/ikada/blocks/kv-browser/kv-browser.tsx" } ] }, { "name": "logs-panel", "type": "registry:block", "title": "Logs panel", "description": "A live log tail with level and source filter chips, search, and a Live or Paused stream that holds still while the pointer rests on it.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/input.json", "https://sproutboat.com/ikada/r/segmented-control.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-dot.json", "https://sproutboat.com/ikada/r/status-glyph.json" ], "files": [ { "path": "registry/ikada/blocks/logs-panel/logs-panel.tsx", "type": "registry:component", "target": "@components/ikada/blocks/logs-panel/logs-panel.tsx" } ] }, { "name": "metric-row", "type": "registry:block", "title": "Metric row", "description": "A row of headline numbers for the last 24 hours: requests, error rate, response time and sprouts serving, each with its change and an hourly sparkline.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/chart-theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/metric-tile.json", "https://sproutboat.com/ikada/r/sparkline.json" ], "files": [ { "path": "registry/ikada/blocks/metric-row/metric-row.tsx", "type": "registry:component", "target": "@components/ikada/blocks/metric-row/metric-row.tsx" } ] }, { "name": "project-tray", "type": "registry:block", "title": "Project tray", "description": "A recessed tray per project holding its sprouts as floating cards: each card has a status tile, the hostname and one state line, and an empty project offers to plant its first sprout.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-dot.json" ], "files": [ { "path": "registry/ikada/blocks/project-tray/project-tray.tsx", "type": "registry:component", "target": "@components/ikada/blocks/project-tray/project-tray.tsx" } ] }, { "name": "settings-section", "type": "registry:block", "title": "Settings section", "description": "Settings as titled cards: fields, switches that read as sentences, a choice of retention, a save bar that floats up once something changed, and a danger zone that confirms a delete in place.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/field.json", "https://sproutboat.com/ikada/r/inline-confirm.json", "https://sproutboat.com/ikada/r/input.json", "https://sproutboat.com/ikada/r/radio-group.json", "https://sproutboat.com/ikada/r/select.json", "https://sproutboat.com/ikada/r/switch.json" ], "files": [ { "path": "registry/ikada/blocks/settings-section/settings-section.tsx", "type": "registry:component", "target": "@components/ikada/blocks/settings-section/settings-section.tsx" } ] }, { "name": "sign-in-card", "type": "registry:block", "title": "Sign-in card", "description": "One card for getting in: email a sign-in link or continue with GitHub, then a check-your-inbox state; in waitlist mode, a short join form whose confirmation sprouts.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/field.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/input.json", "https://sproutboat.com/ikada/r/select.json", "https://sproutboat.com/ikada/r/status-glyph.json", "https://sproutboat.com/ikada/r/textarea.json" ], "files": [ { "path": "registry/ikada/blocks/sign-in-card/sign-in-card.tsx", "type": "registry:component", "target": "@components/ikada/blocks/sign-in-card/sign-in-card.tsx" } ] }, { "name": "toast-deck", "type": "registry:block", "title": "Toast deck", "description": "Toasts in practice: a revoke that removes the row at once and offers Undo (also ⌘Z), a deploy that morphs one toast from Uploaded to Live or to a failure with Retry, and the history feed.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/icon-button.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/status-glyph.json", "https://sproutboat.com/ikada/r/toast.json" ], "files": [ { "path": "registry/ikada/blocks/toast-deck/toast-deck.tsx", "type": "registry:component", "target": "@components/ikada/blocks/toast-deck/toast-deck.tsx" } ] }, { "name": "traffic-chart", "type": "registry:block", "title": "Traffic chart", "description": "Requests and 5xx errors over time with deploys marked as dashed rules, a range switch (hour, day, week), the range's totals and a legend that names every line, so colour is never the only key.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/chart-theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/segmented-control.json", "https://sproutboat.com/ikada/r/timeseries-chart.json" ], "files": [ { "path": "registry/ikada/blocks/traffic-chart/traffic-chart.tsx", "type": "registry:component", "target": "@components/ikada/blocks/traffic-chart/traffic-chart.tsx" } ] }, { "name": "usage-line", "type": "registry:block", "title": "Usage line", "description": "Today's quotas in one quiet row, each a figure and a small meter that turns amber near its limit, with the plan and reset time at the end.", "categories": [ "dashboard" ], "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/meter.json", "https://sproutboat.com/ikada/r/skeleton.json" ], "files": [ { "path": "registry/ikada/blocks/usage-line/usage-line.tsx", "type": "registry:component", "target": "@components/ikada/blocks/usage-line/usage-line.tsx" } ] }, { "name": "all", "type": "registry:item", "title": "All ikada components", "description": "Every ikada component, its helpers and the theme, installed under components/ikada.", "registryDependencies": [ "https://sproutboat.com/ikada/r/avatar.json", "https://sproutboat.com/ikada/r/badge.json", "https://sproutboat.com/ikada/r/banner.json", "https://sproutboat.com/ikada/r/breadcrumbs.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/checkbox.json", "https://sproutboat.com/ikada/r/code-block.json", "https://sproutboat.com/ikada/r/command-palette.json", "https://sproutboat.com/ikada/r/copy-id.json", "https://sproutboat.com/ikada/r/description-list.json", "https://sproutboat.com/ikada/r/dialog.json", "https://sproutboat.com/ikada/r/dropdown-menu.json", "https://sproutboat.com/ikada/r/empty-state.json", "https://sproutboat.com/ikada/r/field.json", "https://sproutboat.com/ikada/r/icon-button.json", "https://sproutboat.com/ikada/r/inline-confirm.json", "https://sproutboat.com/ikada/r/input.json", "https://sproutboat.com/ikada/r/kbd.json", "https://sproutboat.com/ikada/r/label.json", "https://sproutboat.com/ikada/r/link.json", "https://sproutboat.com/ikada/r/meter.json", "https://sproutboat.com/ikada/r/metric-tile.json", "https://sproutboat.com/ikada/r/page-header.json", "https://sproutboat.com/ikada/r/pagination.json", "https://sproutboat.com/ikada/r/popover.json", "https://sproutboat.com/ikada/r/radio-group.json", "https://sproutboat.com/ikada/r/segmented-control.json", "https://sproutboat.com/ikada/r/select.json", "https://sproutboat.com/ikada/r/sensitive-input.json", "https://sproutboat.com/ikada/r/sidebar.json", "https://sproutboat.com/ikada/r/skeleton.json", "https://sproutboat.com/ikada/r/spinner.json", "https://sproutboat.com/ikada/r/status-dot.json", "https://sproutboat.com/ikada/r/status-glyph.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/switch.json", "https://sproutboat.com/ikada/r/table.json", "https://sproutboat.com/ikada/r/tabs.json", "https://sproutboat.com/ikada/r/textarea.json", "https://sproutboat.com/ikada/r/toast-api.json", "https://sproutboat.com/ikada/r/toast.json", "https://sproutboat.com/ikada/r/tooltip.json", "https://sproutboat.com/ikada/r/sparkline.json", "https://sproutboat.com/ikada/r/chart-theme.json", "https://sproutboat.com/ikada/r/timeseries-chart.json", "https://sproutboat.com/ikada/r/tooltip-card.json" ], "categories": [ "bundle" ], "docs": "Components install to components/ikada/ and never overwrite your own button.tsx, input.tsx and the rest. Import them from \"@/components/ikada/\". Add class=\"dark\" to for dark mode." } ] }