{
  "components": {
    "button": {
      "name": "Button",
      "type": "form",
      "description": "Displays a button or a component that looks like a button",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "input": {
      "name": "Input",
      "type": "form",
      "description": "Displays a form input field or a component that looks like an input field",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "label": {
      "name": "Label",
      "type": "form",
      "description": "Renders an accessible label associated with controls",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "select": {
      "name": "Select",
      "type": "form",
      "description": "Displays a list of options for the user to pick from triggered by a button",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "checkbox": {
      "name": "Checkbox",
      "type": "form",
      "description": "A control that allows the user to toggle between checked and not checked",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "radio-group": {
      "name": "Radio Group",
      "type": "form",
      "description": "A set of checkable buttons where only one can be selected at a time",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "switch": {
      "name": "Switch",
      "type": "form",
      "description": "A control that allows the user to toggle between checked and not checked",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "slider": {
      "name": "Slider",
      "type": "form",
      "description": "An input where the user selects a value from within a given range",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "textarea": {
      "name": "Textarea",
      "type": "form",
      "description": "Displays a form textarea or a component that looks like a textarea",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "form": {
      "name": "Form",
      "type": "form",
      "description": "Building forms with proper validation and accessibility",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "rate": {
      "name": "Rate",
      "type": "form",
      "description": "Star rating with half star support",
      "category": "form",
      "frameworks": []
    },
    "button-group": {
      "name": "Button Group",
      "type": "form",
      "description": "Button group with single/multiple selection",
      "category": "form",
      "frameworks": []
    },
    "autocomplete": {
      "name": "Autocomplete",
      "type": "form",
      "description": "Autocomplete input with search and suggestions",
      "category": "form",
      "frameworks": []
    },
    "calendar": {
      "name": "Calendar",
      "type": "form",
      "description": "Full-featured date picker",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "calendar-range": {
      "name": "Calendar Range",
      "type": "form",
      "description": "Date range picker with start and end dates",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "date-picker": {
      "name": "Date Picker",
      "type": "form",
      "description": "A date picker component with popover and calendar",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "react-native",
        "flutter"
      ]
    },
    "date-range-picker": {
      "name": "Date Range Picker",
      "type": "form",
      "description": "A date range picker component with popover and calendar range",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs"
      ]
    },
    "time-picker": {
      "name": "Time Picker",
      "type": "form",
      "description": "A time picker component with popover and select inputs for hours and minutes",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs"
      ]
    },
    "date-time-picker": {
      "name": "Date Time Picker",
      "type": "form",
      "description": "A combined date and time picker component",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs"
      ]
    },
    "tags-input": {
      "name": "Tags Input",
      "type": "form",
      "description": "Input field for entering multiple tags or values",
      "category": "form",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "card": {
      "name": "Card",
      "type": "layout",
      "description": "Displays a card with header, content, and footer",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "separator": {
      "name": "Separator",
      "type": "layout",
      "description": "Visually or semantically separates content",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "accordion": {
      "name": "Accordion",
      "type": "layout",
      "description": "A vertically stacked set of interactive headings that each reveal a section of content",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "tabs": {
      "name": "Tabs",
      "type": "layout",
      "description": "A set of layered sections of content known as tab panels that are displayed one at a time",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "dialog": {
      "name": "Dialog",
      "type": "layout",
      "description": "A window overlaid on either the primary window or another dialog window",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "collapsible": {
      "name": "Collapsible",
      "type": "layout",
      "description": "An interactive component which expands/collapses a panel",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "aspect-ratio": {
      "name": "Aspect Ratio",
      "type": "layout",
      "description": "Displays content within a desired aspect ratio",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "scroll-area": {
      "name": "Scroll Area",
      "type": "layout",
      "description": "Augments native scroll functionality for custom, cross-browser styling",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "resizable": {
      "name": "Resizable",
      "type": "layout",
      "description": "Accessible resizable panel groups and layouts with keyboard support",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "sheet": {
      "name": "Sheet",
      "type": "layout",
      "description": "Slide-over panel that slides in from the edge of the screen",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "toolbar": {
      "name": "Toolbar",
      "type": "layout",
      "description": "A container for grouping a set of controls",
      "category": "layout",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "alert-dialog": {
      "name": "Alert Dialog",
      "type": "feedback",
      "description": "A modal dialog that interrupts the user with important content and expects a response",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "alert": {
      "name": "Alert",
      "type": "feedback",
      "description": "Displays a callout for user attention",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "progress": {
      "name": "Progress",
      "type": "feedback",
      "description": "Displays an indicator showing the completion progress of a task",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "avatar": {
      "name": "Avatar",
      "type": "data-display",
      "description": "An image element with a fallback for representing the user",
      "category": "data-display",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "hover-card": {
      "name": "Hover Card",
      "type": "data-display",
      "description": "For sighted users to preview content available behind a link",
      "category": "data-display",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "dropdown-menu": {
      "name": "Dropdown Menu",
      "type": "navigation",
      "description": "Displays a menu to the user triggered by a button",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "navigation-menu": {
      "name": "Navigation Menu",
      "type": "navigation",
      "description": "A collection of links for navigating websites",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "breadcrumb": {
      "name": "Breadcrumb",
      "type": "navigation",
      "description": "Displays the path to the current resource using a hierarchy of links",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "menubar": {
      "name": "Menubar",
      "type": "navigation",
      "description": "A visually persistent menu common in desktop applications",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "context-menu": {
      "name": "Context Menu",
      "type": "navigation",
      "description": "Displays a menu to the user triggered by right-click or long-press",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "popover": {
      "name": "Popover",
      "type": "navigation",
      "description": "Displays rich content in a portal, triggered by a button",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "tooltip": {
      "name": "Tooltip",
      "type": "navigation",
      "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "pagination": {
      "name": "Pagination",
      "type": "navigation",
      "description": "Page navigation with previous, next, and page numbers",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "command": {
      "name": "Command",
      "type": "navigation",
      "description": "Command palette for keyboard-first navigation and search",
      "category": "navigation",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "line-chart": {
      "name": "LineChart",
      "type": "chart",
      "description": "Display data as a responsive line chart with smooth curves and customizable styling",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "bar-chart": {
      "name": "BarChart",
      "type": "chart",
      "description": "Display data as vertical or horizontal bars with support for stacked and grouped layouts",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "pie-chart": {
      "name": "PieChart",
      "type": "chart",
      "description": "Display proportional data as a pie or donut chart with customizable labels and legend",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "donut-chart": {
      "name": "DonutChart",
      "type": "chart",
      "description": "Display proportional data as a donut chart with a hollow center",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "area-chart": {
      "name": "AreaChart",
      "type": "chart",
      "description": "Visualize cumulative totals over time with filled areas and gradient support",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "radar-chart": {
      "name": "RadarChart",
      "type": "chart",
      "description": "Display multi-dimensional data comparison on a radial grid",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "scatter-chart": {
      "name": "ScatterChart",
      "type": "chart",
      "description": "Display distribution and correlation analysis with scatter plots",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "mixed-chart": {
      "name": "MixedChart",
      "type": "chart",
      "description": "Combine multiple chart types (line, bar, area) in a single visualization",
      "category": "charts",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "gauge-chart": {
      "name": "GaugeChart",
      "type": "chart",
      "description": "Display data as a gauge chart with customizable ranges and styling",
      "category": "charts",
      "frameworks": [
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "sidebar": {
      "name": "Sidebar",
      "type": "navigation",
      "description": "Layout with collapsible sidebar",
      "category": "navigation",
      "frameworks": []
    },
    "stepper": {
      "name": "Stepper",
      "type": "navigation",
      "description": "Multi-step wizards and forms",
      "category": "navigation",
      "frameworks": []
    },
    "table": {
      "name": "Table",
      "type": "data-display",
      "description": "Data table with sorting, filtering, and selection",
      "category": "data-display",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "table-paginated": {
      "name": "Table Paginated",
      "type": "data-display",
      "description": "Data table with built-in pagination",
      "category": "data-display",
      "frameworks": []
    },
    "list": {
      "name": "List",
      "type": "data-display",
      "description": "Versatile list component for displaying data",
      "category": "data-display",
      "frameworks": []
    },
    "tree": {
      "name": "Tree",
      "type": "data-display",
      "description": "Hierarchical tree structure with expand/collapse",
      "category": "data-display",
      "frameworks": []
    },
    "tag": {
      "name": "Tag",
      "type": "data-display",
      "description": "Tag component for labels and categorization",
      "category": "data-display",
      "frameworks": []
    },
    "timeline": {
      "name": "Timeline",
      "type": "data-display",
      "description": "Timeline component for displaying chronological events",
      "category": "data-display",
      "frameworks": []
    },
    "drawer": {
      "name": "Drawer",
      "type": "modal-overlay",
      "description": "Drawer component with slide-in animation (shadcn style)",
      "category": "modal-overlay",
      "frameworks": []
    },
    "toast": {
      "name": "Toast",
      "type": "feedback",
      "description": "A succinct message that is displayed temporarily",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "skeleton": {
      "name": "Skeleton",
      "type": "feedback",
      "description": "Use to show a placeholder while content is loading",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "empty": {
      "name": "Empty",
      "type": "feedback",
      "description": "Displays an empty state placeholder",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "kbd": {
      "name": "Kbd",
      "type": "data-display",
      "description": "Displays keyboard key combinations",
      "category": "data-display",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular"
      ]
    },
    "typography": {
      "name": "Typography",
      "type": "data-display",
      "description": "Text formatting and typography components",
      "category": "data-display",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "badge": {
      "name": "Badge",
      "type": "feedback",
      "description": "Displays a badge or a component that looks like a badge",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "toggle": {
      "name": "Toggle",
      "type": "interactive",
      "description": "A two-state button that can be either on or off",
      "category": "interactive",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "toggle-group": {
      "name": "Toggle Group",
      "type": "interactive",
      "description": "A set of two-state buttons that can be toggled on or off",
      "category": "interactive",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "spinner": {
      "name": "Spinner",
      "type": "feedback",
      "description": "Animated loading spinner.",
      "category": "feedback",
      "frameworks": [
        "react",
        "nextjs",
        "vue",
        "nuxtjs",
        "angular",
        "react-native",
        "flutter"
      ]
    },
    "popconfirm": {
      "name": "Popconfirm",
      "type": "modal-overlay",
      "description": "Popconfirm component for confirmation dialogs (antd style)",
      "category": "modal-overlay",
      "frameworks": []
    },
    "tour": {
      "name": "Tour",
      "type": "other",
      "description": "Tour component for user onboarding (antd style)",
      "category": "other",
      "frameworks": []
    },
    "carousel": {
      "name": "Carousel",
      "type": "other",
      "description": "Carousel component for image/content slides (antd style)",
      "category": "other",
      "frameworks": []
    }
  },
  "groups": {
    "form": {
      "name": "Form Components",
      "components": [
        "button",
        "input",
        "label",
        "select",
        "checkbox",
        "radio-group",
        "switch",
        "slider",
        "textarea",
        "form",
        "rate",
        "button-group",
        "autocomplete",
        "calendar",
        "calendar-range",
        "date-picker",
        "date-range-picker",
        "time-picker",
        "date-time-picker",
        "tags-input"
      ]
    },
    "layout": {
      "name": "Layout Components",
      "components": [
        "card",
        "separator",
        "accordion",
        "tabs",
        "dialog",
        "collapsible",
        "aspect-ratio",
        "scroll-area",
        "resizable",
        "sheet",
        "toolbar"
      ]
    },
    "navigation": {
      "name": "Navigation Components",
      "components": [
        "dropdown-menu",
        "navigation-menu",
        "breadcrumb",
        "menubar",
        "context-menu",
        "popover",
        "tooltip",
        "pagination",
        "command",
        "sidebar",
        "stepper"
      ]
    },
    "data-display": {
      "name": "Data Display Components",
      "components": [
        "avatar",
        "hover-card",
        "table",
        "table-paginated",
        "list",
        "tree",
        "tag",
        "timeline",
        "kbd",
        "typography"
      ]
    },
    "feedback": {
      "name": "Feedback Components",
      "components": [
        "alert-dialog",
        "alert",
        "progress",
        "toast",
        "skeleton",
        "empty",
        "badge"
      ]
    },
    "modal-overlay": {
      "name": "Modal & Overlay Components",
      "components": [
        "drawer",
        "spinner",
        "popconfirm"
      ]
    },
    "interactive": {
      "name": "Interactive Components",
      "components": [
        "toggle",
        "toggle-group"
      ]
    },
    "charts": {
      "name": "Chart Components",
      "components": [
        "line-chart",
        "bar-chart",
        "pie-chart",
        "donut-chart",
        "area-chart",
        "radar-chart",
        "scatter-chart",
        "mixed-chart",
        "gauge-chart"
      ]
    },
    "other": {
      "name": "Other Components",
      "components": [
        "tour",
        "carousel"
      ]
    }
  }
}