{
  "name": "sabil-ui",
  "homepage": "https://ui.muttaqinsabilul.my.id",
  "items": [
    {
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/accordion",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/accordion.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.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/alert-dialog",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/alert-dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "alert",
      "type": "registry:ui",
      "title": "Alert",
      "description": "Displays a callout for user attention.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/alert",
      "dependencies": [
        "class-variance-authority",
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/alert.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "aspect-ratio",
      "type": "registry:ui",
      "title": "Aspect Ratio",
      "description": "Displays content within a desired ratio.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/aspect-ratio",
      "dependencies": [
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/aspect-ratio.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "attachment",
      "type": "registry:ui",
      "title": "Attachment",
      "description": "Displays a file, image or link attached to a message or form.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/attachment",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/attachment.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "avatar",
      "type": "registry:ui",
      "title": "Avatar",
      "description": "An image element with a fallback for representing the user.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/avatar",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/avatar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Displays a badge or a component that looks like a badge.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/badge",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/badge.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "breadcrumb",
      "type": "registry:ui",
      "title": "Breadcrumb",
      "description": "Displays the path to the current resource using a hierarchy of links.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/breadcrumb",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/breadcrumb.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bubble",
      "type": "registry:ui",
      "title": "Bubble",
      "description": "A chat bubble for conversational interfaces.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/bubble",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/bubble.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "button-group",
      "type": "registry:ui",
      "title": "Button Group",
      "description": "A container that groups related buttons together with consistent styling.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/button-group",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [
        "separator"
      ],
      "files": [
        {
          "path": "components/ui/button-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "Displays a button or a component that looks like a button.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/button",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "calendar",
      "type": "registry:ui",
      "title": "Calendar",
      "description": "A date field component that allows users to enter and edit date.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/calendar",
      "dependencies": [
        "cn",
        "lucide-react",
        "react-day-picker"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/calendar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "Displays a card with header, content, and footer.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/card",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "carousel",
      "type": "registry:ui",
      "title": "Carousel",
      "description": "A carousel with motion and swipe built using Embla.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/carousel",
      "dependencies": [
        "cn",
        "embla-carousel-react",
        "lucide-react"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/carousel.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "chart",
      "type": "registry:ui",
      "title": "Chart",
      "description": "Beautiful charts. Built using Recharts. Copy and paste into your apps.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/chart",
      "dependencies": [
        "cn",
        "recharts"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/chart.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "checkbox",
      "type": "registry:ui",
      "title": "Checkbox",
      "description": "A control that allows the user to toggle between checked and not checked.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/checkbox",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/checkbox.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "code-block",
      "type": "registry:ui",
      "title": "Code Block",
      "description": "Displays a block of code with syntax highlighting and a copy button.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/code-block",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/code-block.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "collapsible",
      "type": "registry:ui",
      "title": "Collapsible",
      "description": "An interactive component which expands or collapses a panel.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/collapsible",
      "dependencies": [
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/collapsible.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "combobox",
      "type": "registry:ui",
      "title": "Combobox",
      "description": "Autocomplete input and command palette with a list of suggestions.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/combobox",
      "dependencies": [
        "@base-ui/react",
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "button",
        "input-group"
      ],
      "files": [
        {
          "path": "components/ui/combobox.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "command",
      "type": "registry:ui",
      "title": "Command",
      "description": "Fast, composable, unstyled command menu for React.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/command",
      "dependencies": [
        "cmdk",
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "dialog",
        "input-group"
      ],
      "files": [
        {
          "path": "components/ui/command.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "context-menu",
      "type": "registry:ui",
      "title": "Context Menu",
      "description": "Displays a menu to the user, triggered by a right click.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/context-menu",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/context-menu.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dialog",
      "type": "registry:ui",
      "title": "Dialog",
      "description": "A window overlaid on either the primary window or another dialog window.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/dialog",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "direction",
      "type": "registry:ui",
      "title": "Direction",
      "description": "Provides the reading direction (LTR or RTL) to every component below it.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/direction",
      "dependencies": [
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/direction.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "drawer",
      "type": "registry:ui",
      "title": "Drawer",
      "description": "A drawer component for React, built on Vaul.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/drawer",
      "dependencies": [
        "cn",
        "vaul"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/drawer.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dropdown-menu",
      "type": "registry:ui",
      "title": "Dropdown Menu",
      "description": "Displays a menu to the user, such as a set of actions or functions, triggered by a button.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/dropdown-menu",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/dropdown-menu.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "empty",
      "type": "registry:ui",
      "title": "Empty",
      "description": "Use the Empty component to display an empty state.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/empty",
      "dependencies": [
        "class-variance-authority",
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/empty.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "field",
      "type": "registry:ui",
      "title": "Field",
      "description": "Combine labels, controls, and help text to compose accessible form fields.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/field",
      "dependencies": [
        "class-variance-authority",
        "cn"
      ],
      "registryDependencies": [
        "label",
        "separator"
      ],
      "files": [
        {
          "path": "components/ui/field.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "hover-card",
      "type": "registry:ui",
      "title": "Hover Card",
      "description": "For sighted users to preview content available behind a link.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/hover-card",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/hover-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-group",
      "type": "registry:ui",
      "title": "Input Group",
      "description": "Add addons, buttons, and helper content to inputs.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/input-group",
      "dependencies": [
        "class-variance-authority",
        "cn"
      ],
      "registryDependencies": [
        "button",
        "input",
        "textarea"
      ],
      "files": [
        {
          "path": "components/ui/input-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-otp",
      "type": "registry:ui",
      "title": "Input OTP",
      "description": "Accessible one-time password component with copy paste functionality.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/input-otp",
      "dependencies": [
        "cn",
        "input-otp",
        "lucide-react"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/input-otp.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "Displays a form input field or a component that looks like an input field.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/input",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/input.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "item",
      "type": "registry:ui",
      "title": "Item",
      "description": "A versatile component for displaying content with media, title, description and actions.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/item",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [
        "separator"
      ],
      "files": [
        {
          "path": "components/ui/item.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "kbd",
      "type": "registry:ui",
      "title": "Kbd",
      "description": "Used to display textual user input from keyboard.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/kbd",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/kbd.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "label",
      "type": "registry:ui",
      "title": "Label",
      "description": "Renders an accessible label associated with controls.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/label",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/label.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "marker",
      "type": "registry:ui",
      "title": "Marker",
      "description": "A compact status line for events in a timeline or activity feed.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/marker",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/marker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "menubar",
      "type": "registry:ui",
      "title": "Menubar",
      "description": "A visually persistent menu common in desktop applications.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/menubar",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/menubar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "message-scroller",
      "type": "registry:ui",
      "title": "Message Scroller",
      "description": "A scroll container for chat that keeps the newest message in view.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/message-scroller",
      "dependencies": [
        "@shadcn/react",
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/message-scroller.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "message",
      "type": "registry:ui",
      "title": "Message",
      "description": "Layout for a single message in a conversation, with avatar, header and footer.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/message",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/message.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "native-select",
      "type": "registry:ui",
      "title": "Native Select",
      "description": "A styled native HTML select element.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/native-select",
      "dependencies": [
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/native-select.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "navigation-menu",
      "type": "registry:ui",
      "title": "Navigation Menu",
      "description": "A collection of links for navigating websites.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/navigation-menu",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/navigation-menu.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "pagination",
      "type": "registry:ui",
      "title": "Pagination",
      "description": "Pagination with page navigation, next and previous links.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/pagination",
      "dependencies": [
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/pagination.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "Displays rich content in a portal, triggered by a button.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/popover",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/popover.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "progress",
      "type": "registry:ui",
      "title": "Progress",
      "description": "Displays an indicator showing the completion progress of a task.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/progress",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/progress.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "questionnaire",
      "type": "registry:ui",
      "title": "Questionnaire",
      "description": "A step-by-step set of questions with keyboard shortcuts.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/questionnaire",
      "dependencies": [
        "@shadcn/react",
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/questionnaire.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "radio-group",
      "type": "registry:ui",
      "title": "Radio Group",
      "description": "A set of checkable buttons where no more than one can be checked at a time.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/radio-group",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/radio-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "resizable",
      "type": "registry:ui",
      "title": "Resizable",
      "description": "Accessible resizable panel groups and layouts with keyboard support.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/resizable",
      "dependencies": [
        "cn",
        "react-resizable-panels"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/resizable.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-area",
      "type": "registry:ui",
      "title": "Scroll Area",
      "description": "Augments native scroll functionality for custom, cross-browser styling.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/scroll-area",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/scroll-area.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "Displays a list of options for the user to pick from, triggered by a button.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/select",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/select.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "separator",
      "type": "registry:ui",
      "title": "Separator",
      "description": "Visually or semantically separates content.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/separator",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/separator.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sheet",
      "type": "registry:ui",
      "title": "Sheet",
      "description": "Extends the Dialog component to display content that complements the main content of the screen.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/sheet",
      "dependencies": [
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "components/ui/sheet.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sidebar",
      "type": "registry:ui",
      "title": "Sidebar",
      "description": "A composable, themeable and customizable sidebar component.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/sidebar",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "lucide-react",
        "radix-ui"
      ],
      "registryDependencies": [
        "use-mobile",
        "button",
        "input",
        "separator",
        "sheet",
        "skeleton",
        "tooltip"
      ],
      "files": [
        {
          "path": "components/ui/sidebar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "use-mobile",
      "type": "registry:hook",
      "title": "Use Mobile",
      "description": "",
      "dependencies": [],
      "registryDependencies": [
        "use-media-query"
      ],
      "files": [
        {
          "path": "hooks/use-mobile.ts",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "use-media-query",
      "type": "registry:hook",
      "title": "Use Media Query",
      "description": "",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "hooks/use-media-query.ts",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "Use to show a placeholder while content is loading.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/skeleton",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/skeleton.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "An input where the user selects a value from within a given range.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/slider",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/slider.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sonner",
      "type": "registry:ui",
      "title": "Toast",
      "description": "An opinionated toast component for React, built on Sonner.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/toast",
      "dependencies": [
        "lucide-react",
        "next-themes",
        "sonner"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/sonner.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "spinner",
      "type": "registry:ui",
      "title": "Spinner",
      "description": "An indicator that can be used to show a loading state.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/spinner",
      "dependencies": [
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/spinner.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "A control that allows the user to toggle between checked and not checked.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/switch",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/switch.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "table",
      "type": "registry:ui",
      "title": "Data Table",
      "description": "Powerful table and datagrids built using TanStack Table.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/data-table",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/table.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "A set of layered sections of content, known as tab panels, displayed one at a time.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/tabs",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/tabs.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "textarea",
      "type": "registry:ui",
      "title": "Textarea",
      "description": "Displays a form textarea or a component that looks like a textarea.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/textarea",
      "dependencies": [
        "cn"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/textarea.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "toggle-group",
      "type": "registry:ui",
      "title": "Toggle Group",
      "description": "A set of two-state buttons that can be toggled on or off.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/toggle-group",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [
        "toggle"
      ],
      "files": [
        {
          "path": "components/ui/toggle-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "toggle",
      "type": "registry:ui",
      "title": "Toggle",
      "description": "A two-state button that can be either on or off.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/toggle",
      "dependencies": [
        "class-variance-authority",
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/toggle.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "A popup that displays information related to an element on hover or focus.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/tooltip",
      "dependencies": [
        "cn",
        "radix-ui"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "components/ui/tooltip.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "trace",
      "type": "registry:ui",
      "title": "Trace",
      "description": "Shows the steps an agent or a job takes, with live status.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/components/trace",
      "dependencies": [
        "cn",
        "lucide-react"
      ],
      "registryDependencies": [
        "collapsible"
      ],
      "files": [
        {
          "path": "components/ui/trace.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "theme",
      "type": "registry:style",
      "title": "Theme",
      "description": "The Sabil UI foundation: color, radius, surface and motion tokens. Install this first.",
      "docs": "https://ui.muttaqinsabilul.my.id/docs/theming",
      "dependencies": [
        "tailwindcss",
        "tw-animate-css"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "app/globals.css",
          "type": "registry:style"
        },
        {
          "path": "app/variants.css",
          "type": "registry:style"
        }
      ]
    }
  ]
}