Dash Mantine Components

To use Dash Mantine Components, wrap your application layout in dmc.MantineProvider. This ensures that the Mantine theme and styles are correctly applied to all child components. The following example demonstrates how to use a dmc.DatePickerInput and update a dmc.Text component via a Dash callback.

import dash
from dash import Dash, Input, Output, callback, html, no_update

import dash_mantine_components as dmc

app = Dash()

app.layout = dmc.MantineProvider(
    [
        dmc.DatePickerInput(
            id="date-picker",
            label="Start Date",
            description="You can also provide a description",
            minDate='2022-08-05',
            value=None,
            w=200
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date"),
    ]
)


@callback(Output("selected-date", "children"), Input("date-picker", "value"))
def update_output(d):
    prefix = "You have selected: "
    if d:
        return prefix + d
    else:
        return no_update


if __name__ == "__main__":
    app.run_server(debug=True)

The dash-mantine-components library provides a comprehensive suite of UI components for Dash applications, organized into several functional categories. You can import these components directly from the main package.

Charts

Visual data representation components including AreaChart, BarChart, BubbleChart, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, PieChart, RadarChart, ScatterChart, Sparkline, and SemiCircleProgress.

Layout & Core

Structural components for building application shells and layouts: AppShell (and its sub-components like AppShellHeader, AppShellNavbar, etc.), Container, Center, Flex, Group, Stack, Grid, GridCol, SimpleGrid, Paper, Box, Divider, Space, AspectRatio, Affix, and Stack.

Inputs & Forms

Interactive elements for user data entry: TextInput, Textarea, PasswordInput, NumberInput, PinInput, JsonInput, Select, MultiSelect, Autocomplete, TagsInput, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, Slider, RangeSlider, ColorInput, ColorPicker, and DateInput (along with various date/time pickers).

Navigation & Overlays

Components for app navigation and transient UI: Tabs, Stepper, Breadcrumbs, NavLink, Menu (and sub-menus), Pagination, Drawer, ManagedDrawer, Modal, ManagedModal, Popover, HoverCard, and Tooltip.

Feedback & Status

Visual indicators for system state: Alert, Badge, Loader, LoadingOverlay, Progress, RingProgress, Skeleton, Notification, and NavigationProgress.

Data Display

Components for presenting information: Table (and sub-components like TableTr, TableTd, etc.), List, Timeline, Accordion, Card, Avatar, Chip, and Tree.

The DonutChart component is used to render a donut-style pie chart. It accepts a data array of DonutChartCell objects and provides several props to customize appearance, tooltips, and labels.

Key Props

import { DonutChart } from '@mantine/charts'; // Assuming standard import path

const data = [
  { name: 'Segment A', value: 400 },
  { name: 'Segment B', value: 300 },
];

function MyChart() {
  return (
    <DonutChart
      data={data}
      withLabels
      chartLabel="Total"
      thickness={30}
      size={150}
    />
  );
}

The DatePickerBaseProps interface defines the core configuration for date picking components (including DatePicker, MonthPicker, and YearPicker).

Key properties include:

• type: The picker mode, which can be 'range', 'multiple', or the default (single date).
• value: The controlled value, accepting a string, string[], or [string, string] (for ranges).
• level: Controls the current view level ('decade', 'year', or 'month').
• maxLevel: The maximum level the user can navigate to (e.g., 'decade' or 'year').
• presets: An array of DatePickerPreset objects containing a value and a label for quick selection.
• allowDeselect: Allows users to deselect a date by clicking it (only for default type).
• allowSingleDateInRange: Allows a single date to be selected as a range (only for range type).

// Example configuration for a DatePicker
const props: DatePickerBaseProps = {
  type: 'range',
  value: ['2023-01-01', '2023-01-10'],
  maxLevel: 'month',
  presets: [
    { value: '2023-01-01', label: 'New Year' }
  ]
};

The RadarChart component is used to render radar charts. It requires a data array and a series configuration to map data to the chart axes. It also accepts various props to control visibility of UI elements like legends, grids, axes, tooltips, and dots, as well as direct props for underlying Recharts components.

Required Props

• data: An array of objects (Record<string, any>[]) containing the chart data.
• series: An array of RadarChartSeries objects that determines which data fields are consumed.
• dataKey: The key in the data objects used for axis values.

Visibility Props

• withLegend: Boolean. Shows the chart legend. Defaults to false.
• withPolarGrid: Boolean. Shows the PolarGrid component. Defaults to true.
• withPolarAngleAxis: Boolean. Shows the PolarAngleAxis component. Defaults to true.
• withPolarRadiusAxis: Boolean. Shows the PolarRadiusAxis component. Defaults to false.
• withTooltip: Boolean. Shows the tooltip component. Defaults to false.
• withDots: Boolean. Shows dots on the radar lines. Defaults to false.

Styling and Recharts Passthrough

• gridColor: MantineColor. Color of the grid lines.
• textColor: MantineColor. Color of all text elements.
• legendProps: Object. Props passed to the Recharts Legend component.
• radarChartProps: Object. Props passed to the Recharts RadarChart component.
• radarProps: Any. Props passed to the Recharts Radar component.
• tooltipProps: Object. Props passed to the Recharts Tooltip component.
• dotProps: Object. Props passed to all dots (ignored if withDots is false).
• activeDotProps: Object. Props passed to active dots (ignored if withDots is false).

import RadarChart from '@mantine/charts/lib/RadarChart/RadarChart';

const data = [
  { dimension: 'Speed', value: 80, other: 50 },
  { dimension: 'Strength', value: 90, other: 60 },
];

const series = [
  { key: 'value', color: 'blue' },
  { key: 'other', color: 'red' },
];

function MyChart() {
  return (
    <RadarChart
      data={data}
      series={series}
      dataKey="dimension"
      withLegend
      withTooltip
      withDots
    />
  );
}

The Box component in dash-mantine-components uses the BoxProps interface, which extends Mantine's core Box properties. Most props (spacing, typography, sizing, etc.) accept a single value (theme key, CSS value, or number) or an object for responsive styles (e.g., {'sm': '10px', 'lg': '20px'}).

Key Prop Groups:

Visibility & Modifiers

• hiddenFrom: Breakpoint above which the component is hidden (display: none).
• visibleFrom: Breakpoint below which the component is hidden (display: none).
• mod: Element modifiers transformed into data- attributes. Accepts a string, object, or an array of strings/objects. Falsy values are removed.

Spacing (Margin & Padding)

Accepts theme spacing keys, CSS values, or a dict for responsive styles.

• Margin: m (all), my (block), mx (inline), mt (top), mb (bottom), ms (inline start), me (inline end), ml (left), mr (right).
• Padding: p (all), py (block), px (inline), pt (top), pb (bottom), ps (inline start), pe (inline end), pl (left), pr (right).

Colors & Borders

• bd: Border (CSS value or responsive dict).
• bdrs: Border radius (theme key, CSS value, or responsive dict).
• bg: Background (theme color key or responsive dict).
• c: Color (theme color key or responsive dict).
• opacity: Opacity (CSS value, number, or responsive dict).

Typography

• ff: Font family.
• fz: Font size (theme key, CSS value, or responsive dict).
• fw: Font weight.
• lts: Letter spacing.
• ta: Text align.
• lh: Line height.
• fs: Font style.
• tt: Text transform.
• td: Text decoration.

Sizing

• w: Width.
• miw: Minimum width.
• maw: Maximum width.
• h: Height.
• mih: Minimum height.
• mah: Maximum height.

Layout & Positioning

• pos: Position (e.g., relative, absolute).
• top, left, bottom, right, inset: Offset values.
• display: Display property.
• flex: Flexbox properties.