{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "vessel", "homepage": "https://github.com/block/ghost", "items": [ { "name": "vessel-base", "type": "registry:base", "title": "ghost UI", "description": "ghost design language", "author": "block", "style": "ghost", "iconLibrary": "lucide", "baseColor": "neutral", "registryDependencies": ["styles-main", "font-faces", "utils"], "dependencies": ["tw-animate-css", "clsx", "tailwind-merge"], "devDependencies": ["tailwindcss"], "files": [], "cssVars": { "theme": { "--color-white": "#ffffff", "--color-black": "#000000", "--color-gray-50": "#f5f5f5", "--color-gray-100": "#f0f0f0", "--color-gray-200": "#e8e8e8", "--color-gray-300": "#e5e5e5", "--color-gray-400": "#cccccc", "--color-gray-500": "#999999", "--color-gray-600": "#666666", "--color-gray-700": "#333333", "--color-gray-800": "#232323", "--color-gray-900": "#1a1a1a", "--color-red-100": "#ff6b6b", "--color-red-200": "#f94b4b", "--color-blue-100": "#7cacff", "--color-blue-200": "#5c98f9", "--color-green-100": "#a3d795", "--color-green-200": "#91cb80", "--color-yellow-100": "#ffd966", "--color-yellow-200": "#fbcd44", "--color-background": "var(--background)", "--color-foreground": "var(--foreground)", "--color-card": "var(--card)", "--color-card-foreground": "var(--card-foreground)", "--color-popover": "var(--popover)", "--color-popover-foreground": "var(--popover-foreground)", "--color-primary": "var(--primary)", "--color-primary-foreground": "var(--primary-foreground)", "--color-secondary": "var(--secondary)", "--color-secondary-foreground": "var(--secondary-foreground)", "--color-muted": "var(--muted)", "--color-muted-foreground": "var(--muted-foreground)", "--color-accent": "var(--accent)", "--color-accent-foreground": "var(--accent-foreground)", "--color-destructive": "var(--destructive)", "--color-destructive-foreground": "var(--destructive-foreground)", "--color-success": "var(--success)", "--color-success-foreground": "var(--success-foreground)", "--color-warning": "var(--warning)", "--color-warning-foreground": "var(--warning-foreground)", "--color-info": "var(--info)", "--color-info-foreground": "var(--info-foreground)", "--color-border": "var(--border)", "--color-input": "var(--input)", "--color-background-default": "var(--background-default)", "--color-background-alt": "var(--background-alt)", "--color-background-medium": "var(--background-medium)", "--color-background-inverse": "var(--background-inverse)", "--color-background-muted": "var(--background-muted)", "--color-background-danger": "var(--background-danger)", "--color-background-success": "var(--background-success)", "--color-background-info": "var(--background-info)", "--color-background-warning": "var(--background-warning)", "--color-background-accent": "var(--background-accent)", "--color-border-accent": "var(--border-accent)", "--color-text-accent": "var(--text-accent)", "--color-border-default": "var(--border-default)", "--color-border-input": "var(--border-input)", "--color-border-input-hover": "var(--border-input-hover)", "--color-border-strong": "var(--border-strong)", "--color-border-card": "var(--border-card)", "--color-border-inverse": "var(--border-inverse)", "--color-border-danger": "var(--border-danger)", "--color-border-success": "var(--border-success)", "--color-border-warning": "var(--border-warning)", "--color-border-info": "var(--border-info)", "--color-text-default": "var(--text-default)", "--color-text-muted": "var(--text-muted)", "--color-text-alt": "var(--text-alt)", "--color-text-inverse": "var(--text-inverse)", "--color-text-danger": "var(--text-danger)", "--color-text-success": "var(--text-success)", "--color-text-warning": "var(--text-warning)", "--color-text-info": "var(--text-info)", "--color-dark-10": "var(--dark-10)", "--color-dark-40": "var(--dark-40)", "--color-dark-04": "var(--dark-04)", "--color-surface-dark": "var(--surface-dark)", "--color-surface-dark-text": "var(--surface-dark-text)", "--color-surface-dark-muted": "var(--surface-dark-muted)", "--color-surface-dark-border": "var(--surface-dark-border)", "--font-sans": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif", "--font-mono": "\"Geist Mono\", monospace", "--font-serif": "serif", "--font-display": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif", "--radius-pill": "999px", "--radius-button": "999px", "--radius-input": "999px", "--radius-card": "20px", "--radius-card-lg": "24px", "--radius-card-sm": "14px", "--radius-dropdown": "10px", "--radius-modal": "16px", "--radius-sm": "calc(var(--radius) - 4px)", "--radius-md": "calc(var(--radius) - 2px)", "--radius-lg": "var(--radius)", "--radius-xl": "calc(var(--radius) + 4px)", "--color-ring": "var(--ring)", "--shadow-mini": "var(--shadow-mini)", "--shadow-mini-inset": "var(--shadow-mini-inset)", "--shadow-btn": "var(--shadow-btn)", "--shadow-card": "var(--shadow-card)", "--shadow-elevated": "var(--shadow-elevated)", "--shadow-popover": "var(--shadow-popover)", "--shadow-modal": "var(--shadow-modal)", "--shadow-kbd": "var(--shadow-kbd)", "--shadow-date-field-focus": "var(--shadow-date-field-focus)", "--spacing-input": "3.25rem", "--spacing-input-sm": "2.75rem", "--spacing-button": "2.75rem", "--spacing-button-sm": "2rem", "--text-xxs": "10px", "--color-chart-1": "var(--chart-1)", "--color-chart-2": "var(--chart-2)", "--color-chart-3": "var(--chart-3)", "--color-chart-4": "var(--chart-4)", "--color-chart-5": "var(--chart-5)", "--color-sidebar": "var(--sidebar)", "--color-sidebar-foreground": "var(--sidebar-foreground)", "--color-sidebar-primary": "var(--sidebar-primary)", "--color-sidebar-primary-foreground": "var(--sidebar-primary-foreground)", "--color-sidebar-accent": "var(--sidebar-accent)", "--color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)", "--color-sidebar-border": "var(--sidebar-border)", "--color-sidebar-ring": "var(--sidebar-ring)", "--breakpoint-desktop": "1440px", "--animate-accordion-down": "accordion-down 0.2s ease-out", "--animate-accordion-up": "accordion-up 0.2s ease-out", "--animate-caret-blink": "caret-blink 1s ease-out infinite", "--animate-scale-in": "scale-in 0.2s ease", "--animate-scale-out": "scale-out 0.15s ease", "--animate-fade-in": "fade-in 0.2s ease", "--animate-fade-out": "fade-out 0.15s ease", "--animate-enter-from-left": "enter-from-left 0.2s ease", "--animate-enter-from-right": "enter-from-right 0.2s ease", "--animate-exit-to-left": "exit-to-left 0.2s ease", "--animate-exit-to-right": "exit-to-right 0.2s ease", "--animate-word-reveal": "word-reveal 0.4s ease-out" }, "light": { "--radius": "20px", "--background": "var(--color-white)", "--foreground": "var(--color-gray-900)", "--card": "var(--background)", "--card-foreground": "var(--foreground)", "--popover": "var(--background)", "--popover-foreground": "var(--foreground)", "--primary": "var(--color-gray-900)", "--primary-foreground": "var(--color-white)", "--secondary": "var(--color-gray-100)", "--secondary-foreground": "var(--foreground)", "--muted": "var(--color-gray-100)", "--muted-foreground": "var(--color-gray-500)", "--accent": "var(--color-gray-100)", "--accent-foreground": "var(--foreground)", "--destructive": "var(--color-red-200)", "--destructive-foreground": "var(--color-white)", "--success": "var(--color-green-200)", "--success-foreground": "var(--color-gray-900)", "--warning": "var(--color-yellow-200)", "--warning-foreground": "var(--color-gray-900)", "--info": "var(--color-blue-200)", "--info-foreground": "var(--color-gray-900)", "--border": "var(--color-gray-200)", "--input": "var(--color-gray-300)", "--ring": "var(--color-gray-400)", "--background-accent": "var(--primary)", "--border-accent": "var(--primary)", "--text-accent": "var(--primary)", "--background-default": "var(--background)", "--background-alt": "var(--color-gray-50)", "--background-medium": "var(--color-gray-400)", "--background-muted": "var(--muted)", "--background-inverse": "var(--color-black)", "--background-danger": "var(--destructive)", "--background-success": "var(--success)", "--background-info": "var(--info)", "--background-warning": "var(--warning)", "--border-default": "var(--border)", "--border-input": "var(--input)", "--border-input-hover": "var(--color-gray-400)", "--border-strong": "var(--primary)", "--border-card": "var(--border)", "--border-inverse": "var(--color-black)", "--border-danger": "var(--destructive)", "--border-success": "var(--color-green-200)", "--border-warning": "var(--color-yellow-200)", "--border-info": "var(--color-blue-200)", "--text-default": "var(--foreground)", "--text-muted": "var(--muted-foreground)", "--text-alt": "var(--color-gray-600)", "--text-inverse": "var(--primary-foreground)", "--text-danger": "var(--destructive)", "--text-success": "var(--success)", "--text-warning": "var(--warning)", "--text-info": "var(--info)", "--dark-10": "rgba(26, 26, 26, 0.1)", "--dark-40": "rgba(26, 26, 26, 0.4)", "--dark-04": "rgba(26, 26, 26, 0.04)", "--shadow-mini": "0 2px 8px rgba(76, 76, 76, 0.15)", "--shadow-mini-inset": "0 1px 4px rgba(76, 76, 76, 0.1) inset", "--shadow-btn": "0 2px 8px rgba(76, 76, 76, 0.15)", "--shadow-card": "0 2px 8px rgba(76, 76, 76, 0.15)", "--shadow-elevated": "0 3px 12px rgba(76, 76, 76, 0.22)", "--shadow-popover": "0 8px 30px rgba(0, 0, 0, 0.12)", "--shadow-modal": "0 20px 60px rgba(0, 0, 0, 0.2)", "--shadow-kbd": "0 2px 8px rgba(76, 76, 76, 0.15)", "--shadow-date-field-focus": "0 0 0 3px rgba(26, 26, 26, 0.15)", "--surface-dark": "#0a0a0a", "--surface-dark-text": "#f5f5f5", "--surface-dark-muted": "rgba(255, 255, 255, 0.5)", "--surface-dark-border": "rgba(255, 255, 255, 0.08)", "--chart-1": "#f6b44a", "--chart-2": "#7585ff", "--chart-3": "#d76a6a", "--chart-4": "#d185e0", "--chart-5": "#91cb80", "--sidebar": "var(--background-default)", "--sidebar-foreground": "var(--text-default)", "--sidebar-primary": "var(--background-accent)", "--sidebar-primary-foreground": "var(--text-inverse)", "--sidebar-accent": "var(--background-muted)", "--sidebar-accent-foreground": "var(--text-default)", "--sidebar-border": "var(--border-default)", "--sidebar-ring": "var(--border-default)", "--heading-display-font-size": "clamp(64px, 8vw, 96px)", "--heading-display-line-height": "0.88", "--heading-display-letter-spacing": "-0.05em", "--heading-display-font-weight": "900", "--heading-section-font-size": "clamp(44px, 5vw, 64px)", "--heading-section-line-height": "0.95", "--heading-section-letter-spacing": "-0.035em", "--heading-section-font-weight": "700", "--heading-sub-font-size": "clamp(28px, 3vw, 40px)", "--heading-sub-line-height": "1", "--heading-sub-letter-spacing": "-0.02em", "--heading-sub-font-weight": "700", "--heading-card-font-size": "clamp(20px, 2vw, 28px)", "--heading-card-line-height": "1.1", "--heading-card-letter-spacing": "-0.01em", "--heading-card-font-weight": "600", "--display-size": "clamp(3rem, 12vw, 12rem)", "--display-line-height": "0.85", "--display-letter-spacing": "-0.05em", "--body-reading-size": "clamp(1rem, 1.3vw, 1.25rem)", "--body-reading-line-height": "1.65", "--body-reading-letter-spacing": "-0.01em", "--label-font-size": "11px", "--label-letter-spacing": "0.12em", "--label-font-weight": "600", "--label-line-height": "1.2", "--pullquote-size": "clamp(1.5rem, 3vw, 2.5rem)", "--pullquote-line-height": "1.3", "--pullquote-weight": "300", "--pullquote-letter-spacing": "-0.02em", "--page-container-max-width": "1440px", "--page-container-side-gutter": "20px", "--section-padding-vertical": "100px", "--section-heading-margin-bottom": "75px", "--ease-spring": "cubic-bezier(0.33, 1, 0.68, 1)", "--duration-fast": "0.15s", "--duration-normal": "0.2s", "--duration-slow": "0.4s" }, "dark": { "--background": "var(--color-black)", "--foreground": "var(--color-white)", "--card": "var(--color-gray-800)", "--card-foreground": "var(--foreground)", "--popover": "var(--color-gray-800)", "--popover-foreground": "var(--foreground)", "--primary": "var(--color-white)", "--primary-foreground": "var(--color-black)", "--secondary": "var(--color-gray-700)", "--secondary-foreground": "var(--foreground)", "--muted": "var(--color-gray-800)", "--muted-foreground": "var(--color-gray-500)", "--accent": "var(--color-gray-800)", "--accent-foreground": "var(--foreground)", "--destructive": "var(--color-red-100)", "--destructive-foreground": "var(--color-black)", "--success": "var(--color-green-100)", "--success-foreground": "var(--color-black)", "--warning": "var(--color-yellow-100)", "--warning-foreground": "var(--color-black)", "--info": "var(--color-blue-100)", "--info-foreground": "var(--color-black)", "--border": "var(--color-gray-700)", "--input": "var(--color-gray-700)", "--ring": "var(--color-gray-400)", "--background-accent": "var(--primary)", "--border-accent": "var(--primary)", "--text-accent": "var(--primary)", "--background-default": "var(--background)", "--background-alt": "var(--card)", "--background-medium": "var(--secondary)", "--background-muted": "var(--muted)", "--background-inverse": "var(--color-white)", "--background-danger": "var(--destructive)", "--background-success": "var(--success)", "--background-info": "var(--info)", "--background-warning": "var(--warning)", "--border-default": "var(--border)", "--border-input": "var(--input)", "--border-input-hover": "var(--color-gray-600)", "--border-strong": "var(--primary)", "--border-card": "var(--border)", "--border-inverse": "var(--color-white)", "--border-danger": "var(--color-red-200)", "--border-success": "var(--color-green-200)", "--border-warning": "var(--color-yellow-200)", "--border-info": "var(--color-blue-200)", "--text-default": "var(--foreground)", "--text-muted": "var(--muted-foreground)", "--text-alt": "var(--color-gray-500)", "--text-inverse": "var(--primary-foreground)", "--text-danger": "var(--destructive)", "--text-success": "var(--success)", "--text-warning": "var(--warning)", "--text-info": "var(--info)", "--dark-10": "rgba(242, 242, 242, 0.1)", "--dark-40": "rgba(242, 242, 242, 0.4)", "--dark-04": "rgba(242, 242, 242, 0.04)", "--shadow-mini": "0 2px 8px rgba(0, 0, 0, 0.4)", "--shadow-mini-inset": "0 1px 4px rgba(0, 0, 0, 0.5) inset", "--shadow-btn": "0 2px 8px rgba(0, 0, 0, 0.3)", "--shadow-card": "0 2px 8px rgba(0, 0, 0, 0.4)", "--shadow-elevated": "0 3px 12px rgba(0, 0, 0, 0.5)", "--shadow-popover": "0 8px 30px rgba(0, 0, 0, 0.4)", "--shadow-modal": "0 20px 60px rgba(0, 0, 0, 0.6)", "--shadow-kbd": "0 2px 8px rgba(0, 0, 0, 0.4)", "--shadow-date-field-focus": "0 0 0 3px rgba(244, 244, 245, 0.1)", "--chart-1": "#f6b44a", "--chart-2": "#7585ff", "--chart-3": "#d76a6a", "--chart-4": "#d185e0", "--chart-5": "#91cb80", "--sidebar": "var(--background-default)", "--sidebar-foreground": "var(--text-default)", "--sidebar-primary": "var(--background-accent)", "--sidebar-primary-foreground": "var(--text-inverse)", "--sidebar-accent": "var(--background-muted)", "--sidebar-accent-foreground": "var(--text-default)", "--sidebar-border": "var(--border-default)", "--sidebar-ring": "var(--border-default)" } } }, { "name": "styles-main", "type": "registry:style", "dependencies": ["tw-animate-css"], "devDependencies": ["tailwindcss"], "registryDependencies": ["font-faces"], "files": [ { "type": "registry:theme", "target": "app/globals.css", "path": "src/styles/main.css" } ] }, { "name": "font-faces", "type": "registry:style", "files": [ { "type": "registry:theme", "target": "styles/font-faces.css", "path": "src/styles/font-faces.css" } ] }, { "name": "utils", "type": "registry:lib", "dependencies": ["clsx", "tailwind-merge"], "files": [ { "type": "registry:lib", "target": "lib/utils.ts", "path": "src/lib/utils.ts" } ] }, { "name": "theme-warm-sand", "type": "registry:theme", "title": "Warm Sand", "description": "Earthy terracotta warmth", "cssVars": { "light": { "--background-accent": "#9C5930", "--border-accent": "#9C5930", "--text-accent": "#9C5930", "--background-default": "#FBF5EC", "--background-alt": "#F5ECDF", "--background-medium": "#C4A882", "--background-muted": "#F0E4D4", "--background-inverse": "#3D2B1F", "--border-default": "#E2D4C0", "--border-input": "#D4C2AA", "--border-input-hover": "#C4A882", "--border-strong": "#3D2B1F", "--border-card": "#E2D4C0", "--border-inverse": "#3D2B1F", "--text-default": "#3D2B1F", "--text-muted": "#8B7355", "--text-alt": "#6B5940", "--text-inverse": "#FBF5EC", "--chart-1": "#D4853A", "--chart-2": "#7B9EA8", "--chart-3": "#C46B5A", "--chart-4": "#A8856B", "--chart-5": "#8BAA72" }, "dark": { "--background-accent": "#D4853A", "--border-accent": "#D4853A", "--text-accent": "#D4853A", "--background-default": "#1C1410", "--background-alt": "#2A1F18", "--background-medium": "#4A382A", "--background-muted": "#2A1F18", "--background-inverse": "#FBF5EC", "--border-default": "#3A2C20", "--border-input": "#3A2C20", "--border-input-hover": "#5A4530", "--border-strong": "#D4853A", "--border-card": "#3A2C20", "--border-inverse": "#FBF5EC", "--text-default": "#F0E4D4", "--text-muted": "#8B7355", "--text-alt": "#8B7355", "--text-inverse": "#1C1410", "--chart-1": "#D4853A", "--chart-2": "#7B9EA8", "--chart-3": "#C46B5A", "--chart-4": "#A8856B", "--chart-5": "#8BAA72" } }, "files": [] }, { "name": "theme-ocean", "type": "registry:theme", "title": "Ocean", "description": "Cool blues and teals", "cssVars": { "light": { "--background-accent": "#1B6B8A", "--border-accent": "#1B6B8A", "--text-accent": "#1B6B8A", "--background-default": "#F4F9FB", "--background-alt": "#EAF3F8", "--background-medium": "#8BB8CA", "--background-muted": "#E4F0F5", "--background-inverse": "#0F3442", "--border-default": "#C8DEE8", "--border-input": "#B0D0DE", "--border-input-hover": "#8BB8CA", "--border-strong": "#0F3442", "--border-card": "#C8DEE8", "--border-inverse": "#0F3442", "--text-default": "#0F3442", "--text-muted": "#5A8A9C", "--text-alt": "#3A6A7C", "--text-inverse": "#F4F9FB", "--chart-1": "#2E9AB8", "--chart-2": "#5B78D8", "--chart-3": "#E07A5F", "--chart-4": "#7BC4B8", "--chart-5": "#A8C256" }, "dark": { "--background-accent": "#3AB4D8", "--border-accent": "#3AB4D8", "--text-accent": "#3AB4D8", "--background-default": "#0A1E28", "--background-alt": "#112A36", "--background-medium": "#2A5060", "--background-muted": "#112A36", "--background-inverse": "#F4F9FB", "--border-default": "#1A3A4A", "--border-input": "#1A3A4A", "--border-input-hover": "#3A6070", "--border-strong": "#3AB4D8", "--border-card": "#1A3A4A", "--border-inverse": "#F4F9FB", "--text-default": "#E4F0F5", "--text-muted": "#5A8A9C", "--text-alt": "#5A8A9C", "--text-inverse": "#0A1E28", "--chart-1": "#3AB4D8", "--chart-2": "#7B92E8", "--chart-3": "#E07A5F", "--chart-4": "#7BC4B8", "--chart-5": "#A8C256" } }, "files": [] }, { "name": "theme-midnight-luxe", "type": "registry:theme", "title": "Midnight Luxe", "description": "Deep purples and golds", "cssVars": { "light": { "--background-accent": "#1E1528", "--border-accent": "#1E1528", "--text-accent": "#1E1528", "--background-default": "#F8F6F9", "--background-alt": "#F0ECF4", "--background-medium": "#B8A8C8", "--background-muted": "#EDE8F2", "--background-inverse": "#1E1528", "--border-default": "#DDD4E6", "--border-input": "#CCC0D8", "--border-input-hover": "#B8A8C8", "--border-strong": "#1E1528", "--border-card": "#DDD4E6", "--border-inverse": "#1E1528", "--text-default": "#1E1528", "--text-muted": "#7A6B8A", "--text-alt": "#5A4B6A", "--text-inverse": "#F8F6F9", "--background-warning": "#C5A24D", "--chart-1": "#C5A24D", "--chart-2": "#8B6CC1", "--chart-3": "#D76A7A", "--chart-4": "#5E8EC5", "--chart-5": "#7CB88A" }, "dark": { "--background-accent": "#C5A24D", "--border-accent": "#C5A24D", "--text-accent": "#C5A24D", "--background-default": "#0E0A14", "--background-alt": "#1A1224", "--background-medium": "#3A2A50", "--background-muted": "#1A1224", "--background-inverse": "#F8F6F9", "--border-default": "#2A1E3A", "--border-input": "#2A1E3A", "--border-input-hover": "#4A3A60", "--border-strong": "#C5A24D", "--border-card": "#2A1E3A", "--border-inverse": "#F8F6F9", "--text-default": "#EDE8F2", "--text-muted": "#7A6B8A", "--text-alt": "#7A6B8A", "--text-inverse": "#0E0A14", "--background-warning": "#C5A24D", "--chart-1": "#C5A24D", "--chart-2": "#A88DE0", "--chart-3": "#E08090", "--chart-4": "#7AAEE5", "--chart-5": "#8BD09A" } }, "files": [] }, { "name": "theme-neon-brutalist", "type": "registry:theme", "title": "Neon Brutalist", "description": "High contrast, sharp edges", "cssVars": { "light": { "--background-accent": "#FF3A00", "--border-accent": "#FF3A00", "--text-accent": "#FF3A00", "--background-default": "#ffffff", "--background-alt": "#F0F0F0", "--background-medium": "#CCCCCC", "--background-muted": "#F0F0F0", "--background-inverse": "#000000", "--border-default": "#000000", "--border-input": "#000000", "--border-input-hover": "#FF3A00", "--border-strong": "#000000", "--border-card": "#000000", "--border-inverse": "#000000", "--text-default": "#000000", "--text-muted": "#555555", "--text-alt": "#333333", "--text-inverse": "#ffffff", "--radius": "0px", "--radius-pill": "0px", "--radius-button": "0px", "--radius-input": "0px", "--radius-card": "0px", "--radius-card-lg": "0px", "--radius-card-sm": "0px", "--radius-dropdown": "0px", "--radius-modal": "0px", "--chart-1": "#FF3A00", "--chart-2": "#00E5FF", "--chart-3": "#FFE600", "--chart-4": "#FF00AA", "--chart-5": "#00FF66" }, "dark": { "--background-accent": "#FF5722", "--border-accent": "#FF5722", "--text-accent": "#FF5722", "--background-default": "#0A0A0A", "--background-alt": "#141414", "--background-medium": "#333333", "--background-muted": "#141414", "--background-inverse": "#ffffff", "--border-default": "#ffffff", "--border-input": "#ffffff", "--border-input-hover": "#FF5722", "--border-strong": "#ffffff", "--border-card": "#444444", "--border-inverse": "#ffffff", "--text-default": "#ffffff", "--text-muted": "#AAAAAA", "--text-alt": "#AAAAAA", "--text-inverse": "#000000", "--radius": "0px", "--radius-pill": "0px", "--radius-button": "0px", "--radius-input": "0px", "--radius-card": "0px", "--radius-card-lg": "0px", "--radius-card-sm": "0px", "--radius-dropdown": "0px", "--radius-modal": "0px", "--chart-1": "#FF5722", "--chart-2": "#00E5FF", "--chart-3": "#FFE600", "--chart-4": "#FF00AA", "--chart-5": "#00FF66" } }, "files": [] }, { "name": "theme-soft-pastel", "type": "registry:theme", "title": "Soft Pastel", "description": "Gentle, muted pastels", "cssVars": { "light": { "--background-accent": "#8B7EC8", "--border-accent": "#8B7EC8", "--text-accent": "#8B7EC8", "--background-default": "#FAFAFA", "--background-alt": "#F5F2FA", "--background-medium": "#C8BEE0", "--background-muted": "#F0EDF8", "--background-inverse": "#3A3552", "--border-default": "#E0DAF0", "--border-input": "#D2CAE4", "--border-input-hover": "#C8BEE0", "--border-strong": "#3A3552", "--border-card": "#E0DAF0", "--border-inverse": "#3A3552", "--text-default": "#3A3552", "--text-muted": "#8A82A0", "--text-alt": "#6A6280", "--text-inverse": "#FAFAFA", "--background-danger": "#E8A0A0", "--background-success": "#A0D8A0", "--background-info": "#A0C0E8", "--background-warning": "#E8D0A0", "--border-danger": "#E8A0A0", "--border-success": "#A0D8A0", "--border-warning": "#E8D0A0", "--border-info": "#A0C0E8", "--text-danger": "#C07070", "--text-success": "#70A870", "--text-warning": "#C0A060", "--text-info": "#7090C0", "--radius-card": "16px", "--radius-card-lg": "20px", "--radius-card-sm": "14px", "--radius-dropdown": "14px", "--radius-modal": "20px", "--chart-1": "#C8A8E0", "--chart-2": "#A8C8E8", "--chart-3": "#E8B0B0", "--chart-4": "#B0D8B0", "--chart-5": "#E8D0A8" }, "dark": { "--background-accent": "#A898E0", "--border-accent": "#A898E0", "--text-accent": "#A898E0", "--background-default": "#14121C", "--background-alt": "#1E1A2A", "--background-medium": "#3A3452", "--background-muted": "#1E1A2A", "--background-inverse": "#FAFAFA", "--border-default": "#2A2640", "--border-input": "#2A2640", "--border-input-hover": "#4A4468", "--border-strong": "#A898E0", "--border-card": "#2A2640", "--border-inverse": "#FAFAFA", "--text-default": "#E8E4F4", "--text-muted": "#8A82A0", "--text-alt": "#8A82A0", "--text-inverse": "#14121C", "--background-danger": "#D08080", "--background-success": "#80C080", "--background-info": "#80A8D8", "--background-warning": "#D8C080", "--border-danger": "#D08080", "--border-success": "#80C080", "--border-warning": "#D8C080", "--border-info": "#80A8D8", "--text-danger": "#E0A0A0", "--text-success": "#A0D8A0", "--text-warning": "#E0C880", "--text-info": "#A0C0E8", "--radius-card": "16px", "--radius-card-lg": "20px", "--radius-card-sm": "14px", "--radius-dropdown": "14px", "--radius-modal": "20px", "--chart-1": "#C8A8E0", "--chart-2": "#A8C8E8", "--chart-3": "#E8B0B0", "--chart-4": "#B0D8B0", "--chart-5": "#E8D0A8" } }, "files": [] }, { "name": "accordion", "type": "registry:ui", "dependencies": ["@radix-ui/react-accordion", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/accordion.tsx", "path": "src/components/ui/accordion.tsx" } ], "categories": ["layout"] }, { "name": "alert-dialog", "type": "registry:ui", "dependencies": ["@radix-ui/react-alert-dialog"], "registryDependencies": ["utils", "button"], "files": [ { "type": "registry:ui", "target": "components/ui/alert-dialog.tsx", "path": "src/components/ui/alert-dialog.tsx" } ], "categories": ["feedback"] }, { "name": "alert", "type": "registry:ui", "dependencies": ["class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/alert.tsx", "path": "src/components/ui/alert.tsx" } ], "categories": ["feedback"], "meta": { "expression_dimensions": ["palette", "spacing", "typography"] } }, { "name": "aspect-ratio", "type": "registry:ui", "dependencies": ["@radix-ui/react-aspect-ratio"], "files": [ { "type": "registry:ui", "target": "components/ui/aspect-ratio.tsx", "path": "src/components/ui/aspect-ratio.tsx" } ], "categories": ["layout"] }, { "name": "avatar", "type": "registry:ui", "dependencies": ["@radix-ui/react-avatar"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/avatar.tsx", "path": "src/components/ui/avatar.tsx" } ], "categories": ["display"] }, { "name": "badge", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/badge.tsx", "path": "src/components/ui/badge.tsx" } ], "categories": ["display"], "meta": { "expression_dimensions": ["surfaces", "typography", "palette"], "agent_decision": { "intent": "Compact status, label, or metadata marker.", "when_to_use": [ "Use for short categorical labels, state tags, and low-density metadata." ], "when_not_to_use": [ "Do not use for primary actions.", "Do not encode long sentences or explanations in badges." ], "safe_variants": ["default", "secondary", "destructive", "outline"], "common_misuses": [ "Using raw color scales for status.", "Stacking many badges where a row or list would be clearer." ], "token_roles": [ "primary", "muted", "foreground", "destructive", "border" ] } } }, { "name": "breadcrumb", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/breadcrumb.tsx", "path": "src/components/ui/breadcrumb.tsx" } ], "categories": ["navigation"] }, { "name": "button-group", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "class-variance-authority"], "registryDependencies": ["utils", "separator"], "files": [ { "type": "registry:ui", "target": "components/ui/button-group.tsx", "path": "src/components/ui/button-group.tsx" } ], "categories": ["input"] }, { "name": "button", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/button.tsx", "path": "src/components/ui/button.tsx" } ], "categories": ["input"], "meta": { "expression_dimensions": [ "palette", "surfaces", "typography", "spacing" ], "agent_decision": { "intent": "Primary and secondary actions with Vessel pill geometry and semantic state roles.", "when_to_use": [ "Use for explicit user actions, form submission, menus, and compact icon controls." ], "when_not_to_use": [ "Do not use as a layout container.", "Do not override radius or palette with raw classes." ], "safe_variants": [ "default", "secondary", "outline", "ghost", "destructive", "link" ], "common_misuses": [ "Adding raw palette utilities to force emphasis.", "Using icon-only buttons without an accessible label.", "Inventing one-off button heights instead of the size prop." ], "token_roles": [ "primary", "primary-foreground", "muted", "foreground", "destructive", "ring" ] } } }, { "name": "calendar", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button"], "files": [ { "type": "registry:ui", "target": "components/ui/calendar.tsx", "path": "src/components/ui/calendar.tsx" } ], "categories": ["display", "input"] }, { "name": "card", "type": "registry:ui", "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/card.tsx", "path": "src/components/ui/card.tsx" } ], "categories": ["display"], "meta": { "expression_dimensions": ["surfaces", "spacing", "typography"], "agent_decision": { "intent": "Quiet contained surface for related content, not decoration.", "when_to_use": [ "Use for stable panels, grouped settings, and bounded summaries." ], "when_not_to_use": [ "Do not nest cards unless there is a real hierarchy.", "Do not use cards to decorate every list item by default." ], "safe_variants": [ "Card", "CardHeader", "CardContent", "CardFooter", "CardAction" ], "common_misuses": [ "Adding arbitrary shadows.", "Using raw gray backgrounds instead of card/background roles.", "Making card titles do page-heading work." ], "token_roles": ["card", "card-foreground", "border", "shadow-card"] } } }, { "name": "carousel", "type": "registry:ui", "dependencies": ["embla-carousel-react", "lucide-react"], "registryDependencies": ["utils", "button"], "files": [ { "type": "registry:ui", "target": "components/ui/carousel.tsx", "path": "src/components/ui/carousel.tsx" } ], "categories": ["display"] }, { "name": "chart", "type": "registry:ui", "dependencies": ["recharts"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/chart.tsx", "path": "src/components/ui/chart.tsx" } ], "categories": ["display"] }, { "name": "checkbox", "type": "registry:ui", "dependencies": ["@radix-ui/react-checkbox", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/checkbox.tsx", "path": "src/components/ui/checkbox.tsx" } ], "categories": ["input"] }, { "name": "collapsible", "type": "registry:ui", "dependencies": ["@radix-ui/react-collapsible"], "files": [ { "type": "registry:ui", "target": "components/ui/collapsible.tsx", "path": "src/components/ui/collapsible.tsx" } ], "categories": ["layout"] }, { "name": "command", "type": "registry:ui", "dependencies": ["cmdk", "lucide-react"], "registryDependencies": ["utils", "dialog"], "files": [ { "type": "registry:ui", "target": "components/ui/command.tsx", "path": "src/components/ui/command.tsx" } ], "categories": ["input", "navigation"], "meta": { "agent_decision": { "intent": "Searchable command/list palette for selecting actions or destinations.", "when_to_use": [ "Use when the user needs to search or filter a known command/list space." ], "when_not_to_use": [ "Do not use as a generic form container.", "Do not hide primary navigation exclusively behind command search." ], "safe_variants": [ "CommandDialog", "CommandInput", "CommandList", "CommandItem" ], "common_misuses": [ "Returning ungrouped long lists.", "Using raw selected colors instead of accent roles." ], "token_roles": [ "popover", "popover-foreground", "accent", "accent-foreground", "muted-foreground" ] } } }, { "name": "context-menu", "type": "registry:ui", "dependencies": ["@radix-ui/react-context-menu", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/context-menu.tsx", "path": "src/components/ui/context-menu.tsx" } ], "categories": ["navigation"] }, { "name": "dialog", "type": "registry:ui", "dependencies": ["@radix-ui/react-dialog", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/dialog.tsx", "path": "src/components/ui/dialog.tsx" } ], "categories": ["feedback"], "meta": { "expression_dimensions": ["surfaces", "spacing", "palette"], "agent_decision": { "intent": "Task-blocking overlay for decisions that must interrupt the current flow.", "when_to_use": [ "Use for confirmation, destructive flows, or focused modal tasks." ], "when_not_to_use": [ "Do not use for lightweight hints; use popover or inline disclosure instead.", "Do not stack dialogs." ], "safe_variants": ["showCloseButton", "DialogHeader", "DialogFooter"], "common_misuses": [ "Putting full pages inside dialogs.", "Hiding close affordances without a strong reason.", "Using dialog for hover/preview content." ], "token_roles": [ "background", "foreground", "border", "shadow-modal", "ring" ] } } }, { "name": "drawer", "type": "registry:ui", "dependencies": ["vaul"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/drawer.tsx", "path": "src/components/ui/drawer.tsx" } ], "categories": ["feedback"] }, { "name": "dropdown-menu", "type": "registry:ui", "dependencies": ["@radix-ui/react-dropdown-menu", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/dropdown-menu.tsx", "path": "src/components/ui/dropdown-menu.tsx" } ], "categories": ["navigation"] }, { "name": "form", "type": "registry:ui", "dependencies": ["@radix-ui/react-label", "@radix-ui/react-slot"], "registryDependencies": ["utils", "label"], "files": [ { "type": "registry:ui", "target": "components/ui/form.tsx", "path": "src/components/ui/form.tsx" } ], "categories": ["input"] }, { "name": "hover-card", "type": "registry:ui", "dependencies": ["@radix-ui/react-hover-card"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/hover-card.tsx", "path": "src/components/ui/hover-card.tsx" } ], "categories": ["display"] }, { "name": "input-group", "type": "registry:ui", "dependencies": ["class-variance-authority"], "registryDependencies": ["utils", "button", "input", "textarea"], "files": [ { "type": "registry:ui", "target": "components/ui/input-group.tsx", "path": "src/components/ui/input-group.tsx" } ], "categories": ["input"] }, { "name": "input-otp", "type": "registry:ui", "dependencies": ["input-otp", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/input-otp.tsx", "path": "src/components/ui/input-otp.tsx" } ], "categories": ["input"] }, { "name": "input", "type": "registry:ui", "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/input.tsx", "path": "src/components/ui/input.tsx" } ], "categories": ["input"], "meta": { "expression_dimensions": ["surfaces", "palette", "spacing"], "agent_decision": { "intent": "Single-line text entry with quiet tokenized focus and invalid states.", "when_to_use": [ "Use for short user-entered values in forms and controls." ], "when_not_to_use": [ "Do not use for multi-line prompts or code.", "Do not create custom borders outside input/ring tokens." ], "safe_variants": ["default"], "common_misuses": [ "Replacing focus rings with raw colors.", "Using placeholder text as the only label." ], "token_roles": [ "input", "ring", "foreground", "muted-foreground", "destructive" ] } } }, { "name": "label", "type": "registry:ui", "dependencies": ["@radix-ui/react-label"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/label.tsx", "path": "src/components/ui/label.tsx" } ], "categories": ["input"] }, { "name": "menubar", "type": "registry:ui", "dependencies": ["@radix-ui/react-menubar", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/menubar.tsx", "path": "src/components/ui/menubar.tsx" } ], "categories": ["navigation"] }, { "name": "navigation-menu", "type": "registry:ui", "dependencies": [ "@radix-ui/react-navigation-menu", "class-variance-authority", "lucide-react" ], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/navigation-menu.tsx", "path": "src/components/ui/navigation-menu.tsx" } ], "categories": ["navigation"] }, { "name": "pagination", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button"], "files": [ { "type": "registry:ui", "target": "components/ui/pagination.tsx", "path": "src/components/ui/pagination.tsx" } ], "categories": ["navigation"] }, { "name": "popover", "type": "registry:ui", "dependencies": ["@radix-ui/react-popover"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/popover.tsx", "path": "src/components/ui/popover.tsx" } ], "categories": ["feedback"], "meta": { "expression_dimensions": ["surfaces", "palette", "spacing"], "agent_decision": { "intent": "Lightweight floating contextual surface anchored to a trigger.", "when_to_use": [ "Use for contextual controls, brief details, or small pickers that do not block the task." ], "when_not_to_use": [ "Do not use for destructive confirmation or long forms.", "Do not use as a mini-dialog." ], "safe_variants": [ "PopoverHeader", "PopoverTitle", "PopoverDescription" ], "common_misuses": [ "Overloading popovers with navigation stacks.", "Using custom dark surfaces instead of popover tokens." ], "token_roles": [ "popover", "popover-foreground", "border", "shadow-popover" ] } } }, { "name": "progress", "type": "registry:ui", "dependencies": ["@radix-ui/react-progress"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/progress.tsx", "path": "src/components/ui/progress.tsx" } ], "categories": ["feedback"] }, { "name": "radio-group", "type": "registry:ui", "dependencies": ["@radix-ui/react-radio-group", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/radio-group.tsx", "path": "src/components/ui/radio-group.tsx" } ], "categories": ["input"] }, { "name": "resizable", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/resizable.tsx", "path": "src/components/ui/resizable.tsx" } ], "categories": ["layout"] }, { "name": "scroll-area", "type": "registry:ui", "dependencies": ["@radix-ui/react-scroll-area"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/scroll-area.tsx", "path": "src/components/ui/scroll-area.tsx" } ], "categories": ["layout"] }, { "name": "select", "type": "registry:ui", "dependencies": ["@radix-ui/react-select", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/select.tsx", "path": "src/components/ui/select.tsx" } ], "categories": ["input"] }, { "name": "separator", "type": "registry:ui", "dependencies": ["@radix-ui/react-separator"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/separator.tsx", "path": "src/components/ui/separator.tsx" } ], "categories": ["layout"] }, { "name": "sheet", "type": "registry:ui", "dependencies": ["@radix-ui/react-dialog", "lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/sheet.tsx", "path": "src/components/ui/sheet.tsx" } ], "categories": ["feedback"] }, { "name": "sidebar", "type": "registry:ui", "dependencies": [ "@radix-ui/react-slot", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "button", "input", "separator", "sheet", "skeleton", "tooltip" ], "files": [ { "type": "registry:ui", "target": "components/ui/sidebar.tsx", "path": "src/components/ui/sidebar.tsx" } ], "categories": ["navigation", "layout"] }, { "name": "skeleton", "type": "registry:ui", "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/skeleton.tsx", "path": "src/components/ui/skeleton.tsx" } ], "categories": ["display"], "meta": { "expression_dimensions": ["surfaces", "palette"] } }, { "name": "slider", "type": "registry:ui", "dependencies": ["@radix-ui/react-slider"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/slider.tsx", "path": "src/components/ui/slider.tsx" } ], "categories": ["input"] }, { "name": "sonner", "type": "registry:ui", "dependencies": ["next-themes", "sonner"], "files": [ { "type": "registry:ui", "target": "components/ui/sonner.tsx", "path": "src/components/ui/sonner.tsx" } ], "categories": ["feedback"] }, { "name": "spinner", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/spinner.tsx", "path": "src/components/ui/spinner.tsx" } ], "categories": ["feedback"] }, { "name": "stack", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/stack.tsx", "path": "src/components/ui/stack.tsx" } ], "categories": ["layout"], "meta": { "agent_decision": { "intent": "Typed flex layout primitive for spacing, alignment, direction, and wrapping decisions.", "when_to_use": [ "Use for simple row/column composition before reaching for raw flex class strings." ], "when_not_to_use": [ "Do not use when a semantic component such as Card, Dialog, or PromptInput already owns the layout." ], "safe_variants": ["direction", "gap", "align", "justify", "wrap"], "common_misuses": [ "Adding one-off gap classes instead of the gap prop.", "Using Stack to hide unclear content hierarchy." ], "token_roles": ["spacing", "layout"] } } }, { "name": "surface", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/surface.tsx", "path": "src/components/ui/surface.tsx" } ], "categories": ["layout", "display"], "meta": { "expression_dimensions": ["surfaces", "palette", "spacing"], "agent_decision": { "intent": "Typed semantic surface primitive for choosing role, padding, radius, border, and elevation without raw class strings.", "when_to_use": [ "Use for custom contained surfaces when Card, Popover, or Dialog would be too specific." ], "when_not_to_use": [ "Do not use to restyle an existing semantic component.", "Do not use dark role as generic decoration; reserve it for technical surfaces." ], "safe_variants": ["role", "padding", "radius", "border", "elevation"], "common_misuses": [ "Combining raw background classes with role props.", "Adding arbitrary shadows instead of elevation.", "Using Surface for every div instead of meaningful component anatomy." ], "token_roles": [ "background", "foreground", "card", "popover", "muted", "accent", "surface-dark", "border", "shadow-card", "shadow-popover" ] } } }, { "name": "text", "type": "registry:ui", "dependencies": ["@radix-ui/react-slot", "class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/text.tsx", "path": "src/components/ui/text.tsx" } ], "categories": ["typography", "display"], "meta": { "expression_dimensions": ["typography", "palette"], "agent_decision": { "intent": "Typed typography primitive for text role, tone, alignment, and balance decisions.", "when_to_use": [ "Use for custom copy when a component-specific title, description, or label slot does not already exist." ], "when_not_to_use": [ "Do not use to bypass semantic HTML; use asChild for headings, labels, and links when needed.", "Do not create local text colors with raw palette utilities." ], "safe_variants": [ "display", "headline", "title", "body", "label", "mono", "tone", "align", "balance" ], "common_misuses": [ "Using display scale in dense product panels.", "Using tone to communicate state without text or icon support." ], "token_roles": [ "foreground", "muted-foreground", "primary-foreground", "success", "warning", "info", "destructive" ] } } }, { "name": "switch", "type": "registry:ui", "dependencies": ["@radix-ui/react-switch"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/switch.tsx", "path": "src/components/ui/switch.tsx" } ], "categories": ["input"] }, { "name": "table", "type": "registry:ui", "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/table.tsx", "path": "src/components/ui/table.tsx" } ], "categories": ["display"] }, { "name": "tabs", "type": "registry:ui", "dependencies": ["@radix-ui/react-tabs"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/tabs.tsx", "path": "src/components/ui/tabs.tsx" } ], "categories": ["navigation"] }, { "name": "textarea", "type": "registry:ui", "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/textarea.tsx", "path": "src/components/ui/textarea.tsx" } ], "categories": ["input"] }, { "name": "toggle-group", "type": "registry:ui", "dependencies": [ "@radix-ui/react-toggle-group", "class-variance-authority" ], "registryDependencies": ["utils", "toggle"], "files": [ { "type": "registry:ui", "target": "components/ui/toggle-group.tsx", "path": "src/components/ui/toggle-group.tsx" } ], "categories": ["input"] }, { "name": "toggle", "type": "registry:ui", "dependencies": ["@radix-ui/react-toggle", "class-variance-authority"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/toggle.tsx", "path": "src/components/ui/toggle.tsx" } ], "categories": ["input"] }, { "name": "tooltip", "type": "registry:ui", "dependencies": ["@radix-ui/react-tooltip"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ui/tooltip.tsx", "path": "src/components/ui/tooltip.tsx" } ], "categories": ["feedback"], "meta": { "expression_dimensions": ["palette", "surfaces", "typography"] } }, { "name": "agent", "type": "registry:ui", "dependencies": ["ai", "lucide-react"], "registryDependencies": ["utils", "accordion", "badge"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/agent.tsx", "path": "src/components/ai-elements/agent.tsx" } ], "categories": ["ai", "display"] }, { "name": "artifact", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button", "tooltip"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/artifact.tsx", "path": "src/components/ai-elements/artifact.tsx" } ], "categories": ["ai", "display"] }, { "name": "attachments", "type": "registry:ui", "dependencies": ["ai", "lucide-react"], "registryDependencies": ["utils", "button", "hover-card"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/attachments.tsx", "path": "src/components/ai-elements/attachments.tsx" } ], "categories": ["ai", "input", "chat"] }, { "name": "audio-player", "type": "registry:ui", "dependencies": ["ai", "media-chrome"], "registryDependencies": ["utils", "button", "button-group"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/audio-player.tsx", "path": "src/components/ai-elements/audio-player.tsx" } ], "categories": ["ai", "media"] }, { "name": "canvas", "type": "registry:ui", "dependencies": ["@xyflow/react"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/canvas.tsx", "path": "src/components/ai-elements/canvas.tsx" } ], "categories": ["ai", "layout"] }, { "name": "chain-of-thought", "type": "registry:ui", "dependencies": [ "@radix-ui/react-use-controllable-state", "lucide-react" ], "registryDependencies": ["utils", "badge", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/chain-of-thought.tsx", "path": "src/components/ai-elements/chain-of-thought.tsx" } ], "categories": ["ai", "display"] }, { "name": "checkpoint", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button", "separator", "tooltip"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/checkpoint.tsx", "path": "src/components/ai-elements/checkpoint.tsx" } ], "categories": ["ai", "display"] }, { "name": "code-block", "type": "registry:ui", "dependencies": ["lucide-react", "shiki"], "registryDependencies": ["utils", "button", "select"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/code-block.tsx", "path": "src/components/ai-elements/code-block.tsx" } ], "categories": ["ai", "code"], "meta": { "agent_decision": { "intent": "Readable, copyable code and command output surface.", "when_to_use": [ "Use for code snippets, terminal commands, and structured technical output." ], "when_not_to_use": [ "Do not use for prose callouts.", "Do not replace terminal when ANSI/session behavior matters." ], "safe_variants": ["language selector", "copy action"], "common_misuses": [ "Hardcoding syntax colors outside the highlighter.", "Using code blocks as general panels." ], "token_roles": [ "surface-dark", "surface-dark-text", "border", "muted-foreground" ] } } }, { "name": "commit", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "avatar", "button", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/commit.tsx", "path": "src/components/ai-elements/commit.tsx" } ], "categories": ["ai", "code"] }, { "name": "confirmation", "type": "registry:ui", "dependencies": ["ai"], "registryDependencies": ["utils", "alert", "button"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/confirmation.tsx", "path": "src/components/ai-elements/confirmation.tsx" } ], "categories": ["ai", "feedback"] }, { "name": "connection", "type": "registry:ui", "dependencies": ["@xyflow/react"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/connection.tsx", "path": "src/components/ai-elements/connection.tsx" } ], "categories": ["ai", "layout"] }, { "name": "context", "type": "registry:ui", "dependencies": ["ai", "tokenlens"], "registryDependencies": ["utils", "button", "hover-card", "progress"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/context.tsx", "path": "src/components/ai-elements/context.tsx" } ], "categories": ["ai", "display"] }, { "name": "controls", "type": "registry:ui", "dependencies": ["@xyflow/react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/controls.tsx", "path": "src/components/ai-elements/controls.tsx" } ], "categories": ["ai", "layout"] }, { "name": "conversation", "type": "registry:ui", "dependencies": ["ai", "lucide-react", "use-stick-to-bottom"], "registryDependencies": ["utils", "button"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/conversation.tsx", "path": "src/components/ai-elements/conversation.tsx" } ], "categories": ["ai", "chat"] }, { "name": "edge", "type": "registry:ui", "dependencies": ["@xyflow/react"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/edge.tsx", "path": "src/components/ai-elements/edge.tsx" } ], "categories": ["ai", "layout"] }, { "name": "environment-variables", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "badge", "button", "switch"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/environment-variables.tsx", "path": "src/components/ai-elements/environment-variables.tsx" } ], "categories": ["ai", "code"] }, { "name": "file-tree", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/file-tree.tsx", "path": "src/components/ai-elements/file-tree.tsx" } ], "categories": ["ai", "code"] }, { "name": "image", "type": "registry:ui", "dependencies": ["ai"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/image.tsx", "path": "src/components/ai-elements/image.tsx" } ], "categories": ["ai", "media"] }, { "name": "inline-citation", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "badge", "carousel", "hover-card"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/inline-citation.tsx", "path": "src/components/ai-elements/inline-citation.tsx" } ], "categories": ["ai", "display"] }, { "name": "jsx-preview", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/jsx-preview.tsx", "path": "src/components/ai-elements/jsx-preview.tsx" } ], "categories": ["ai", "code"] }, { "name": "message", "type": "registry:ui", "dependencies": [ "@streamdown/cjk", "@streamdown/code", "@streamdown/math", "@streamdown/mermaid", "ai", "lucide-react", "streamdown" ], "registryDependencies": ["utils", "button", "button-group", "tooltip"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/message.tsx", "path": "src/components/ai-elements/message.tsx" } ], "categories": ["ai", "chat"], "meta": { "agent_decision": { "intent": "Chat transcript message body with readable streaming/markdown behavior.", "when_to_use": [ "Use for assistant, user, and system message rendering in conversational surfaces." ], "when_not_to_use": [ "Do not use for generic cards or notifications.", "Do not hand-roll markdown styling beside it." ], "safe_variants": [ "message parts and actions exposed by the component" ], "common_misuses": [ "Inventing separate bubble palettes.", "Mixing transcript spacing with card spacing." ], "token_roles": [ "foreground", "muted-foreground", "message-user-bg", "border" ] } } }, { "name": "mic-selector", "type": "registry:ui", "dependencies": [ "@radix-ui/react-use-controllable-state", "lucide-react" ], "registryDependencies": ["utils", "button", "command", "popover"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/mic-selector.tsx", "path": "src/components/ai-elements/mic-selector.tsx" } ], "categories": ["ai", "input", "media"] }, { "name": "model-selector", "type": "registry:ui", "registryDependencies": ["utils", "command", "dialog"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/model-selector.tsx", "path": "src/components/ai-elements/model-selector.tsx" } ], "categories": ["ai", "input"] }, { "name": "node", "type": "registry:ui", "dependencies": ["@xyflow/react"], "registryDependencies": ["utils", "card"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/node.tsx", "path": "src/components/ai-elements/node.tsx" } ], "categories": ["ai", "layout"] }, { "name": "open-in-chat", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button", "dropdown-menu"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/open-in-chat.tsx", "path": "src/components/ai-elements/open-in-chat.tsx" } ], "categories": ["ai", "chat"] }, { "name": "package-info", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "badge"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/package-info.tsx", "path": "src/components/ai-elements/package-info.tsx" } ], "categories": ["ai", "code"] }, { "name": "panel", "type": "registry:ui", "dependencies": ["@xyflow/react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/panel.tsx", "path": "src/components/ai-elements/panel.tsx" } ], "categories": ["ai", "layout"] }, { "name": "persona", "type": "registry:ui", "dependencies": ["@rive-app/react-webgl2"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/persona.tsx", "path": "src/components/ai-elements/persona.tsx" } ], "categories": ["ai", "media"] }, { "name": "plan", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button", "card", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/plan.tsx", "path": "src/components/ai-elements/plan.tsx" } ], "categories": ["ai", "display"] }, { "name": "prompt-input", "type": "registry:ui", "dependencies": ["ai", "lucide-react", "nanoid"], "registryDependencies": [ "utils", "command", "dropdown-menu", "hover-card", "input-group", "select", "spinner", "tooltip" ], "files": [ { "type": "registry:ui", "target": "components/ai-elements/prompt-input.tsx", "path": "src/components/ai-elements/prompt-input.tsx" } ], "categories": ["ai", "input", "chat"], "meta": { "agent_decision": { "intent": "Composable AI prompt composer with attachments, commands, model controls, and submit state.", "when_to_use": [ "Use as the main input for conversational or agentic tasks." ], "when_not_to_use": [ "Do not use for simple single-field forms.", "Do not fork composer controls for local one-off styling." ], "safe_variants": [ "PromptInput", "PromptInputTextarea", "PromptInputSubmit", "PromptInputToolbar" ], "common_misuses": [ "Adding raw spacing/color overrides inside the composer.", "Hiding submit/stop state from assistive tech." ], "token_roles": [ "background", "foreground", "muted-foreground", "border", "ring" ] } } }, { "name": "queue", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button", "collapsible", "scroll-area"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/queue.tsx", "path": "src/components/ai-elements/queue.tsx" } ], "categories": ["ai", "display"] }, { "name": "reasoning", "type": "registry:ui", "dependencies": [ "@radix-ui/react-use-controllable-state", "@streamdown/cjk", "@streamdown/code", "@streamdown/math", "@streamdown/mermaid", "lucide-react", "streamdown" ], "registryDependencies": ["utils", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/reasoning.tsx", "path": "src/components/ai-elements/reasoning.tsx" } ], "categories": ["ai", "chat"], "meta": { "agent_decision": { "intent": "Collapsible reasoning/thinking trace that stays secondary to the answer.", "when_to_use": [ "Use for model reasoning traces or explainable intermediate steps." ], "when_not_to_use": [ "Do not use for primary answer content.", "Do not force reasoning open unless the task is debugging/inspection." ], "safe_variants": ["collapsed/open controlled state"], "common_misuses": [ "Over-emphasizing reasoning with primary styling.", "Mixing reasoning content into final response hierarchy." ], "token_roles": ["muted", "muted-foreground", "border", "foreground"] } } }, { "name": "sandbox", "type": "registry:ui", "dependencies": ["ai", "lucide-react"], "registryDependencies": ["utils", "collapsible", "tabs"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/sandbox.tsx", "path": "src/components/ai-elements/sandbox.tsx" } ], "categories": ["ai", "code"] }, { "name": "schema-display", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "badge", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/schema-display.tsx", "path": "src/components/ai-elements/schema-display.tsx" } ], "categories": ["ai", "code"] }, { "name": "shimmer", "type": "registry:ui", "dependencies": ["motion"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/shimmer.tsx", "path": "src/components/ai-elements/shimmer.tsx" } ], "categories": ["ai", "feedback"] }, { "name": "snippet", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "input-group"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/snippet.tsx", "path": "src/components/ai-elements/snippet.tsx" } ], "categories": ["ai", "code"] }, { "name": "sources", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/sources.tsx", "path": "src/components/ai-elements/sources.tsx" } ], "categories": ["ai", "display"] }, { "name": "speech-input", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "button", "spinner"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/speech-input.tsx", "path": "src/components/ai-elements/speech-input.tsx" } ], "categories": ["ai", "input", "media"] }, { "name": "stack-trace", "type": "registry:ui", "dependencies": [ "@radix-ui/react-use-controllable-state", "lucide-react" ], "registryDependencies": ["utils", "button", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/stack-trace.tsx", "path": "src/components/ai-elements/stack-trace.tsx" } ], "categories": ["ai", "code"] }, { "name": "suggestion", "type": "registry:ui", "registryDependencies": ["utils", "button", "scroll-area"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/suggestion.tsx", "path": "src/components/ai-elements/suggestion.tsx" } ], "categories": ["ai", "chat"] }, { "name": "task", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/task.tsx", "path": "src/components/ai-elements/task.tsx" } ], "categories": ["ai", "display"] }, { "name": "terminal", "type": "registry:ui", "dependencies": ["ansi-to-react", "lucide-react"], "registryDependencies": ["utils", "button"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/terminal.tsx", "path": "src/components/ai-elements/terminal.tsx" } ], "categories": ["ai", "code"], "meta": { "agent_decision": { "intent": "Dark technical terminal surface for command/session output.", "when_to_use": [ "Use for shell-like output, ANSI logs, and terminal sessions." ], "when_not_to_use": [ "Do not use as an aesthetic dark card.", "Do not put ordinary prose content in terminal styling." ], "safe_variants": [ "Terminal", "TerminalHeader", "TerminalContent", "TerminalActions" ], "common_misuses": [ "Using zinc palette classes directly.", "Using terminal surface for non-code hierarchy." ], "token_roles": [ "surface-dark", "surface-dark-text", "surface-dark-muted", "surface-dark-border" ] } } }, { "name": "test-results", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": ["utils", "badge", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/test-results.tsx", "path": "src/components/ai-elements/test-results.tsx" } ], "categories": ["ai", "code"] }, { "name": "tool", "type": "registry:ui", "dependencies": ["ai", "lucide-react"], "registryDependencies": ["utils", "badge", "collapsible"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/tool.tsx", "path": "src/components/ai-elements/tool.tsx" } ], "categories": ["ai", "display"], "meta": { "agent_decision": { "intent": "Tool-call lifecycle display with semantic status states.", "when_to_use": [ "Use to show tool calls, approval states, output availability, and errors." ], "when_not_to_use": [ "Do not use for arbitrary status cards.", "Do not map statuses to raw color scales." ], "safe_variants": ["tool state/status props"], "common_misuses": [ "Using color as the only state cue.", "Expanding every tool result by default in dense transcripts." ], "token_roles": [ "success", "warning", "info", "destructive", "muted", "border" ] } } }, { "name": "toolbar", "type": "registry:ui", "dependencies": ["@xyflow/react"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/toolbar.tsx", "path": "src/components/ai-elements/toolbar.tsx" } ], "categories": ["ai", "layout"] }, { "name": "transcription", "type": "registry:ui", "dependencies": ["@radix-ui/react-use-controllable-state", "ai"], "registryDependencies": ["utils"], "files": [ { "type": "registry:ui", "target": "components/ai-elements/transcription.tsx", "path": "src/components/ai-elements/transcription.tsx" } ], "categories": ["ai", "chat", "media"] }, { "name": "voice-selector", "type": "registry:ui", "dependencies": [ "@radix-ui/react-use-controllable-state", "lucide-react" ], "registryDependencies": [ "utils", "button", "command", "dialog", "spinner" ], "files": [ { "type": "registry:ui", "target": "components/ai-elements/voice-selector.tsx", "path": "src/components/ai-elements/voice-selector.tsx" } ], "categories": ["ai", "input", "media"] }, { "name": "web-preview", "type": "registry:ui", "dependencies": ["lucide-react"], "registryDependencies": [ "utils", "button", "collapsible", "input", "tooltip" ], "files": [ { "type": "registry:ui", "target": "components/ai-elements/web-preview.tsx", "path": "src/components/ai-elements/web-preview.tsx" } ], "categories": ["ai", "media"] } ] }