{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "neumorphism-ui", "homepage": "https://neumorphism-ui.dev", "author": "Neumorphism UI", "items": [ { "name": "neumorphism-ui", "title": "Neumorphism UI", "description": "The light and dark design tokens for the Neumorphism UI registry.", "type": "registry:base", "extends": "none", "config": { "style": "base-nova", "iconLibrary": "lucide", "rsc": true, "tsx": true, "tailwind": { "baseColor": "neutral", "css": "app/globals.css" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" } }, "registryDependencies": [ "@neumorphism-ui/utils" ], "dependencies": [ "pretendard@1.3.9" ], "cssVars": { "theme": { "font-sans": "var(--neu-font-sans)", "font-mono": "var(--neu-font-mono)", "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-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "radius-sm": "var(--neu-radius-small)", "radius-md": "var(--neu-radius-control)", "radius-lg": "var(--neu-radius-surface)", "radius-xl": "var(--neu-radius-overlay)", "shadow-neu-raised": "var(--neu-shadow-raised)", "shadow-neu-raised-sm": "var(--neu-shadow-raised-sm)", "shadow-neu-inset": "var(--neu-shadow-inset)", "shadow-neu-primary": "var(--neu-shadow-primary)" }, "light": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#ebecf0", "foreground": "#25264b", "card": "#ebecf0", "card-foreground": "#25264b", "popover": "#ebecf0", "popover-foreground": "#25264b", "primary": "#0768da", "primary-foreground": "#ffffff", "secondary": "#e5e7ed", "secondary-foreground": "#25264b", "muted": "#dfe1e7", "muted-foreground": "#586079", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23586079%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#f2f3f5", "accent-foreground": "#0768da", "destructive": "#b92e43", "destructive-foreground": "#ffffff", "success": "#0a9b78", "border": "rgb(83 99 123 / 0.18)", "input": "rgb(83 99 123 / 0.16)", "ring": "#0768da", "radius": "12px", "neu-surface": "#ebecf0", "neu-surface-soft": "#f2f3f5", "neu-surface-low": "#dfe1e7", "neu-edge": "transparent", "neu-shadow-dark": "rgb(66 72 94 / 0.22)", "neu-shadow-light": "rgb(255 255 255 / 0.94)", "neu-shadow-raised": "6px 6px 14px rgb(66 72 94 / 0.22), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.94) 94%, transparent)", "neu-shadow-raised-sm": "3px 3px 7px rgb(66 72 94 / 0.22), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 7px rgb(66 72 94 / 0.22), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(66 72 94 / 0.22), inset -1px -1px 3px rgb(255 255 255 / 0.94)", "neu-shadow-primary": "3px 4px 8px rgb(66 72 94 / 0.22), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white)", "neu-shadow-primary-hover": "4px 4px 10px rgb(66 72 94 / 0.22), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #dfe1e7 35%, #ebecf0), color-mix(in srgb, #f2f3f5 30%, #ebecf0))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #0768da 68%, black), inset -2px -2px 5px color-mix(in srgb, #0768da 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #b92e43 68%, black), inset -2px -2px 5px color-mix(in srgb, #b92e43 78%, white)", "neu-overlay": "rgb(15 23 42 / 0.28)", "neu-radius-control": "8px", "neu-radius-small": "4px", "neu-accent-ink": "#0965d3", "neu-radius-surface": "12px", "neu-radius-overlay": "12px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #f2f3f5 12%, #ebecf0), #ebecf0)", "neu-fill-primary": "linear-gradient(135deg, #0768da, color-mix(in srgb, #0768da 94%, black))", "neu-selected": "color-mix(in srgb, #0768da 8%, #ebecf0)", "neu-selected-border": "color-mix(in srgb, #0768da 44%, rgb(83 99 123 / 0.18))", "neu-error-text": "color-mix(in srgb, #b92e43 76%, #25264b)", "neu-shadow-hover": "4px 4px 10px rgb(66 72 94 / 0.22), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(66 72 94 / 0.22), 0 3px 8px rgb(66 72 94 / 0.22), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent)" }, "dark": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#242731", "foreground": "#e9f0fa", "card": "#242731", "card-foreground": "#e9f0fa", "popover": "#292d39", "popover-foreground": "#e9f0fa", "primary": "#5aa2ff", "primary-foreground": "#07111f", "secondary": "#2a2e3a", "secondary-foreground": "#e9f0fa", "muted": "#1c1f28", "muted-foreground": "#aab4c8", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23aab4c8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#2b2f3c", "accent-foreground": "#5aa2ff", "destructive": "#ff7685", "destructive-foreground": "#111827", "success": "#40d6ad", "border": "rgb(255 255 255 / 0.10)", "input": "rgb(255 255 255 / 0.12)", "ring": "#5aa2ff", "radius": "12px", "neu-surface": "#242731", "neu-surface-soft": "#2b2f3c", "neu-surface-low": "#1c1f28", "neu-edge": "color-mix(in srgb, #e9f0fa 4%, transparent)", "neu-shadow-dark": "rgb(0 0 0 / 0.34)", "neu-shadow-light": "rgb(255 255 255 / 0.065)", "neu-shadow-raised": "6px 6px 14px rgb(0 0 0 / 0.34), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.065) 94%, transparent)", "neu-shadow-raised-sm": "3px 3px 7px rgb(0 0 0 / 0.34), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 7px rgb(0 0 0 / 0.34), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(0 0 0 / 0.34), inset -1px -1px 3px rgb(255 255 255 / 0.065)", "neu-shadow-primary": "3px 4px 8px rgb(0 0 0 / 0.34), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #5aa2ff 94%, white)", "neu-shadow-primary-hover": "4px 4px 10px rgb(0 0 0 / 0.34), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #5aa2ff 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #1c1f28 35%, #242731), color-mix(in srgb, #2b2f3c 30%, #242731))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #5aa2ff 68%, black), inset -2px -2px 5px color-mix(in srgb, #5aa2ff 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #ff7685 68%, black), inset -2px -2px 5px color-mix(in srgb, #ff7685 78%, white)", "neu-overlay": "rgb(0 0 0 / 0.55)", "neu-radius-control": "8px", "neu-radius-small": "4px", "neu-accent-ink": "#5aa2ff", "neu-radius-surface": "12px", "neu-radius-overlay": "12px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #2b2f3c 12%, #242731), #242731)", "neu-fill-primary": "linear-gradient(135deg, color-mix(in srgb, #5aa2ff 94%, white), #5aa2ff)", "neu-selected": "color-mix(in srgb, #5aa2ff 8%, #242731)", "neu-selected-border": "color-mix(in srgb, #5aa2ff 44%, rgb(255 255 255 / 0.10))", "neu-error-text": "#ff7685", "neu-shadow-hover": "4px 4px 10px rgb(0 0 0 / 0.34), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(0 0 0 / 0.34), 0 3px 8px rgb(0 0 0 / 0.34), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.07) 45%, transparent)" } }, "css": { "@layer base": { "*": { "@apply border-border outline-ring/50": {} }, "body": { "@apply bg-background text-foreground": {}, "font-family": "var(--neu-font-sans)" }, "code, pre, kbd, samp": { "font-family": "var(--neu-font-mono)" } }, "@layer components": { ".neu-raised": { "background": "var(--neu-surface)", "box-shadow": "var(--neu-shadow-raised)" }, ".neu-raised-sm": { "background": "var(--neu-surface)", "box-shadow": "var(--neu-shadow-raised-sm)" }, ".neu-inset": { "background": "var(--neu-surface)", "box-shadow": "var(--neu-shadow-inset)" }, ".neu-primary": { "background": "var(--neu-surface)", "background-image": "var(--neu-fill-raised)", "color": "var(--neu-accent-ink)", "box-shadow": "var(--neu-shadow-raised-sm)" } }, "@media (prefers-reduced-motion: reduce)": { ".neu-raised, .neu-raised-sm, .neu-inset, .neu-primary": { "transition-duration": "0.01ms !important", "animation": "none !important" } } } }, { "name": "utils", "title": "Class name utility", "description": "A Tailwind-aware class name utility that resolves conflicting utilities.", "type": "registry:lib", "dependencies": [ "tailwind-merge" ], "files": [ { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "@lib/utils.ts" } ] }, { "name": "button", "title": "Button", "description": "A tactile neumorphic button with raised and pressed states.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/button.tsx", "type": "registry:ui" } ] }, { "name": "card", "title": "Card", "description": "A composable raised, flat, or inset neumorphic surface.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/card.tsx", "type": "registry:ui" } ] }, { "name": "input", "title": "Input", "description": "An inset neumorphic text input with accessible focus and error states.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/input.tsx", "type": "registry:ui" } ] }, { "name": "badge", "title": "Badge", "description": "A compact neumorphic status label.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/badge.tsx", "type": "registry:ui" } ] }, { "name": "skeleton", "title": "Skeleton", "description": "A softly inset loading placeholder.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/skeleton.tsx", "type": "registry:ui" } ] }, { "name": "tooltip", "title": "Tooltip", "description": "An accessible tooltip with delayed open, Escape dismiss, and portal positioning.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/tooltip.tsx", "type": "registry:ui" } ] }, { "name": "accordion", "title": "Accordion", "description": "A keyboard-accessible disclosure group with inset open states.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/accordion.tsx", "type": "registry:ui" } ] }, { "name": "alert", "title": "Alert", "description": "A raised status message with default, success, and destructive variants.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/alert.tsx", "type": "registry:ui" } ] }, { "name": "avatar", "title": "Avatar", "description": "A resilient profile image with fallback, status badge, and group support.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/avatar.tsx", "type": "registry:ui" } ] }, { "name": "breadcrumb", "title": "Breadcrumb", "description": "A compact path navigation pattern with current-page semantics.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/breadcrumb.tsx", "type": "registry:ui" } ] }, { "name": "checkbox", "title": "Checkbox", "description": "A controlled or uncontrolled checkbox with indeterminate support.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/checkbox.tsx", "type": "registry:ui" } ] }, { "name": "dialog", "title": "Dialog", "description": "An accessible modal surface with focus trapping and dismiss controls.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/dialog.tsx", "type": "registry:ui" } ] }, { "name": "dropdown-menu", "title": "Dropdown Menu", "description": "A complete keyboard-accessible menu with checkbox, radio, and submenu items.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/dropdown-menu.tsx", "type": "registry:ui" } ] }, { "name": "input-group", "title": "Input Group", "description": "A composable inset field with addons, actions, and text or textarea controls.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/input-group.tsx", "type": "registry:ui" } ] }, { "name": "label", "title": "Label", "description": "An accessible form label with disabled-state styling.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/label.tsx", "type": "registry:ui" } ] }, { "name": "pagination", "title": "Pagination", "description": "Raised page controls with active-page and navigation semantics.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/pagination.tsx", "type": "registry:ui" } ] }, { "name": "progress", "title": "Progress", "description": "An accessible inset progress track with a primary fill.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/progress.tsx", "type": "registry:ui" } ] }, { "name": "radio-group", "title": "Radio Group", "description": "A controlled or uncontrolled radio group with horizontal and vertical layouts.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/radio-group.tsx", "type": "registry:ui" } ] }, { "name": "scroll-area", "title": "Scroll Area", "description": "A compact scrollable surface with themed native scrollbars.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/scroll-area.tsx", "type": "registry:ui" } ] }, { "name": "select", "title": "Select", "description": "A native select control styled as an inset neumorphic field.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/select.tsx", "type": "registry:ui" } ] }, { "name": "separator", "title": "Separator", "description": "A horizontal or vertical divider for grouping related content.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/separator.tsx", "type": "registry:ui" } ] }, { "name": "slider", "title": "Slider", "description": "A tactile range control with shadcn-compatible array value callbacks.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/slider.tsx", "type": "registry:ui" } ] }, { "name": "switch", "title": "Switch", "description": "A controlled or uncontrolled switch with clear pressed depth.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/switch.tsx", "type": "registry:ui" } ] }, { "name": "table", "title": "Table", "description": "A responsive data table with headers, captions, and selected row states.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/table.tsx", "type": "registry:ui" } ] }, { "name": "tabs", "title": "Tabs", "description": "Keyboard-accessible tabs with raised active controls and inset lists.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/tabs.tsx", "type": "registry:ui" } ] }, { "name": "textarea", "title": "Textarea", "description": "A resizable inset text area with focus and validation states.", "type": "registry:ui", "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/textarea.tsx", "type": "registry:ui" } ] }, { "name": "style-air", "title": "Air", "description": "The default cool blue Neumorphism UI style with balanced depth and soft controls.", "type": "registry:style", "cssVars": { "light": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#ebecf0", "foreground": "#25264b", "card": "#ebecf0", "card-foreground": "#25264b", "popover": "#ebecf0", "popover-foreground": "#25264b", "primary": "#0768da", "primary-foreground": "#ffffff", "secondary": "#e5e7ed", "secondary-foreground": "#25264b", "muted": "#dfe1e7", "muted-foreground": "#586079", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23586079%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#f2f3f5", "accent-foreground": "#0768da", "destructive": "#b92e43", "destructive-foreground": "#ffffff", "success": "#0a9b78", "border": "rgb(83 99 123 / 0.18)", "input": "rgb(83 99 123 / 0.16)", "ring": "#0768da", "radius": "12px", "neu-surface": "#ebecf0", "neu-surface-soft": "#f2f3f5", "neu-surface-low": "#dfe1e7", "neu-edge": "transparent", "neu-shadow-dark": "rgb(66 72 94 / 0.22)", "neu-shadow-light": "rgb(255 255 255 / 0.94)", "neu-shadow-raised": "6px 6px 14px rgb(66 72 94 / 0.22), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.94) 94%, transparent)", "neu-shadow-raised-sm": "3px 3px 7px rgb(66 72 94 / 0.22), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 7px rgb(66 72 94 / 0.22), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(66 72 94 / 0.22), inset -1px -1px 3px rgb(255 255 255 / 0.94)", "neu-shadow-primary": "3px 4px 8px rgb(66 72 94 / 0.22), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white)", "neu-shadow-primary-hover": "4px 4px 10px rgb(66 72 94 / 0.22), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #dfe1e7 35%, #ebecf0), color-mix(in srgb, #f2f3f5 30%, #ebecf0))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #0768da 68%, black), inset -2px -2px 5px color-mix(in srgb, #0768da 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #b92e43 68%, black), inset -2px -2px 5px color-mix(in srgb, #b92e43 78%, white)", "neu-overlay": "rgb(15 23 42 / 0.28)", "neu-radius-control": "8px", "neu-radius-small": "4px", "neu-accent-ink": "#0965d3", "neu-radius-surface": "12px", "neu-radius-overlay": "12px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #f2f3f5 12%, #ebecf0), #ebecf0)", "neu-fill-primary": "linear-gradient(135deg, #0768da, color-mix(in srgb, #0768da 94%, black))", "neu-selected": "color-mix(in srgb, #0768da 8%, #ebecf0)", "neu-selected-border": "color-mix(in srgb, #0768da 44%, rgb(83 99 123 / 0.18))", "neu-error-text": "color-mix(in srgb, #b92e43 76%, #25264b)", "neu-shadow-hover": "4px 4px 10px rgb(66 72 94 / 0.22), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(66 72 94 / 0.22), 0 3px 8px rgb(66 72 94 / 0.22), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent)" }, "dark": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#242731", "foreground": "#e9f0fa", "card": "#242731", "card-foreground": "#e9f0fa", "popover": "#292d39", "popover-foreground": "#e9f0fa", "primary": "#5aa2ff", "primary-foreground": "#07111f", "secondary": "#2a2e3a", "secondary-foreground": "#e9f0fa", "muted": "#1c1f28", "muted-foreground": "#aab4c8", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23aab4c8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#2b2f3c", "accent-foreground": "#5aa2ff", "destructive": "#ff7685", "destructive-foreground": "#111827", "success": "#40d6ad", "border": "rgb(255 255 255 / 0.10)", "input": "rgb(255 255 255 / 0.12)", "ring": "#5aa2ff", "radius": "12px", "neu-surface": "#242731", "neu-surface-soft": "#2b2f3c", "neu-surface-low": "#1c1f28", "neu-edge": "color-mix(in srgb, #e9f0fa 4%, transparent)", "neu-shadow-dark": "rgb(0 0 0 / 0.34)", "neu-shadow-light": "rgb(255 255 255 / 0.065)", "neu-shadow-raised": "6px 6px 14px rgb(0 0 0 / 0.34), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.065) 94%, transparent)", "neu-shadow-raised-sm": "3px 3px 7px rgb(0 0 0 / 0.34), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 7px rgb(0 0 0 / 0.34), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(0 0 0 / 0.34), inset -1px -1px 3px rgb(255 255 255 / 0.065)", "neu-shadow-primary": "3px 4px 8px rgb(0 0 0 / 0.34), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #5aa2ff 94%, white)", "neu-shadow-primary-hover": "4px 4px 10px rgb(0 0 0 / 0.34), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #5aa2ff 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #1c1f28 35%, #242731), color-mix(in srgb, #2b2f3c 30%, #242731))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #5aa2ff 68%, black), inset -2px -2px 5px color-mix(in srgb, #5aa2ff 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #ff7685 68%, black), inset -2px -2px 5px color-mix(in srgb, #ff7685 78%, white)", "neu-overlay": "rgb(0 0 0 / 0.55)", "neu-radius-control": "8px", "neu-radius-small": "4px", "neu-accent-ink": "#5aa2ff", "neu-radius-surface": "12px", "neu-radius-overlay": "12px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #2b2f3c 12%, #242731), #242731)", "neu-fill-primary": "linear-gradient(135deg, color-mix(in srgb, #5aa2ff 94%, white), #5aa2ff)", "neu-selected": "color-mix(in srgb, #5aa2ff 8%, #242731)", "neu-selected-border": "color-mix(in srgb, #5aa2ff 44%, rgb(255 255 255 / 0.10))", "neu-error-text": "#ff7685", "neu-shadow-hover": "4px 4px 10px rgb(0 0 0 / 0.34), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(0 0 0 / 0.34), 0 3px 8px rgb(0 0 0 / 0.34), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.07) 45%, transparent)" } } }, { "name": "style-lavender", "title": "Lavender", "description": "A low-depth violet Neumorphism UI style with relaxed motion and pill controls.", "type": "registry:style", "cssVars": { "light": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#ebe9f4", "foreground": "#252036", "card": "#ebe9f4", "card-foreground": "#252036", "popover": "#f2eff8", "popover-foreground": "#252036", "primary": "#7557df", "primary-foreground": "#ffffff", "secondary": "#e0ddea", "secondary-foreground": "#252036", "muted": "#ddd9e9", "muted-foreground": "#625970", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23625970%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#f6f3fb", "accent-foreground": "#7557df", "destructive": "#cf5368", "destructive-foreground": "#000000", "success": "#0a9b78", "border": "rgb(111 102 128 / 0.22)", "input": "rgb(111 102 128 / 0.18)", "ring": "#7557df", "radius": "26px", "neu-surface": "#ebe9f4", "neu-surface-soft": "#f6f3fb", "neu-surface-low": "#ddd9e9", "neu-edge": "transparent", "neu-shadow-dark": "rgb(45 32 76 / 0.16)", "neu-shadow-light": "rgb(255 255 255 / 0.96)", "neu-shadow-raised": "3px 3px 8px rgb(45 32 76 / 0.16), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.96) 94%, transparent)", "neu-shadow-raised-sm": "2px 2px 5px rgb(45 32 76 / 0.16), -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 5px rgb(45 32 76 / 0.16), inset -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(45 32 76 / 0.16), inset -1px -1px 3px rgb(255 255 255 / 0.96)", "neu-shadow-primary": "2px 3px 6px rgb(45 32 76 / 0.16), -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #7557df 94%, white)", "neu-shadow-primary-hover": "3px 3px 8px rgb(45 32 76 / 0.16), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.96) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #7557df 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #ddd9e9 35%, #ebe9f4), color-mix(in srgb, #f6f3fb 30%, #ebe9f4))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #7557df 68%, black), inset -2px -2px 5px color-mix(in srgb, #7557df 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #cf5368 68%, black), inset -2px -2px 5px color-mix(in srgb, #cf5368 78%, white)", "neu-overlay": "rgb(15 23 42 / 0.28)", "neu-radius-control": "999px", "neu-radius-small": "4px", "neu-accent-ink": "#6d52ce", "neu-radius-surface": "26px", "neu-radius-overlay": "26px", "neu-duration": "260ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #f6f3fb 12%, #ebe9f4), #ebe9f4)", "neu-fill-primary": "linear-gradient(135deg, #7557df, color-mix(in srgb, #7557df 94%, black))", "neu-selected": "color-mix(in srgb, #7557df 8%, #ebe9f4)", "neu-selected-border": "color-mix(in srgb, #7557df 44%, rgb(111 102 128 / 0.22))", "neu-error-text": "color-mix(in srgb, #cf5368 76%, #252036)", "neu-shadow-hover": "3px 3px 8px rgb(45 32 76 / 0.16), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.96) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(45 32 76 / 0.16), 0 3px 8px rgb(45 32 76 / 0.16), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent)" }, "dark": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#171520", "foreground": "#f1edff", "card": "#1e1a2a", "card-foreground": "#f1edff", "popover": "#1e1a2a", "popover-foreground": "#f1edff", "primary": "#a98cff", "primary-foreground": "#171022", "secondary": "#282237", "secondary-foreground": "#f1edff", "muted": "#131119", "muted-foreground": "#aaa0bd", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23aaa0bd%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#292339", "accent-foreground": "#a98cff", "destructive": "#ff7891", "destructive-foreground": "#111827", "success": "#40d6ad", "border": "rgb(255 255 255 / 0.10)", "input": "rgb(255 255 255 / 0.12)", "ring": "#a98cff", "radius": "26px", "neu-surface": "#1e1a2a", "neu-surface-soft": "#292339", "neu-surface-low": "#131119", "neu-edge": "color-mix(in srgb, #f1edff 4%, transparent)", "neu-shadow-dark": "rgb(0 0 0 / 0.44)", "neu-shadow-light": "rgb(255 255 255 / 0.045)", "neu-shadow-raised": "3px 3px 8px rgb(0 0 0 / 0.44), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.045) 94%, transparent)", "neu-shadow-raised-sm": "2px 2px 5px rgb(0 0 0 / 0.44), -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 5px rgb(0 0 0 / 0.44), inset -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.045) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(0 0 0 / 0.44), inset -1px -1px 3px rgb(255 255 255 / 0.045)", "neu-shadow-primary": "2px 3px 6px rgb(0 0 0 / 0.44), -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #a98cff 94%, white)", "neu-shadow-primary-hover": "3px 3px 8px rgb(0 0 0 / 0.44), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #a98cff 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #131119 35%, #1e1a2a), color-mix(in srgb, #292339 30%, #1e1a2a))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #a98cff 68%, black), inset -2px -2px 5px color-mix(in srgb, #a98cff 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #ff7891 68%, black), inset -2px -2px 5px color-mix(in srgb, #ff7891 78%, white)", "neu-overlay": "rgb(0 0 0 / 0.55)", "neu-radius-control": "999px", "neu-radius-small": "4px", "neu-accent-ink": "#a98cff", "neu-radius-surface": "26px", "neu-radius-overlay": "26px", "neu-duration": "260ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #292339 12%, #1e1a2a), #1e1a2a)", "neu-fill-primary": "linear-gradient(135deg, color-mix(in srgb, #a98cff 94%, white), #a98cff)", "neu-selected": "color-mix(in srgb, #a98cff 8%, #1e1a2a)", "neu-selected-border": "color-mix(in srgb, #a98cff 44%, rgb(255 255 255 / 0.10))", "neu-error-text": "#ff7891", "neu-shadow-hover": "3px 3px 8px rgb(0 0 0 / 0.44), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(0 0 0 / 0.44), 0 3px 8px rgb(0 0 0 / 0.44), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.08) 45%, transparent)" } } }, { "name": "style-sage", "title": "Sage", "description": "A restrained green Neumorphism UI style with subtle top-right light and soft controls.", "type": "registry:style", "cssVars": { "light": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#e7eee9", "foreground": "#1a2b24", "card": "#e7eee9", "card-foreground": "#1a2b24", "popover": "#eef5f0", "popover-foreground": "#1a2b24", "primary": "#23856b", "primary-foreground": "#ffffff", "secondary": "#dbe6de", "secondary-foreground": "#1a2b24", "muted": "#d8e3db", "muted-foreground": "#50665b", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2350665b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#f2f7f3", "accent-foreground": "#23856b", "destructive": "#cf5962", "destructive-foreground": "#000000", "success": "#0a9b78", "border": "rgb(95 116 106 / 0.22)", "input": "rgb(95 116 106 / 0.18)", "ring": "#23856b", "radius": "18px", "neu-surface": "#e7eee9", "neu-surface-soft": "#f2f7f3", "neu-surface-low": "#d8e3db", "neu-edge": "transparent", "neu-shadow-dark": "rgb(26 56 43 / 0.15)", "neu-shadow-light": "rgb(255 255 255 / 0.94)", "neu-shadow-raised": "-3px 3px 8px rgb(26 56 43 / 0.15), 3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.94) 94%, transparent)", "neu-shadow-raised-sm": "-2px 2px 5px rgb(26 56 43 / 0.15), 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-inset": "inset -2px 2px 5px rgb(26 56 43 / 0.15), inset 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)", "neu-shadow-inset-sm": "inset -1px 1px 3px rgb(26 56 43 / 0.15), inset 1px -1px 3px rgb(255 255 255 / 0.94)", "neu-shadow-primary": "-2px 3px 6px rgb(26 56 43 / 0.15), 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset -1px 1px 2px color-mix(in srgb, #23856b 94%, white)", "neu-shadow-primary-hover": "-3px 3px 8px rgb(26 56 43 / 0.15), 3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset -1px 1px 2px color-mix(in srgb, #23856b 94%, white)", "neu-fill-inset": "linear-gradient(225deg, color-mix(in srgb, #d8e3db 35%, #e7eee9), color-mix(in srgb, #f2f7f3 30%, #e7eee9))", "neu-shadow-primary-inset": "inset -2px 2px 5px color-mix(in srgb, #23856b 68%, black), inset 2px -2px 5px color-mix(in srgb, #23856b 78%, white)", "neu-shadow-destructive-inset": "inset -2px 2px 5px color-mix(in srgb, #cf5962 68%, black), inset 2px -2px 5px color-mix(in srgb, #cf5962 78%, white)", "neu-overlay": "rgb(15 23 42 / 0.28)", "neu-radius-control": "8px", "neu-radius-small": "4px", "neu-accent-ink": "#227860", "neu-radius-surface": "18px", "neu-radius-overlay": "18px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(225deg, color-mix(in srgb, #f2f7f3 12%, #e7eee9), #e7eee9)", "neu-fill-primary": "linear-gradient(225deg, #23856b, color-mix(in srgb, #23856b 94%, black))", "neu-selected": "color-mix(in srgb, #23856b 8%, #e7eee9)", "neu-selected-border": "color-mix(in srgb, #23856b 44%, rgb(95 116 106 / 0.22))", "neu-error-text": "color-mix(in srgb, #cf5962 76%, #1a2b24)", "neu-shadow-hover": "-3px 3px 8px rgb(26 56 43 / 0.15), 3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(26 56 43 / 0.15), 0 3px 8px rgb(26 56 43 / 0.15), inset -1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent)" }, "dark": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#121b17", "foreground": "#e9f5ee", "card": "#19251f", "card-foreground": "#e9f5ee", "popover": "#19251f", "popover-foreground": "#e9f5ee", "primary": "#62c8a7", "primary-foreground": "#071710", "secondary": "#213028", "secondary-foreground": "#e9f5ee", "muted": "#101713", "muted-foreground": "#91aa9d", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2391aa9d%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#223129", "accent-foreground": "#62c8a7", "destructive": "#ff7b82", "destructive-foreground": "#111827", "success": "#40d6ad", "border": "rgb(255 255 255 / 0.10)", "input": "rgb(255 255 255 / 0.12)", "ring": "#62c8a7", "radius": "18px", "neu-surface": "#19251f", "neu-surface-soft": "#223129", "neu-surface-low": "#101713", "neu-edge": "color-mix(in srgb, #e9f5ee 4%, transparent)", "neu-shadow-dark": "rgb(0 0 0 / 0.44)", "neu-shadow-light": "rgb(255 255 255 / 0.04)", "neu-shadow-raised": "-3px 3px 8px rgb(0 0 0 / 0.44), 3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.04) 94%, transparent)", "neu-shadow-raised-sm": "-2px 2px 5px rgb(0 0 0 / 0.44), 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent)", "neu-shadow-inset": "inset -2px 2px 5px rgb(0 0 0 / 0.44), inset 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.04) 86%, transparent)", "neu-shadow-inset-sm": "inset -1px 1px 3px rgb(0 0 0 / 0.44), inset 1px -1px 3px rgb(255 255 255 / 0.04)", "neu-shadow-primary": "-2px 3px 6px rgb(0 0 0 / 0.44), 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent), inset -1px 1px 2px color-mix(in srgb, #62c8a7 94%, white)", "neu-shadow-primary-hover": "-3px 3px 8px rgb(0 0 0 / 0.44), 3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent), inset -1px 1px 2px color-mix(in srgb, #62c8a7 94%, white)", "neu-fill-inset": "linear-gradient(225deg, color-mix(in srgb, #101713 35%, #19251f), color-mix(in srgb, #223129 30%, #19251f))", "neu-shadow-primary-inset": "inset -2px 2px 5px color-mix(in srgb, #62c8a7 68%, black), inset 2px -2px 5px color-mix(in srgb, #62c8a7 78%, white)", "neu-shadow-destructive-inset": "inset -2px 2px 5px color-mix(in srgb, #ff7b82 68%, black), inset 2px -2px 5px color-mix(in srgb, #ff7b82 78%, white)", "neu-overlay": "rgb(0 0 0 / 0.55)", "neu-radius-control": "8px", "neu-radius-small": "4px", "neu-accent-ink": "#62c8a7", "neu-radius-surface": "18px", "neu-radius-overlay": "18px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(225deg, color-mix(in srgb, #223129 12%, #19251f), #19251f)", "neu-fill-primary": "linear-gradient(225deg, color-mix(in srgb, #62c8a7 94%, white), #62c8a7)", "neu-selected": "color-mix(in srgb, #62c8a7 8%, #19251f)", "neu-selected-border": "color-mix(in srgb, #62c8a7 44%, rgb(255 255 255 / 0.10))", "neu-error-text": "#ff7b82", "neu-shadow-hover": "-3px 3px 8px rgb(0 0 0 / 0.44), 3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(0 0 0 / 0.44), 0 3px 8px rgb(0 0 0 / 0.44), inset -1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.075) 45%, transparent)" } } }, { "name": "style-clay", "title": "Clay", "description": "A warm sand and coral Neumorphism UI style with compact rounded controls.", "type": "registry:style", "cssVars": { "light": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#efe8df", "foreground": "#35271f", "card": "#efe8df", "card-foreground": "#35271f", "popover": "#f6efe7", "popover-foreground": "#35271f", "primary": "#d46b4c", "primary-foreground": "#2b140d", "secondary": "#e5dbd0", "secondary-foreground": "#35271f", "muted": "#e2d7cb", "muted-foreground": "#6a584d", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236a584d%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#faf4ec", "accent-foreground": "#d46b4c", "destructive": "#c84851", "destructive-foreground": "#ffffff", "success": "#0a9b78", "border": "rgb(128 110 98 / 0.22)", "input": "rgb(128 110 98 / 0.18)", "ring": "#d46b4c", "radius": "14px", "neu-surface": "#efe8df", "neu-surface-soft": "#faf4ec", "neu-surface-low": "#e2d7cb", "neu-edge": "transparent", "neu-shadow-dark": "rgb(76 50 33 / 0.16)", "neu-shadow-light": "rgb(255 255 255 / 0.90)", "neu-shadow-raised": "6px 6px 14px rgb(76 50 33 / 0.16), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.90) 94%, transparent)", "neu-shadow-raised-sm": "3px 3px 7px rgb(76 50 33 / 0.16), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 7px rgb(76 50 33 / 0.16), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(76 50 33 / 0.16), inset -1px -1px 3px rgb(255 255 255 / 0.90)", "neu-shadow-primary": "3px 4px 8px rgb(76 50 33 / 0.16), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #d46b4c 94%, white)", "neu-shadow-primary-hover": "4px 4px 10px rgb(76 50 33 / 0.16), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.90) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #d46b4c 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #e2d7cb 35%, #efe8df), color-mix(in srgb, #faf4ec 30%, #efe8df))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #d46b4c 68%, black), inset -2px -2px 5px color-mix(in srgb, #d46b4c 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #c84851 68%, black), inset -2px -2px 5px color-mix(in srgb, #c84851 78%, white)", "neu-overlay": "rgb(15 23 42 / 0.28)", "neu-radius-control": "6px", "neu-radius-small": "4px", "neu-accent-ink": "#9c533c", "neu-radius-surface": "14px", "neu-radius-overlay": "14px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #faf4ec 12%, #efe8df), #efe8df)", "neu-fill-primary": "linear-gradient(135deg, color-mix(in srgb, #d46b4c 94%, white), #d46b4c)", "neu-selected": "color-mix(in srgb, #d46b4c 8%, #efe8df)", "neu-selected-border": "color-mix(in srgb, #d46b4c 44%, rgb(128 110 98 / 0.22))", "neu-error-text": "color-mix(in srgb, #c84851 76%, #35271f)", "neu-shadow-hover": "4px 4px 10px rgb(76 50 33 / 0.16), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.90) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(76 50 33 / 0.16), 0 3px 8px rgb(76 50 33 / 0.16), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.68) 45%, transparent)" }, "dark": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#211814", "foreground": "#f8eee6", "card": "#2a1f19", "card-foreground": "#f8eee6", "popover": "#2a1f19", "popover-foreground": "#f8eee6", "primary": "#f08b6b", "primary-foreground": "#21110b", "secondary": "#37281f", "secondary-foreground": "#f8eee6", "muted": "#18120f", "muted-foreground": "#b8a093", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8a093%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#382920", "accent-foreground": "#f08b6b", "destructive": "#ff7378", "destructive-foreground": "#111827", "success": "#40d6ad", "border": "rgb(255 255 255 / 0.10)", "input": "rgb(255 255 255 / 0.12)", "ring": "#f08b6b", "radius": "14px", "neu-surface": "#2a1f19", "neu-surface-soft": "#382920", "neu-surface-low": "#18120f", "neu-edge": "color-mix(in srgb, #f8eee6 4%, transparent)", "neu-shadow-dark": "rgb(0 0 0 / 0.46)", "neu-shadow-light": "rgb(255 255 255 / 0.04)", "neu-shadow-raised": "6px 6px 14px rgb(0 0 0 / 0.46), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.04) 94%, transparent)", "neu-shadow-raised-sm": "3px 3px 7px rgb(0 0 0 / 0.46), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent)", "neu-shadow-inset": "inset 2px 2px 7px rgb(0 0 0 / 0.46), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.04) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(0 0 0 / 0.46), inset -1px -1px 3px rgb(255 255 255 / 0.04)", "neu-shadow-primary": "3px 4px 8px rgb(0 0 0 / 0.46), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #f08b6b 94%, white)", "neu-shadow-primary-hover": "4px 4px 10px rgb(0 0 0 / 0.46), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #f08b6b 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #18120f 35%, #2a1f19), color-mix(in srgb, #382920 30%, #2a1f19))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #f08b6b 68%, black), inset -2px -2px 5px color-mix(in srgb, #f08b6b 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #ff7378 68%, black), inset -2px -2px 5px color-mix(in srgb, #ff7378 78%, white)", "neu-overlay": "rgb(0 0 0 / 0.55)", "neu-radius-control": "6px", "neu-radius-small": "4px", "neu-accent-ink": "#f08b6b", "neu-radius-surface": "14px", "neu-radius-overlay": "14px", "neu-duration": "180ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #382920 12%, #2a1f19), #2a1f19)", "neu-fill-primary": "linear-gradient(135deg, color-mix(in srgb, #f08b6b 94%, white), #f08b6b)", "neu-selected": "color-mix(in srgb, #f08b6b 8%, #2a1f19)", "neu-selected-border": "color-mix(in srgb, #f08b6b 44%, rgb(255 255 255 / 0.10))", "neu-error-text": "#ff7378", "neu-shadow-hover": "4px 4px 10px rgb(0 0 0 / 0.46), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.04) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(0 0 0 / 0.46), 0 3px 8px rgb(0 0 0 / 0.46), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.075) 45%, transparent)" } } }, { "name": "style-graphite", "title": "Graphite", "description": "A high-contrast neutral Neumorphism UI style with deep shadows and quick motion.", "type": "registry:style", "cssVars": { "light": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#e6e8eb", "foreground": "#1d232b", "card": "#e6e8eb", "card-foreground": "#1d232b", "popover": "#edf0f2", "popover-foreground": "#1d232b", "primary": "#3f536f", "primary-foreground": "#ffffff", "secondary": "#d9dde1", "secondary-foreground": "#1d232b", "muted": "#d5d9de", "muted-foreground": "#55606b", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355606b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#f1f3f5", "accent-foreground": "#3f536f", "destructive": "#c8545f", "destructive-foreground": "#000000", "success": "#0a9b78", "border": "rgb(98 107 118 / 0.22)", "input": "rgb(98 107 118 / 0.18)", "ring": "#3f536f", "radius": "8px", "neu-surface": "#e6e8eb", "neu-surface-soft": "#f1f3f5", "neu-surface-low": "#d5d9de", "neu-edge": "transparent", "neu-shadow-dark": "rgb(31 39 50 / 0.17)", "neu-shadow-light": "rgb(255 255 255 / 0.94)", "neu-shadow-raised": "8px 8px 18px rgb(31 39 50 / 0.17), -8px -8px 18px color-mix(in srgb, rgb(255 255 255 / 0.94) 94%, transparent)", "neu-shadow-raised-sm": "4px 4px 9px rgb(31 39 50 / 0.17), -4px -4px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-inset": "inset 3px 3px 9px rgb(31 39 50 / 0.17), inset -3px -3px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(31 39 50 / 0.17), inset -1px -1px 3px rgb(255 255 255 / 0.94)", "neu-shadow-primary": "4px 5px 10px rgb(31 39 50 / 0.17), -4px -4px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #3f536f 94%, white)", "neu-shadow-primary-hover": "5px 5px 12px rgb(31 39 50 / 0.17), -5px -5px 12px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #3f536f 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #d5d9de 35%, #e6e8eb), color-mix(in srgb, #f1f3f5 30%, #e6e8eb))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #3f536f 68%, black), inset -2px -2px 5px color-mix(in srgb, #3f536f 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #c8545f 68%, black), inset -2px -2px 5px color-mix(in srgb, #c8545f 78%, white)", "neu-overlay": "rgb(15 23 42 / 0.28)", "neu-radius-control": "6px", "neu-radius-small": "4px", "neu-accent-ink": "#3f536f", "neu-radius-surface": "8px", "neu-radius-overlay": "8px", "neu-duration": "120ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #f1f3f5 12%, #e6e8eb), #e6e8eb)", "neu-fill-primary": "linear-gradient(135deg, #3f536f, color-mix(in srgb, #3f536f 94%, black))", "neu-selected": "color-mix(in srgb, #3f536f 8%, #e6e8eb)", "neu-selected-border": "color-mix(in srgb, #3f536f 44%, rgb(98 107 118 / 0.22))", "neu-error-text": "color-mix(in srgb, #c8545f 76%, #1d232b)", "neu-shadow-hover": "5px 5px 12px rgb(31 39 50 / 0.17), -5px -5px 12px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(31 39 50 / 0.17), 0 3px 8px rgb(31 39 50 / 0.17), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.70) 45%, transparent)" }, "dark": { "neu-font-sans": "\"Pretendard Variable\", Pretendard, sans-serif", "neu-font-mono": "Consolas, monospace", "background": "#111419", "foreground": "#edf1f6", "card": "#181c22", "card-foreground": "#edf1f6", "popover": "#181c22", "popover-foreground": "#edf1f6", "primary": "#b2c2d8", "primary-foreground": "#11161d", "secondary": "#20262e", "secondary-foreground": "#edf1f6", "muted": "#0d1014", "muted-foreground": "#929ca9", "neu-select-arrow": "url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23929ca9%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E\")", "accent": "#222831", "accent-foreground": "#b2c2d8", "destructive": "#ff7885", "destructive-foreground": "#111827", "success": "#40d6ad", "border": "rgb(255 255 255 / 0.10)", "input": "rgb(255 255 255 / 0.12)", "ring": "#b2c2d8", "radius": "8px", "neu-surface": "#181c22", "neu-surface-soft": "#222831", "neu-surface-low": "#0d1014", "neu-edge": "color-mix(in srgb, #edf1f6 4%, transparent)", "neu-shadow-dark": "rgb(0 0 0 / 0.48)", "neu-shadow-light": "rgb(255 255 255 / 0.045)", "neu-shadow-raised": "8px 8px 18px rgb(0 0 0 / 0.48), -8px -8px 18px color-mix(in srgb, rgb(255 255 255 / 0.045) 94%, transparent)", "neu-shadow-raised-sm": "4px 4px 9px rgb(0 0 0 / 0.48), -4px -4px 9px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent)", "neu-shadow-inset": "inset 3px 3px 9px rgb(0 0 0 / 0.48), inset -3px -3px 9px color-mix(in srgb, rgb(255 255 255 / 0.045) 86%, transparent)", "neu-shadow-inset-sm": "inset 1px 1px 3px rgb(0 0 0 / 0.48), inset -1px -1px 3px rgb(255 255 255 / 0.045)", "neu-shadow-primary": "4px 5px 10px rgb(0 0 0 / 0.48), -4px -4px 9px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #b2c2d8 94%, white)", "neu-shadow-primary-hover": "5px 5px 12px rgb(0 0 0 / 0.48), -5px -5px 12px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #b2c2d8 94%, white)", "neu-fill-inset": "linear-gradient(135deg, color-mix(in srgb, #0d1014 35%, #181c22), color-mix(in srgb, #222831 30%, #181c22))", "neu-shadow-primary-inset": "inset 2px 2px 5px color-mix(in srgb, #b2c2d8 68%, black), inset -2px -2px 5px color-mix(in srgb, #b2c2d8 78%, white)", "neu-shadow-destructive-inset": "inset 2px 2px 5px color-mix(in srgb, #ff7885 68%, black), inset -2px -2px 5px color-mix(in srgb, #ff7885 78%, white)", "neu-overlay": "rgb(0 0 0 / 0.55)", "neu-radius-control": "6px", "neu-radius-small": "4px", "neu-accent-ink": "#b2c2d8", "neu-radius-surface": "8px", "neu-radius-overlay": "8px", "neu-duration": "120ms", "neu-fill-raised": "linear-gradient(135deg, color-mix(in srgb, #222831 12%, #181c22), #181c22)", "neu-fill-primary": "linear-gradient(135deg, color-mix(in srgb, #b2c2d8 94%, white), #b2c2d8)", "neu-selected": "color-mix(in srgb, #b2c2d8 8%, #181c22)", "neu-selected-border": "color-mix(in srgb, #b2c2d8 44%, rgb(255 255 255 / 0.10))", "neu-error-text": "#ff7885", "neu-shadow-hover": "5px 5px 12px rgb(0 0 0 / 0.48), -5px -5px 12px color-mix(in srgb, rgb(255 255 255 / 0.045) 84%, transparent)", "neu-shadow-floating": "0 16px 40px rgb(0 0 0 / 0.48), 0 3px 8px rgb(0 0 0 / 0.48), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.08) 45%, transparent)" } } }, { "name": "alert-dialog", "title": "Alert Dialog", "description": "An explicit confirmation for an irreversible action.", "type": "registry:ui", "categories": [ "actions-overlays" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/button" ], "files": [ { "path": "src/components/ui/alert-dialog.tsx", "type": "registry:ui" } ] }, { "name": "popover", "title": "Popover", "description": "An anchored panel for contextual settings.", "type": "registry:ui", "categories": [ "actions-overlays" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/popover.tsx", "type": "registry:ui" } ] }, { "name": "hover-card", "title": "Hover Card", "description": "A supplemental preview of a link destination.", "type": "registry:ui", "categories": [ "actions-overlays" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/hover-card.tsx", "type": "registry:ui" } ] }, { "name": "sheet", "title": "Sheet", "description": "A scrollable task panel attached to a viewport edge.", "type": "registry:ui", "categories": [ "actions-overlays" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/button", "@neumorphism-ui/dialog" ], "files": [ { "path": "src/components/ui/sheet.tsx", "type": "registry:ui" } ] }, { "name": "collapsible", "title": "Collapsible", "description": "Reveal or hide one group of optional settings.", "type": "registry:ui", "categories": [ "navigation-disclosure" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/collapsible.tsx", "type": "registry:ui" } ] }, { "name": "toggle", "title": "Toggle", "description": "A standalone button with a persistent pressed state.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/toggle.tsx", "type": "registry:ui" } ] }, { "name": "toggle-group", "title": "Toggle Group", "description": "A keyboard-navigable group of single or multiple selections.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/toggle" ], "files": [ { "path": "src/components/ui/toggle-group.tsx", "type": "registry:ui" } ] }, { "name": "toolbar", "title": "Toolbar", "description": "An arrow-key-navigable set of document actions.", "type": "registry:ui", "categories": [ "navigation-disclosure" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/toolbar.tsx", "type": "registry:ui" } ] }, { "name": "field", "title": "Field", "description": "Connect a control with its label, description, and validation errors.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/field.tsx", "type": "registry:ui" } ] }, { "name": "fieldset", "title": "Fieldset", "description": "Group related controls under a shared legend and disabled state.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/fieldset.tsx", "type": "registry:ui" } ] }, { "name": "form", "title": "Form", "description": "A native form coordinating field validation and submission errors.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/form.tsx", "type": "registry:ui" } ] }, { "name": "number-field", "title": "Number Field", "description": "Numeric entry with bounds, steps, and locale-aware formatting.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/number-field.tsx", "type": "registry:ui" } ] }, { "name": "meter", "title": "Meter", "description": "Represent a measurement within a known range.", "type": "registry:ui", "categories": [ "data-feedback" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/meter.tsx", "type": "registry:ui" } ] }, { "name": "combobox", "title": "Combobox", "description": "Searchable selection with filtering, empty results, and keyboard interaction.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/combobox.tsx", "type": "registry:ui" } ] }, { "name": "calendar", "title": "Calendar", "description": "Single, multiple and range selection with keyboard navigation and neumorphic selected days.", "type": "registry:ui", "dependencies": [ "@daypicker/react@^10.0.0" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/calendar.tsx", "type": "registry:ui" } ] }, { "name": "date-picker", "title": "Date Picker", "description": "A controlled date-only picker with local form serialization, clearing and constrained dates.", "type": "registry:ui", "dependencies": [ "@daypicker/react@^10.0.0" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/button", "@neumorphism-ui/calendar", "@neumorphism-ui/popover" ], "files": [ { "path": "src/components/ui/date-picker.tsx", "type": "registry:ui" } ] }, { "name": "data-table", "title": "Data Table", "description": "Semantic TanStack table rendering, sortable headers and pagination; the application owns data and state.", "type": "registry:ui", "dependencies": [ "@tanstack/react-table@^8.21.3" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/button", "@neumorphism-ui/select", "@neumorphism-ui/table" ], "files": [ { "path": "src/components/ui/data-table.tsx", "type": "registry:ui" } ] }, { "name": "toast", "title": "Toast", "description": "Accessible notifications with manual dismissal, timeout and undo actions, using Base UI.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/toast.tsx", "type": "registry:ui" } ] }, { "name": "navigation-menu", "title": "Navigation Menu", "description": "Keyboard-aware website navigation with inset open states and floating panels.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/navigation-menu.tsx", "type": "registry:ui" } ] }, { "name": "menubar", "title": "Menubar", "description": "Application command menus with shared menu parts and roving keyboard focus.", "type": "registry:ui", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/dropdown-menu" ], "files": [ { "path": "src/components/ui/menubar.tsx", "type": "registry:ui" } ] }, { "name": "template-settings", "title": "Settings and profile workspace", "description": "Profile editing, validation, dirty state, asynchronous save/retry and discard, with a clearly labeled local example.", "type": "registry:block", "categories": [ "template" ], "registryDependencies": [ "@neumorphism-ui/button", "@neumorphism-ui/field", "@neumorphism-ui/form", "@neumorphism-ui/input", "@neumorphism-ui/textarea", "@neumorphism-ui/switch", "@neumorphism-ui/alert", "@neumorphism-ui/toast" ], "files": [ { "path": "src/components/blocks/settings-panel.tsx", "type": "registry:component", "target": "@components/blocks/settings-panel.tsx" } ] }, { "name": "template-data-manager", "title": "Data management workspace", "description": "Search/filter/sort/select, asynchronous create/edit and confirmed deletion, with safe local state updates and a local example.", "type": "registry:block", "categories": [ "template" ], "dependencies": [ "@tanstack/react-table", "@daypicker/react" ], "registryDependencies": [ "@neumorphism-ui/button", "@neumorphism-ui/checkbox", "@neumorphism-ui/input", "@neumorphism-ui/select", "@neumorphism-ui/field", "@neumorphism-ui/form", "@neumorphism-ui/date-picker", "@neumorphism-ui/data-table", "@neumorphism-ui/sheet", "@neumorphism-ui/alert-dialog", "@neumorphism-ui/alert", "@neumorphism-ui/menubar", "@neumorphism-ui/navigation-menu", "@neumorphism-ui/toast" ], "files": [ { "path": "src/components/blocks/data-manager.tsx", "type": "registry:component", "target": "@components/blocks/data-manager.tsx" }, { "path": "src/components/blocks/data-manager-model.ts", "type": "registry:component", "target": "@components/blocks/data-manager-model.ts" } ] }, { "name": "chart", "title": "Chart", "description": "Responsive chart surfaces with exact-data disclosure and styled tooltips. Compose Recharts directly.", "type": "registry:ui", "dependencies": [ "recharts@3.10.1", "react-is@19.2.8" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/chart.tsx", "type": "registry:ui" } ] }, { "name": "analytics-model", "title": "Analytics model", "description": "Validated date-only reporting, integer cents, weighted rates and exact-data export.", "type": "registry:lib", "files": [ { "path": "src/lib/analytics-model.ts", "type": "registry:lib", "target": "@lib/analytics-model.ts" }, { "path": "src/lib/analytics-copy.ts", "type": "registry:lib", "target": "@lib/analytics-copy.ts" } ] }, { "name": "chart-revenue", "title": "Revenue against target", "description": "Revenue against target with explicit scales, localized summaries and an exact data table.", "type": "registry:block", "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/analytics-model", "@neumorphism-ui/checkbox" ], "files": [ { "path": "src/components/blocks/revenue-chart.tsx", "type": "registry:component", "target": "@components/blocks/revenue-chart.tsx" } ] }, { "name": "chart-channel", "title": "Acquisition mix", "description": "Acquisition mix with explicit scales, localized summaries and an exact data table.", "type": "registry:block", "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/analytics-model", "@neumorphism-ui/select" ], "files": [ { "path": "src/components/blocks/channel-chart.tsx", "type": "registry:component", "target": "@components/blocks/channel-chart.tsx" } ] }, { "name": "chart-conversion", "title": "Visit conversion", "description": "Visit conversion with explicit scales, localized summaries and an exact data table.", "type": "registry:block", "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/analytics-model" ], "files": [ { "path": "src/components/blocks/conversion-chart.tsx", "type": "registry:component", "target": "@components/blocks/conversion-chart.tsx" } ] }, { "name": "template-analytics", "title": "Analytics dashboard", "description": "Source-owned read-only analytics with reporting windows, channels, three charts, KPI summaries and CSV export.", "type": "registry:block", "registryDependencies": [ "@neumorphism-ui/analytics-model", "@neumorphism-ui/chart-revenue", "@neumorphism-ui/chart-channel", "@neumorphism-ui/chart-conversion", "@neumorphism-ui/button", "@neumorphism-ui/select", "@neumorphism-ui/checkbox", "@neumorphism-ui/alert" ], "files": [ { "path": "src/components/blocks/analytics-dashboard.tsx", "type": "registry:component", "target": "@components/blocks/analytics-dashboard.tsx" }, { "path": "src/components/blocks/analytics-demo.ts", "type": "registry:component", "target": "@components/blocks/analytics-demo.ts" } ] }, { "name": "command", "title": "Command", "description": "A searchable command palette with keyboard navigation, groups, empty state and dialog composition.", "type": "registry:ui", "categories": [ "navigation-disclosure" ], "dependencies": [ "cmdk@^1.1.1" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/dialog" ], "files": [ { "path": "src/components/ui/command.tsx", "type": "registry:ui" } ] }, { "name": "context-menu", "title": "Context Menu", "description": "A pointer-positioned menu with checkbox, radio, submenu, disabled and destructive states.", "type": "registry:ui", "categories": [ "actions-overlays" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/context-menu.tsx", "type": "registry:ui" } ] }, { "name": "drawer", "title": "Drawer", "description": "A swipeable bottom or side task panel built on Base UI Drawer.", "type": "registry:ui", "categories": [ "actions-overlays" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/drawer.tsx", "type": "registry:ui" } ] }, { "name": "input-otp", "title": "Input OTP", "description": "A paste-friendly one-time-code input with accessible visual slots.", "type": "registry:ui", "categories": [ "forms-selection" ], "dependencies": [ "input-otp@^1.4.2" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/input-otp.tsx", "type": "registry:ui" } ] }, { "name": "carousel", "title": "Carousel", "description": "A touch and keyboard navigable content carousel powered by Embla.", "type": "registry:ui", "categories": [ "navigation-disclosure" ], "dependencies": [ "embla-carousel-react@^8.6.0" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/button" ], "files": [ { "path": "src/components/ui/carousel.tsx", "type": "registry:ui" } ] }, { "name": "resizable", "title": "Resizable", "description": "Accessible split panels with pointer and keyboard resizing.", "type": "registry:ui", "categories": [ "navigation-disclosure" ], "dependencies": [ "react-resizable-panels@^4.12.2" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/resizable.tsx", "type": "registry:ui" } ] }, { "name": "sidebar", "title": "Sidebar", "description": "Responsive application navigation with desktop collapse, mobile Sheet, keyboard shortcut and menu primitives.", "type": "registry:ui", "categories": [ "navigation-disclosure" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "@neumorphism-ui/utils", "@neumorphism-ui/button", "@neumorphism-ui/sheet", "@neumorphism-ui/tooltip" ], "files": [ { "path": "src/components/ui/sidebar.tsx", "type": "registry:ui" }, { "path": "src/hooks/use-mobile.ts", "type": "registry:hook", "target": "@hooks/use-mobile.ts" } ] }, { "name": "image-card", "title": "Image Card", "description": "A semantic image and caption surface with source-owned presentation.", "type": "registry:ui", "categories": [ "data-feedback" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/image-card.tsx", "type": "registry:ui" } ] }, { "name": "marquee", "title": "Marquee", "description": "A pausable repeating information strip with reduced-motion support.", "type": "registry:ui", "categories": [ "data-feedback" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/ui/marquee.tsx", "type": "registry:ui" } ] }, { "name": "template-link-hub", "title": "Link hub workspace", "description": "A creator or team profile with grouped destinations, filtering, external-link semantics and contact copy recovery.", "type": "registry:block", "categories": [ "template" ], "registryDependencies": [ "@neumorphism-ui/button", "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/blocks/link-hub.tsx", "type": "registry:component", "target": "@components/blocks/link-hub.tsx" } ] }, { "name": "template-portfolio", "title": "Portfolio workspace", "description": "A data-driven portfolio with project case studies, outcomes and contact links.", "type": "registry:block", "categories": [ "template" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/blocks/portfolio.tsx", "type": "registry:component", "target": "@components/blocks/portfolio.tsx" } ] }, { "name": "template-blog", "title": "Blog archive workspace", "description": "A data-driven blog archive with search, topic filters, sorting and accessible empty states.", "type": "registry:block", "categories": [ "template" ], "registryDependencies": [ "@neumorphism-ui/button", "@neumorphism-ui/input", "@neumorphism-ui/select", "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/blocks/blog.tsx", "type": "registry:component", "target": "@components/blocks/blog.tsx" } ] }, { "name": "template-cms", "title": "Local CMS workspace", "description": "A local content editor with search, status filters, dirty state, save recovery and preview.", "type": "registry:block", "categories": [ "template" ], "registryDependencies": [ "@neumorphism-ui/alert", "@neumorphism-ui/badge", "@neumorphism-ui/button", "@neumorphism-ui/input", "@neumorphism-ui/switch", "@neumorphism-ui/textarea", "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/blocks/cms.tsx", "type": "registry:component", "target": "@components/blocks/cms.tsx" } ] }, { "name": "chart-build-duration", "title": "Build duration", "description": "Paired cold and cached build timings with a budget reference.", "type": "registry:block", "categories": [ "chart" ], "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/select" ], "files": [ { "path": "src/components/blocks/build-duration-chart.tsx", "type": "registry:component", "target": "@components/blocks/build-duration-chart.tsx" } ] }, { "name": "chart-service-latency", "title": "Service latency", "description": "p50 and p95 service latency against an explicit p95 budget.", "type": "registry:block", "categories": [ "chart" ], "registryDependencies": [ "@neumorphism-ui/chart" ], "files": [ { "path": "src/components/blocks/service-latency-chart.tsx", "type": "registry:component", "target": "@components/blocks/service-latency-chart.tsx" } ] }, { "name": "chart-release-activity", "title": "Release activity", "description": "New installs and updates by release with count and share views.", "type": "registry:block", "categories": [ "chart" ], "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/select" ], "files": [ { "path": "src/components/blocks/release-activity-chart.tsx", "type": "registry:component", "target": "@components/blocks/release-activity-chart.tsx" } ] }, { "name": "chart-delivery-capacity", "title": "Delivery capacity", "description": "Planned versus delivered work with signed variance.", "type": "registry:block", "categories": [ "chart" ], "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/select" ], "files": [ { "path": "src/components/blocks/delivery-capacity-chart.tsx", "type": "registry:component", "target": "@components/blocks/delivery-capacity-chart.tsx" } ] }, { "name": "chart-install-diagnostics", "title": "Install diagnostics", "description": "Sequential installation stage durations with unit switching.", "type": "registry:block", "categories": [ "chart" ], "registryDependencies": [ "@neumorphism-ui/chart", "@neumorphism-ui/select" ], "files": [ { "path": "src/components/blocks/install-diagnostics-chart.tsx", "type": "registry:component", "target": "@components/blocks/install-diagnostics-chart.tsx" } ] }, { "name": "template-blog-post", "title": "Blog post workspace", "description": "A static data-driven article renderer with sections, metadata, list content and return navigation.", "type": "registry:block", "categories": [ "template" ], "registryDependencies": [ "@neumorphism-ui/utils" ], "files": [ { "path": "src/components/blocks/blog-post.tsx", "type": "registry:component", "target": "@components/blocks/blog-post.tsx" } ] } ] }