Template

Files

lmiranda 20458add3f feat(viz-platform): complete Sprint 1 - plugin structure and tests

Sprint 1 - viz-platform Plugin completed (13/13 issues):
- Commands: 7 files (initial-setup, chart, dashboard, theme, theme-new, theme-css, component)
- Agents: 3 files (theme-setup, layout-builder, component-check)
- Documentation: README.md, claude-md-integration.md
- Tests: 94 tests passing (68-99% coverage)
- CHANGELOG updated with completion status

Closes: #178, #179, #180, #181, #182

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-26 13:53:03 -05:00

3.3 KiB

Raw Blame History

description

description
Inspect Dash Mantine Component props and validation

Inspect Component

Inspect a Dash Mantine Component's available props, types, and defaults.

Usage

/component {name}

Arguments

name (required): DMC component name (e.g., Button, Card, TextInput)

Examples

/component Button
/component TextInput
/component Select
/component Card

Tool Mapping

This command uses the get_component_props MCP tool:

get_component_props(component="Button")

Output Example

{
  "component": "Button",
  "category": "inputs",
  "props": {
    "children": {
      "type": "any",
      "required": false,
      "description": "Button content"
    },
    "variant": {
      "type": "string",
      "enum": ["filled", "outline", "light", "subtle", "default", "gradient"],
      "default": "filled",
      "description": "Button appearance variant"
    },
    "color": {
      "type": "string",
      "default": "blue",
      "description": "Button color from theme"
    },
    "size": {
      "type": "string",
      "enum": ["xs", "sm", "md", "lg", "xl"],
      "default": "sm",
      "description": "Button size"
    },
    "radius": {
      "type": "string",
      "enum": ["xs", "sm", "md", "lg", "xl"],
      "default": "sm",
      "description": "Border radius"
    },
    "disabled": {
      "type": "boolean",
      "default": false,
      "description": "Disable button"
    },
    "loading": {
      "type": "boolean",
      "default": false,
      "description": "Show loading indicator"
    },
    "fullWidth": {
      "type": "boolean",
      "default": false,
      "description": "Button takes full width"
    }
  }
}

Listing All Components

To see all available components:

list_components(category=None)  # All components
list_components(category="inputs")  # Just input components

Component Categories

Category	Components
`inputs`	Button, TextInput, Select, Checkbox, Radio, Switch, Slider, etc.
`navigation`	NavLink, Tabs, Breadcrumbs, Pagination, Stepper
`feedback`	Alert, Notification, Progress, Loader, Skeleton
`overlays`	Modal, Drawer, Tooltip, Popover, Menu
`typography`	Text, Title, Code, Blockquote, List
`layout`	Container, Grid, Stack, Group, Space, Divider
`data`	Table, Badge, Card, Paper, Timeline

Validating Component Usage

After inspecting props, validate your usage:

validate_component(
    component="Button",
    props={
        "variant": "filled",
        "color": "blue",
        "size": "lg",
        "children": "Click me"
    }
)

Returns:

{
  "valid": true,
  "errors": [],
  "warnings": []
}

Or with errors:

{
  "valid": false,
  "errors": [
    "Invalid prop 'colour' for Button. Did you mean 'color'?",
    "Prop 'size' expects one of ['xs', 'sm', 'md', 'lg', 'xl'], got 'huge'"
  ],
  "warnings": [
    "Prop 'fullwidth' should be 'fullWidth' (camelCase)"
  ]
}

Why This Matters

DMC components have many props with specific type constraints. This tool:

Prevents hallucinated prop names
Validates enum values
Catches typos before runtime
Documents available options

/chart {type} - Create charts
/dashboard {template} - Create layouts

3.3 KiB Raw Blame History