{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "homepage": "https://blode.co/ui",
  "items": [
    {
      "name": "ui",
      "type": "registry:base",
      "title": "Blode UI",
      "description": "Blode UI design-system base built on Base UI.",
      "dependencies": [
        "@base-ui/react",
        "tw-animate-css",
        "class-variance-authority",
        "blode-icons-react"
      ],
      "registryDependencies": ["utils"],
      "cssVars": {
        "theme": {
          "field-height": "48px",
          "field-height-sm": "40px",
          "field-padding-x": "1rem",
          "field-padding-y": "12px",
          "field-radius": "var(--radius-2xl)",
          "radius-2xl": "calc(var(--radius) + 8px)",
          "radius-3xl": "calc(var(--radius) + 12px)",
          "radius-4xl": "calc(var(--radius) + 16px)",
          "radius-md": "calc(var(--radius) - 2px)",
          "radius-sm": "calc(var(--radius) - 4px)",
          "radius-xl": "calc(var(--radius) + 4px)",
          "shadow-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
          "shadow-lg": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 1px 1px 0.5px rgba(51, 51, 51, 0.04), 0 3px 3px -1.5px rgba(51, 51, 51, 0.02), 0 6px 6px -3px rgba(51, 51, 51, 0.04), 0 12px 12px -6px rgba(51, 51, 51, 0.04), 0 24px 24px -12px rgba(51, 51, 51, 0.04), 0 48px 48px -24px rgba(51, 51, 51, 0.04), 0 96px 96px -32px rgba(51, 51, 51, 0.06), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06)",
          "shadow-md": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 1px 1px 0.5px rgba(51, 51, 51, 0.04), 0 3px 3px -1.5px rgba(51, 51, 51, 0.02), 0 6px 6px -3px rgba(51, 51, 51, 0.04), 0 12px 12px -6px rgba(51, 51, 51, 0.04), 0 24px 24px -12px rgba(51, 51, 51, 0.04), 0 48px 48px -24px rgba(51, 51, 51, 0.04), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06)",
          "shadow-popover": "0 24px 40px -12px oklch(0.255 0.078 116.06 / 0.08), 0 16px 28px -8px oklch(0.255 0.078 116.06 / 0.04), 0 4px 6px -2px oklch(0.255 0.078 116.06 / 0.04), 0 0 2px 0 oklch(0.255 0.078 116.06 / 0.04), 0 0 0 1px oklch(0.255 0.078 116.06 / 0.04)",
          "shadow-sm": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 16px 8px -8px rgba(51, 51, 51, 0.01), 0 12px 6px -6px rgba(51, 51, 51, 0.02), 0 5px 5px -2.5px rgba(51, 51, 51, 0.08), 0 1px 3px -1.5px rgba(51, 51, 51, 0.16), inset 0 -0.5px 0.5px rgba(51, 51, 51, 0.08)",
          "shadow-soft": "0 15px 50px 0 rgba(27, 32, 50, 0.1)",
          "shadow-xs": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 2px 4px rgba(51, 51, 51, 0.04), 0 1px 2px rgba(51, 51, 51, 0.04), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06)",
          "textarea-min-height": "70px"
        },
        "light": {
          "code": "oklch(0.98 0 0)",
          "code-foreground": "oklch(0.145 0 0)",
          "input-hover": "oklch(0.87 0 0)",
          "overlay": "oklch(0.832 0.015 251.2 / 0.7)",
          "placeholder-foreground": "oklch(0.556 0 0)",
          "success": "oklch(0.527 0.154 150.069)",
          "success-foreground": "oklch(1 0 0)",
          "surface": "oklch(0.98 0 0)",
          "surface-foreground": "oklch(0.145 0 0)",
          "warning": "oklch(0.681 0.162 75.834)",
          "warning-foreground": "oklch(0.286 0.066 53.813)"
        },
        "dark": {
          "code": "oklch(0.2 0 0)",
          "code-foreground": "oklch(0.708 0 0)",
          "input-hover": "oklch(1 0 0 / 25%)",
          "overlay": "oklch(0.326 0.03 258.3 / 0.7)",
          "placeholder-foreground": "oklch(0.708 0 0)",
          "success": "oklch(0.723 0.219 149.579)",
          "success-foreground": "oklch(0.266 0.065 152.934)",
          "surface": "oklch(0.2 0 0)",
          "surface-foreground": "oklch(0.708 0 0)",
          "warning": "oklch(0.795 0.184 86.047)",
          "warning-foreground": "oklch(0.286 0.066 53.813)"
        }
      },
      "css": {
        "@media (prefers-reduced-motion: reduce)": {
          "*, *::before, *::after": {
            "animation-duration": "0.01ms !important",
            "animation-iteration-count": "1 !important",
            "scroll-behavior": "auto !important",
            "transition-duration": "0.01ms !important"
          }
        },
        "@utility tabular-figures": {
          "font-family": "var(--font-mono)",
          "font-variant-numeric": "tabular-nums"
        }
      },
      "config": {
        "tailwind": {
          "baseColor": "neutral",
          "cssVariables": true
        },
        "iconLibrary": "blode-icons-react",
        "registries": {
          "@blode": "https://blode.co/ui/r/{name}.json"
        }
      }
    },
    {
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "A vertically stacked set of interactive headings that reveal or hide associated content.",
      "dependencies": ["@base-ui/react", "motion"],
      "files": [
        {
          "path": "registry/default/ui/accordion.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "add-to-homescreen",
      "type": "registry:ui",
      "title": "Add to Homescreen",
      "description": "A sheet of platform-aware instructions for installing a web app to the home screen.",
      "registryDependencies": [
        "button",
        "sheet",
        "@blode/copy-button",
        "@blode/use-install-prompt"
      ],
      "files": [
        {
          "path": "registry/default/ui/add-to-homescreen.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "alert",
      "type": "registry:ui",
      "title": "Alert",
      "description": "A callout that displays a short, important message to attract attention.",
      "files": [
        {
          "path": "registry/default/ui/alert.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "alert-dialog",
      "type": "registry:ui",
      "title": "Alert Dialog",
      "description": "A modal dialog that interrupts the user with important content and expects a response.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/alert-dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "aspect-ratio",
      "type": "registry:ui",
      "title": "Aspect Ratio",
      "description": "A component that maintains a consistent width-to-height ratio.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/aspect-ratio.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "autocomplete",
      "type": "registry:ui",
      "title": "Autocomplete",
      "description": "An input that suggests matching values while typing.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/autocomplete.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "avatar",
      "type": "registry:ui",
      "title": "Avatar",
      "description": "An image element with a fallback for representing the user.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/avatar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bar-list",
      "type": "registry:ui",
      "title": "Bar List",
      "description": "A compact comparison list that visualises values as horizontal bars.",
      "files": [
        {
          "path": "registry/default/ui/bar-list.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "A small status indicator for labelling and categorising items.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/badge.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "breadcrumb",
      "type": "registry:ui",
      "title": "Breadcrumb",
      "description": "A navigation aid that shows the current page location within a hierarchy.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/breadcrumb.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bulk-action-bar",
      "type": "registry:ui",
      "title": "Bulk Action Bar",
      "description": "A sticky bar that surfaces actions for the currently selected rows.",
      "dependencies": ["blode-icons-react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/bulk-action-bar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "An interactive element that triggers an action when clicked.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["spinner"],
      "files": [
        {
          "path": "registry/default/ui/button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "button-group",
      "type": "registry:ui",
      "title": "Button Group",
      "description": "A container that groups related buttons together with shared styling.",
      "registryDependencies": ["button", "separator"],
      "files": [
        {
          "path": "registry/default/ui/button-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "calendar",
      "type": "registry:ui",
      "title": "Calendar",
      "description": "A date field component that allows users to pick dates.",
      "dependencies": ["react-day-picker@latest", "date-fns"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/calendar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "A container for grouping related content and actions.",
      "files": [
        {
          "path": "registry/default/ui/card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "carousel",
      "type": "registry:ui",
      "title": "Carousel",
      "description": "A slideshow component for cycling through a set of content.",
      "dependencies": ["embla-carousel-react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/carousel.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "circular-progress",
      "type": "registry:ui",
      "title": "Circular Progress",
      "description": "A circular indicator that shows the progress of a task.",
      "files": [
        {
          "path": "registry/default/ui/circular-progress.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "checkbox",
      "type": "registry:ui",
      "title": "Checkbox",
      "description": "A control that allows the user to toggle between checked and unchecked states.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/checkbox.tsx",
          "type": "registry:ui"
        },
        {
          "path": "registry/default/ui/checkbox.css",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "checkbox-group",
      "type": "registry:ui",
      "title": "Checkbox Group",
      "description": "A grouped set of related checkboxes managed with shared state.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["checkbox"],
      "files": [
        {
          "path": "registry/default/ui/checkbox-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "collapsible",
      "type": "registry:ui",
      "title": "Collapsible",
      "description": "An interactive component that expands and collapses a panel of content.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/collapsible.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "color-picker",
      "type": "registry:ui",
      "title": "Color Picker",
      "description": "A saturation area, hue slider, hex input and suggested swatches for choosing a color.",
      "dependencies": ["@base-ui/react", "blode-icons-react"],
      "registryDependencies": ["button", "input", "popover", "separator"],
      "files": [
        {
          "path": "registry/default/ui/color-picker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "currency-input",
      "type": "registry:ui",
      "title": "Currency Input",
      "description": "A formatted input field for entering monetary values.",
      "dependencies": ["blode-icons-react", "react-currency-input-field"],
      "files": [
        {
          "path": "registry/default/ui/currency-input.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "combobox",
      "type": "registry:ui",
      "title": "Combobox",
      "description": "An autocomplete input that combines a text field with a filterable dropdown list.",
      "dependencies": ["@base-ui/react", "blode-icons-react"],
      "registryDependencies": ["button", "input-group"],
      "files": [
        {
          "path": "registry/default/ui/combobox.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "font-picker",
      "type": "registry:ui",
      "title": "Font Picker",
      "description": "A searchable picker for Google Fonts with live previews.",
      "dependencies": ["blode-icons-react"],
      "registryDependencies": [
        "@blode/button",
        "@blode/combobox",
        "@blode/spinner",
        "@blode/google-fonts"
      ],
      "files": [
        {
          "path": "registry/default/ui/font-picker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "image-comparison",
      "type": "registry:ui",
      "title": "Image Comparison",
      "description": "A draggable slider that wipes between a before and after image.",
      "dependencies": ["blode-icons-react", "class-variance-authority"],
      "files": [
        {
          "path": "registry/default/ui/image-comparison.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "multi-combobox",
      "type": "registry:ui",
      "title": "Multi Combobox",
      "description": "A combobox that allows selecting multiple items with tag-style badges.",
      "dependencies": ["@base-ui/react", "downshift", "lodash", "blode-icons-react"],
      "registryDependencies": ["badge"],
      "files": [
        {
          "path": "registry/default/ui/multi-combobox.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "command",
      "type": "registry:ui",
      "title": "Command",
      "description": "A command palette for fast, keyboard-driven searching and navigation.",
      "dependencies": ["cmdk"],
      "registryDependencies": ["dialog"],
      "files": [
        {
          "path": "registry/default/ui/command.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "context-menu",
      "type": "registry:ui",
      "title": "Context Menu",
      "description": "A menu that appears on right-click, providing contextual actions.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/context-menu.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "copy-button",
      "type": "registry:ui",
      "title": "Copy Button",
      "description": "A button that copies text to the clipboard with animated feedback.",
      "dependencies": ["blode-icons-react", "motion"],
      "registryDependencies": ["button", "@blode/use-copy-to-clipboard"],
      "files": [
        {
          "path": "registry/default/ui/copy-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dialog",
      "type": "registry:ui",
      "title": "Dialog",
      "description": "A modal window that overlays the main content and requires user interaction.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "drawer",
      "type": "registry:ui",
      "title": "Drawer",
      "description": "A panel that slides in from the edge of the screen.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/drawer.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dropdown-menu",
      "type": "registry:ui",
      "title": "Dropdown Menu",
      "description": "A menu that opens from a trigger button, displaying a list of actions.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/dropdown-menu.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "empty",
      "type": "registry:ui",
      "title": "Empty",
      "description": "A placeholder displayed when there is no content or data to show.",
      "files": [
        {
          "path": "registry/default/ui/empty.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "field",
      "type": "registry:ui",
      "title": "Field",
      "description": "A form field wrapper that pairs a label, input, and helper text.",
      "registryDependencies": ["label", "separator"],
      "files": [
        {
          "path": "registry/default/ui/field.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "form",
      "type": "registry:ui",
      "title": "Form",
      "description": "A form component with validation powered by React Hook Form and Zod.",
      "dependencies": ["@base-ui/react", "@hookform/resolvers", "zod", "react-hook-form"],
      "registryDependencies": ["button", "label"],
      "files": [
        {
          "path": "registry/default/ui/form.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "hover-card",
      "type": "registry:ui",
      "title": "Hover Card",
      "description": "A popup card that appears when hovering over a trigger element.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/hover-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "A text input field for capturing user data.",
      "dependencies": ["blode-icons-react"],
      "files": [
        {
          "path": "registry/default/ui/input.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-group",
      "type": "registry:ui",
      "title": "Input Group",
      "description": "A wrapper that combines an input with addons like icons or buttons.",
      "registryDependencies": ["button", "input", "textarea"],
      "files": [
        {
          "path": "registry/default/ui/input-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-otp",
      "type": "registry:ui",
      "title": "Input OTP",
      "description": "A one-time password input with individual character fields.",
      "dependencies": ["input-otp"],
      "files": [
        {
          "path": "registry/default/ui/input-otp.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "item",
      "type": "registry:ui",
      "title": "Item",
      "description": "A flexible list item component for menus, settings, and data rows.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["separator"],
      "files": [
        {
          "path": "registry/default/ui/item.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "label",
      "type": "registry:ui",
      "title": "Label",
      "description": "An accessible label that associates text with a form control.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/label.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "menubar",
      "type": "registry:ui",
      "title": "Menubar",
      "description": "A horizontal menu bar with dropdown menus, commonly used for application navigation.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/menubar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "meter",
      "type": "registry:ui",
      "title": "Meter",
      "description": "A meter that shows a scalar value within a bounded range.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/meter.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "navigation-menu",
      "type": "registry:ui",
      "title": "Navigation Menu",
      "description": "A responsive navigation component with support for dropdown panels.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/navigation-menu.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "number-field",
      "type": "registry:ui",
      "title": "Number Field",
      "description": "A numeric input with increment, decrement, and scrubbing interactions.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/number-field.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "pagination",
      "type": "registry:ui",
      "title": "Pagination",
      "description": "A navigation component for paging through content across multiple pages.",
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/pagination.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "password-input",
      "type": "registry:ui",
      "title": "Password Input",
      "description": "A password input with a toggle button to show or hide the password.",
      "dependencies": ["blode-icons-react"],
      "registryDependencies": ["input"],
      "files": [
        {
          "path": "registry/default/ui/password-input.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "phone-input",
      "type": "registry:ui",
      "title": "Phone Input",
      "description": "An international phone number input with country code selector.",
      "dependencies": ["blode-icons-react", "react-phone-number-input"],
      "registryDependencies": ["button", "command", "input", "popover", "scroll-area"],
      "files": [
        {
          "path": "registry/default/ui/phone-input.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "A floating panel that appears next to a trigger element.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/popover.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "progress",
      "type": "registry:ui",
      "title": "Progress",
      "description": "A horizontal bar that indicates the completion progress of a task.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/progress.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "progress-list",
      "type": "registry:ui",
      "title": "Progress List",
      "description": "A vertical list of progress items with completed and pending states.",
      "dependencies": ["blode-icons-react"],
      "files": [
        {
          "path": "registry/default/ui/progress-list.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "prompt",
      "type": "registry:ui",
      "title": "Prompt",
      "description": "A confirmation dialog that asks the user for input before proceeding.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/prompt.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "radio-group",
      "type": "registry:ui",
      "title": "Radio Group",
      "description": "A set of mutually exclusive options where only one can be selected.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/radio-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "resizable",
      "type": "registry:ui",
      "title": "Resizable",
      "description": "A layout component with draggable handles for resizing panels.",
      "dependencies": ["react-resizable-panels@^4"],
      "files": [
        {
          "path": "registry/default/ui/resizable.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "responsive-dialog",
      "type": "registry:ui",
      "title": "Responsive Dialog",
      "description": "A dialog on desktop that becomes a drawer on small screens.",
      "registryDependencies": ["dialog", "drawer", "@blode/use-mobile"],
      "files": [
        {
          "path": "registry/default/ui/responsive-dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-area",
      "type": "registry:ui",
      "title": "Scroll Area",
      "description": "A scrollable container with custom styled scrollbars.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/scroll-area.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "search-input",
      "type": "registry:ui",
      "title": "Search Input",
      "description": "A search field with a clear button and an optional cycling placeholder.",
      "dependencies": ["blode-icons-react"],
      "registryDependencies": ["input-group"],
      "files": [
        {
          "path": "registry/default/ui/search-input.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "A dropdown control for choosing a single value from a list of options.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/select.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "separator",
      "type": "registry:ui",
      "title": "Separator",
      "description": "A visual divider that separates content into distinct sections.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/separator.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "share",
      "type": "registry:ui",
      "title": "Share",
      "description": "A button that opens the native share sheet and falls back to copying the link.",
      "dependencies": ["blode-icons-react", "motion", "sonner"],
      "registryDependencies": ["button", "@blode/use-copy-to-clipboard"],
      "files": [
        {
          "path": "registry/default/ui/share.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sheet",
      "type": "registry:ui",
      "title": "Sheet",
      "description": "A panel that slides in from the edge of the viewport with an overlay.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/sheet.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sidebar",
      "type": "registry:ui",
      "title": "Sidebar",
      "description": "A collapsible side navigation component with multiple layout variants.",
      "dependencies": ["@base-ui/react", "class-variance-authority", "blode-icons-react"],
      "registryDependencies": [
        "button",
        "separator",
        "sheet",
        "tooltip",
        "input",
        "@blode/use-mobile",
        "skeleton"
      ],
      "cssVars": {
        "light": {
          "sidebar-accent": "240 4.8% 95.9%",
          "sidebar-accent-foreground": "240 5.9% 10%",
          "sidebar-background": "0 0% 98%",
          "sidebar-border": "220 13% 91%",
          "sidebar-foreground": "240 5.3% 26.1%",
          "sidebar-primary": "240 5.9% 10%",
          "sidebar-primary-foreground": "0 0% 98%",
          "sidebar-ring": "217.2 91.2% 59.8%"
        },
        "dark": {
          "sidebar-accent": "240 3.7% 15.9%",
          "sidebar-accent-foreground": "240 4.8% 95.9%",
          "sidebar-background": "240 5.9% 10%",
          "sidebar-border": "240 3.7% 15.9%",
          "sidebar-foreground": "240 4.8% 95.9%",
          "sidebar-primary": "224.3 76.3% 48%",
          "sidebar-primary-foreground": "0 0% 100%",
          "sidebar-ring": "217.2 91.2% 59.8%"
        }
      },
      "files": [
        {
          "path": "registry/default/ui/sidebar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "A placeholder animation that indicates content is loading.",
      "files": [
        {
          "path": "registry/default/ui/skeleton.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "A draggable control for selecting a numeric value within a range.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/slider.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sonner",
      "type": "registry:ui",
      "title": "Sonner",
      "description": "A toast notification component powered by Sonner.",
      "dependencies": ["sonner", "next-themes"],
      "files": [
        {
          "path": "registry/default/ui/sonner.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "spinner",
      "type": "registry:ui",
      "title": "Spinner",
      "description": "An animated loading indicator for asynchronous operations.",
      "files": [
        {
          "path": "registry/default/ui/spinner.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "stat",
      "type": "registry:ui",
      "title": "Stat",
      "description": "A compact metric card for showing a headline value and label.",
      "files": [
        {
          "path": "registry/default/ui/stat.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "stepper",
      "type": "registry:ui",
      "title": "Stepper",
      "description": "A numbered progress indicator for a multi-step flow.",
      "dependencies": ["blode-icons-react", "class-variance-authority"],
      "files": [
        {
          "path": "registry/default/ui/stepper.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "A toggle control for switching between on and off states.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/switch.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "table",
      "type": "registry:ui",
      "title": "Table",
      "description": "A responsive table for displaying structured data in rows and columns.",
      "files": [
        {
          "path": "registry/default/ui/table.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "A tabbed interface that organises content into switchable panels.",
      "dependencies": ["@base-ui/react", "class-variance-authority", "merge-refs"],
      "registryDependencies": ["@blode/use-tab-observer"],
      "files": [
        {
          "path": "registry/default/ui/tabs.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "textarea",
      "type": "registry:ui",
      "title": "Textarea",
      "description": "A multi-line text input field for longer form content.",
      "files": [
        {
          "path": "registry/default/ui/textarea.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "time-picker",
      "type": "registry:ui",
      "title": "Time Picker",
      "description": "A select of times at a fixed interval, formatted for the locale.",
      "registryDependencies": ["select"],
      "files": [
        {
          "path": "registry/default/ui/time-picker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "timezone-picker",
      "type": "registry:ui",
      "title": "Timezone Picker",
      "description": "A searchable list of IANA time zones with their current offset and time.",
      "registryDependencies": ["@blode/combobox"],
      "files": [
        {
          "path": "registry/default/ui/timezone-picker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "toggle",
      "type": "registry:ui",
      "title": "Toggle",
      "description": "A two-state button that can be toggled on or off.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/toggle.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "toggle-group",
      "type": "registry:ui",
      "title": "Toggle Group",
      "description": "A set of toggle buttons where one or more can be active.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["toggle"],
      "files": [
        {
          "path": "registry/default/ui/toggle-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "A popup that displays helpful information when hovering or focusing an element.",
      "dependencies": ["@base-ui/react"],
      "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
      "files": [
        {
          "path": "registry/default/ui/tooltip.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "kbd",
      "type": "registry:ui",
      "title": "Kbd",
      "description": "A styled keyboard key indicator for displaying shortcuts and key combinations.",
      "files": [
        {
          "path": "registry/default/ui/kbd.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "native-select",
      "type": "registry:ui",
      "title": "Native Select",
      "description": "A styled wrapper around the native HTML select element.",
      "files": [
        {
          "path": "registry/default/ui/native-select.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "direction",
      "type": "registry:ui",
      "title": "Direction",
      "description": "A context provider for managing text direction (LTR/RTL) across components.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/direction.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "file-thumbnail",
      "type": "registry:ui",
      "title": "File Thumbnail",
      "description": "A square preview tile for an attached file — an image thumbnail or a file icon with name.",
      "files": [
        {
          "path": "registry/default/ui/file-thumbnail.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "chat-message",
      "type": "registry:ui",
      "title": "Chat Message",
      "description": "A chat transcript entry for user and assistant messages, with attachments and a hover meta row.",
      "dependencies": ["motion"],
      "registryDependencies": ["file-thumbnail"],
      "files": [
        {
          "path": "registry/default/ui/chat-message.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-message",
      "type": "registry:ui",
      "title": "Input Message",
      "description": "A chat composer with an auto-resizing textarea, action slots, a send button, and drag-and-drop attachments.",
      "dependencies": ["motion", "react-textarea-autosize"],
      "registryDependencies": ["button", "file-thumbnail"],
      "files": [
        {
          "path": "registry/default/ui/input-message.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "thinking-indicator",
      "type": "registry:ui",
      "title": "Thinking Indicator",
      "description": "An animated status indicator with a morphing glyph and cycling text for thinking states.",
      "dependencies": ["motion"],
      "files": [
        {
          "path": "registry/default/ui/thinking-indicator.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "thinking-steps",
      "type": "registry:ui",
      "title": "Thinking Steps",
      "description": "A collapsible chain-of-thought stepper with steps, sources, details, and images.",
      "dependencies": ["motion"],
      "registryDependencies": ["accordion", "badge"],
      "files": [
        {
          "path": "registry/default/ui/thinking-steps.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "ask-user-questions",
      "type": "registry:ui",
      "title": "Ask User Questions",
      "description": "A stepped questionnaire with single- or multi-select options, free-form answers, and skip.",
      "dependencies": ["motion"],
      "registryDependencies": ["button", "badge", "textarea"],
      "files": [
        {
          "path": "registry/default/ui/ask-user-questions.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bubble",
      "type": "registry:ui",
      "title": "Bubble",
      "description": "A message surface for chat interfaces, with variants, alignment, reactions, and composable content.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/bubble.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "message",
      "type": "registry:ui",
      "title": "Message",
      "description": "A row primitive for chat transcripts, pairing an avatar with content, header, and footer, aligned to the start or end.",
      "files": [
        {
          "path": "registry/default/ui/message.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "message-scroller",
      "type": "registry:ui",
      "title": "Message Scroller",
      "description": "A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.",
      "dependencies": ["@shadcn/react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/message-scroller.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "attachment",
      "type": "registry:ui",
      "title": "Attachment",
      "description": "A card for files and images with upload, processing, error, and done states, an optional full-card trigger, and a scrollable group.",
      "dependencies": ["@base-ui/react"],
      "registryDependencies": ["button"],
      "files": [
        {
          "path": "registry/default/ui/attachment.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "marker",
      "type": "registry:ui",
      "title": "Marker",
      "description": "A compact inline status line for activity feeds and transcripts, with optional icon, separator, and border variants.",
      "dependencies": ["@base-ui/react"],
      "files": [
        {
          "path": "registry/default/ui/marker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "weekly-hours",
      "type": "registry:ui",
      "title": "Weekly Hours",
      "description": "An editor for opening hours across the days of the week.",
      "dependencies": ["blode-icons-react"],
      "registryDependencies": [
        "button",
        "dropdown-menu",
        "field",
        "switch",
        "tooltip",
        "@blode/time-picker"
      ],
      "files": [
        {
          "path": "registry/default/ui/weekly-hours.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "Utils",
      "description": "Utility functions including cn() for merging Tailwind CSS classes.",
      "dependencies": ["clsx", "tailwind-merge"],
      "files": [
        {
          "path": "registry/default/lib/utils.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "google-fonts",
      "type": "registry:lib",
      "title": "Google Fonts",
      "description": "Fetch and preview Google Fonts, with stylesheet injection and cleanup.",
      "files": [
        {
          "path": "registry/default/lib/google-fonts.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "use-copy-to-clipboard",
      "type": "registry:lib",
      "title": "Use Copy To Clipboard",
      "description": "A hook that copies text to the clipboard and resets after a timeout.",
      "files": [
        {
          "path": "registry/default/hooks/use-copy-to-clipboard.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "use-install-prompt",
      "type": "registry:lib",
      "title": "Use Install Prompt",
      "description": "A hook that exposes Chromium's deferred install prompt.",
      "files": [
        {
          "path": "registry/default/hooks/use-install-prompt.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "use-mobile",
      "type": "registry:lib",
      "title": "Use Mobile",
      "description": "A hook that detects whether the viewport matches a mobile breakpoint.",
      "files": [
        {
          "path": "registry/default/hooks/use-mobile.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "use-tab-observer",
      "type": "registry:lib",
      "title": "Use Tab Observer",
      "description": "A hook that observes and tracks the active tab indicator position.",
      "files": [
        {
          "path": "registry/default/hooks/use-tab-observer.ts",
          "type": "registry:lib"
        }
      ]
    }
  ],
  "name": "blode"
}