### Heatmap Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

An example demonstrating how to initialize and configure a Heatmap component with sample data and axis keys.

```python
dmc.Heatmap(
    id="heatmap",
    data=[
        {"hour": "12:00", "day": "Mon", "value": 20},
        {"hour": "12:00", "day": "Tue", "value": 30},
        {"hour": "13:00", "day": "Mon", "value": 25},
        {"hour": "13:00", "day": "Tue", "value": 35},
    ],
    xAxisKey="hour",
    yAxisKey="day",
    valueKey="value"
)
```

--------------------------------

### Install JavaScript Dependencies

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md

Install Node.js dependencies required for building the components.

```bash
npm install
```

--------------------------------

### LoadingOverlay Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

Demonstrates how to use the LoadingOverlay component. It accepts props for visibility, loader configuration, and overlay styling.

```python
dmc.LoadingOverlay(
    visible=is_loading,
    loaderProps={"color": "blue", "size": "lg"}
)
```

--------------------------------

### Example Usage of Select

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Shows a practical example of the Select component for choosing a country, including options, a default value, and enabling search and clear functionalities. Ideal for country selection or similar single-choice scenarios.

```python
dmc.Select(
    id="country-select",
    label="Country",
    placeholder="Select a country",
    data=[
        {"label": "United States", "value": "us"},
        {"label": "Canada", "value": "ca"},
        {"label": "Mexico", "value": "mx"},
    ],
    value="us",
    searchable=True,
    clearable=True,
    size="md"
)
```

--------------------------------

### Stepper Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Demonstrates the creation and usage of a Stepper component with multiple steps.

```python
dmc.Stepper(
    id="stepper",
    active=1,
    children=[
        dmc.StepperStep(
            dmc.Text("Step 1 content"),
            label="Step 1",
            description="First step"
        ),
        dmc.StepperStep(
            dmc.Text("Step 2 content"),
            label="Step 2",
            description="Second step"
        ),
        dmc.StepperStep(
            dmc.Text("Step 3 content"),
            label="Step 3",
            description="Third step"
        ),
    ]
)
```

--------------------------------

### FunnelChart Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

An example showing the initialization of a FunnelChart with data, key mappings, and legend enabled.

```python
dmc.FunnelChart(
    id="funnel-chart",
    data=[
        {"stage": "Awareness", "value": 1000},
        {"stage": "Consideration", "value": 750},
        {"stage": "Decision", "value": 500},
        {"stage": "Purchase", "value": 300},
    ],
    dataKey="value",
    nameKey="stage",
    withLegend=True,
    colors=["blue", "cyan", "teal", "green"]
)
```

--------------------------------

### Install dash-mantine-components

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/README.md

Install the library using pip. This command is used to add the dash-mantine-components package to your Python environment.

```bash
pip install dash-mantine-components
```

--------------------------------

### Basic Popover Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

A basic example of a Popover component. Use this to display contextual information on hover or click. Requires `PopoverTarget` and `PopoverDropdown` for content structure.

```python
dmc.Popover(
    id="popover",
    opened=False,
    position="bottom",
    withArrow=True,
    children=[
        dmc.PopoverTarget(
            dmc.Button("Open Popover")
        ),
        dmc.PopoverDropdown(
            dmc.Text("Popover content goes here")
        ),
    ]
)
```

--------------------------------

### TimeInput Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Sets up a TimeInput component for selecting time, specifying label, placeholder, initial value, and format.

```python
dmc.TimeInput(
    id="time-field",
    label="Start Time",
    placeholder="10:30",
    value="10:30",
    withSeconds=False,
    format="24",
    size="md"
)
```

--------------------------------

### NotificationProvider Setup

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Configures the NotificationProvider to manage and display notifications. Allows setting the display position and z-index.

```python
dmc.NotificationProvider(
    position="top-right",
    children=[
        # Your app components
    ]
)
```

--------------------------------

### Basic Modal Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

A basic example of a Modal component. Use this for focused user interactions requiring user input or confirmation. Ensure `opened` state is managed externally.

```python
dmc.Modal(
    id="my-modal",
    opened=False,
    onClose=lambda: setProps({"opened": False}),
    title="Modal Title",
    size="md",
    centered=True,
    children=[
        dmc.Text("Modal content goes here"),
        dmc.Group([
            dmc.Button("Cancel", variant="default"),
            dmc.Button("Confirm", color="blue"),
        ], mt="md"),
    ]
)
```

--------------------------------

### Install Python Development Dependencies

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md

Install necessary Python packages for development, including editable install of the project.

```bash
pip install -r requires-dev.txt
pip install -e .
```

--------------------------------

### DateInput Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Configures a DateInput component with a label, placeholder, initial value, date formatting, and date range constraints.

```python
dmc.DateInput(
    id="date-field",
    label="Birth Date",
    placeholder="Select date",
    value="2000-01-01",
    valueFormat="DD/MM/YYYY",
    minDate="1900-01-01",
    maxDate="2024-12-31",
    size="md"
)
```

--------------------------------

### TimePicker Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Demonstrates a standalone TimePicker component for selecting a time value, including label and format options.

```python
dmc.TimePicker(
    id="time-picker",
    value="14:30",
    label="Select Time",
    withSeconds=False,
    format="24",
    size="md"
)
```

--------------------------------

### Ordered List Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Creates an ordered list with custom size and spacing. Use for sequential items.

```python
dmc.List([
    dmc.ListItem("Item 1"),
    dmc.ListItem("Item 2"),
    dmc.ListItem("Item 3"),
], type="ordered", size="md", spacing="md")
```

--------------------------------

### PinInput Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Example of the dmc.PinInput component for entering PINs or OTPs. This snippet configures the id, label, length, type, placeholder, and size.

```python
dmc.PinInput(
    id="otp-input",
    label="Enter OTP",
    length=6,
    type="number",
    placeholder="0",
    size="lg"
)
```

--------------------------------

### Collapse Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

Shows how to implement collapsible content. Use the `in_` parameter to control visibility and `transitionDuration` for animation speed.

```python
dmc.Collapse(
    id="collapse",
    in_=False,
    children=dmc.Text("This content can be collapsed"),
    transitionDuration=300
)
```

--------------------------------

### DirectionProvider Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Wrap content with DirectionProvider to manage text direction (LTR or RTL).

```python
dmc.DirectionProvider(
    dir="rtl",
    children=[
        # RTL content
    ]
)
```

--------------------------------

### Autocomplete Input Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Use Autocomplete for a text input with a list of suggestions. It supports searching and can be customized by size.

```python
dmc.Autocomplete(
    id="city-autocomplete",
    label="City",
    placeholder="Type a city name",
    data=["New York", "Los Angeles", "Chicago", "Houston"],
    value="",
    searchable=True,
    size="md"
)
```

--------------------------------

### SimpleGrid Responsive Layout Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Use SimpleGrid for responsive card layouts. Specify the number of columns for different screen sizes.

```Python
dmc.SimpleGrid([
    dmc.Card("Card 1"),
    dmc.Card("Card 2"),
    dmc.Card("Card 3"),
], cols=3, spacing="md")
```

--------------------------------

### ColorInput Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Demonstrates the dmc.ColorInput component for selecting colors. It includes parameters for id, label, value, placeholder, and size.

```python
dmc.ColorInput(
    id="theme-color",
    label="Theme Color",
    value="#228be6",
    placeholder="Choose color",
    size="md"
)
```

--------------------------------

### Accordion Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Creates a collapsible accordion with multiple items. Use for displaying content that can be expanded or collapsed.

```python
dmc.Accordion(
    id="accordion",
    value="item1",
    children=[
        dmc.AccordionItem(
            dmc.Text("Item 1 content"),
            value="item1"
        ),
        dmc.AccordionItem(
            dmc.Text("Item 2 content"),
            value="item2"
        ),
    ],
    multiple=False
)
```

--------------------------------

### PieChart Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Creates a pie chart for visualizing data distribution. Supports custom colors and legends. Ensure data and dataKey are provided.

```python
dmc.PieChart(
    id="distribution-chart",
    data=[
        {"name": "Category A", "value": 400},
        {"name": "Category B", "value": 300},
        {"name": "Category C", "value": 200},
        {"name": "Category D", "value": 100},
    ],
    dataKey="value",
    nameKey="name",
    withLegend=True,
    colors=["blue", "cyan", "teal", "green"]
)
```

--------------------------------

### TypographyStylesProvider Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Apply typography styles to child components using TypographyStylesProvider.

```python
dmc.TypographyStylesProvider(
    children=dmc.Text("Styled typography content")
)
```

--------------------------------

### LineChart Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Ideal for visualizing temporal data, this component displays data as a line. Configure it with data, a data key, and series details.

```python
dmc.LineChart(
    id="sales-chart",
    data=[
        {"day": "Mon", "sales": 400},
        {"day": "Tue", "sales": 300},
        {"day": "Wed", "sales": 200},
        {"day": "Thu", "sales": 500},
        {"day": "Fri", "sales": 350},
    ],
    dataKey="day",
    series=[{"name": "Sales", "color": "blue"}],
    withLegend=True,
    yAxisLabel="Sales ($)"
)
```

--------------------------------

### ColorSchemeToggle Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Implement a dark/light mode toggle using ColorSchemeToggle. Set the default theme and size.

```python
dmc.ColorSchemeToggle(
    id="theme-toggle",
    defaultValue="light",
    size="lg"
)
```

--------------------------------

### Stack Layout Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Use Stack to arrange children vertically with customizable spacing. Suitable for forms or lists.

```Python
dmc.Stack([
    dmc.TextInput(label="Name", placeholder="Enter name"),
    dmc.TextInput(label="Email", placeholder="Enter email"),
    dmc.Button("Submit"),
], spacing="md")
```

--------------------------------

### TextInput Usage Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Demonstrates how to use the TextInput component with various props like label, placeholder, sections, size, and radius.

```python
dmc.TextInput(
    label="Email",
    placeholder="example@email.com",
    leftSection=html.I(className="fas fa-envelope"),
    leftSectionWidth=40,
    rightSection=html.I(className="fas fa-check", style={"color": "green"}),
    size="md",
    radius="md"
)
```

--------------------------------

### Switch Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

The Switch component is a toggle for boolean states. It can be configured with a label, initial checked state, size, and color.

```python
dmc.Switch(
    id="dark-mode-switch",
    label="Dark Mode",
    checked=False,
    size="md",
    color="blue"
)
```

--------------------------------

### MonthPickerInput Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Use MonthPickerInput to allow users to select a month and year. Configure display format, min/max dates, and size.

```python
dmc.MonthPickerInput(
    id="month-picker",
    label="Select Month",
    placeholder="Choose month",
    value="2024-06",
    valueFormat="MMM YYYY",
    minDate="2024-01",
    maxDate="2024-12",
    size="md"
)
```

--------------------------------

### Timeline Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Illustrates how to use the Timeline component to display a series of chronological events with custom bullets.

```python
dmc.Timeline(
    active=1,
    bulletSize="lg",
    lineWidth=4,
    children=[
        dmc.TimelineItem(
            dmc.Text("Event 1 details"),
            title="Event 1",
            bullet=dmc.ThemeIcon(
                html.I(className="fas fa-check"), size="lg", color="green"
            )
        ),
        dmc.TimelineItem(
            dmc.Text("Event 2 details"),
            title="Event 2",
            bullet=dmc.ThemeIcon(
                html.I(className="fas fa-circle"), size="lg", color="blue"
            )
        ),
    ]
)
```

--------------------------------

### NavigationProgress Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Implements a navigation progress bar to provide visual feedback during page transitions. Can be controlled via the `isAnimating` prop.

```python
dmc.NavigationProgress(
    id="nav-progress",
    isAnimating=is_loading
)
```

--------------------------------

### Dash Component Callback Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Illustrates how to use the 'id' property for callback targeting and 'loading_state' for handling asynchronous updates in Dash.

```python
@callback(Output("my-button", "n_clicks"), Input("my-button", "n_clicks"))
def on_click(n_clicks):
    # Triggered when button is clicked
    return n_clicks + 1
```

--------------------------------

### Text Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Display text with control over size, weight, alignment, and color. Suitable for paragraphs and inline text elements.

```Python
dmc.Text("This is a paragraph", size="lg", weight=500, color="blue")
```

--------------------------------

### DatePicker Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Use DatePicker for a standalone calendar component for date selection. Configure the date range, number of columns, and size.

```python
dmc.DatePicker(
    id="calendar",
    value="2024-06-06",
    type="default",
    minDate="2024-01-01",
    numberOfColumns=2,
    size="lg"
)
```

--------------------------------

### Tooltip Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

Implement the Tooltip component to provide brief, contextual information on hover. It supports custom labels, positions, and arrow display.

```python
dmc.Tooltip(
    label="Click to submit form",
    position="top",
    withArrow=True,
    children=dmc.Button("Submit")
)
```

--------------------------------

### Card Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Shows a basic Card component structure with an image, title, and text content, utilizing CardSection for layout.

```python
dmc.Card(
    children=[
        dmc.CardSection(
            dmc.Image(src="image.jpg", h=200),
            inheritPadding=False
        ),
        dmc.CardSection(
            dmc.Group([
                dmc.Title("Card Title", order=3),
            ])
        ),
        dmc.CardSection(
            dmc.Text("Card description and content goes here"),
            inheritPadding=True
        ),
    ],
    p="md",
    shadow="md",
    withBorder=True
)
```

--------------------------------

### AreaChart Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Use this component to visualize data trends over time. It requires data, a data key for the x-axis, and a series configuration.

```python
dmc.AreaChart(
    id="area-chart",
    data=[
        {"month": "Jan", "revenue": 1200, "expenses": 800},
        {"month": "Feb", "revenue": 1900, "expenses": 1200},
        {"month": "Mar", "revenue": 2200, "expenses": 1100},
    ],
    dataKey="month",
    series=[
        {"name": "Revenue", "color": "green"},
        {"name": "Expenses", "color": "red"},
    ],
    withLegend=True,
    withTooltip=True,
    type="monotone",
    yAxisLabel="Amount ($)"
)
```

--------------------------------

### DateTimePicker Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Configures a DateTimePicker component for selecting both date and time, with options for value format, date range, and time format.

```python
dmc.DateTimePicker(
    id="datetime-picker",
    label="Schedule",
    placeholder="Select date and time",
    value="2024-06-06T14:30",
    withSeconds=False,
    valueFormat="DD/MM/YYYY HH:mm",
    minDate="2024-01-01",
    size="md"
)
```

--------------------------------

### Breadcrumbs Navigation Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Displays a hierarchical path for user navigation. Customize the separator and its margins to visually represent the path structure.

```python
dmc.Breadcrumbs([
    dmc.Anchor("Home", href="/"),
    dmc.Anchor("Dashboard", href="/dashboard"),
    dmc.Text("Users"),
], separator="/")
```

--------------------------------

### Sparkline Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Implement small, inline sparklines for trend visualization. Configure data, series, line width, and dimensions. Useful for compact trend displays.

```python
dmc.Sparkline(
    id="sparkline",
    data=[10, 20, 30, 25, 35, 40, 35],
    series=[{"name": "trend", "color": "blue"}],
    strokeWidth=2,
    w=200,
    h=50
)
```

--------------------------------

### Chart Data Structure Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Illustrates the standard data format for chart components, requiring an array of objects with category and value keys.

```python
data = [
    {"category": "A", "value1": 100, "value2": 80},
    {"category": "B", "value1": 150, "value2": 120},
    {"category": "C", "value1": 120, "value2": 100},
]
```

--------------------------------

### Flex Layout Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Use Flex for flexible, directional layouts. Ideal for aligning items horizontally or vertically with control over spacing and justification.

```Python
dmc.Flex([
    dmc.Text("Left"),
    dmc.Spacer(),
    dmc.Text("Right"),
], gap="md", justify="space-between")
```

--------------------------------

### Notification Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Shows how to display a notification with a title, message, color, icon, and close button. Supports auto-closing after a specified duration.

```python
dmc.Notification(
    id="notification",
    title="Success!",
    message="Your changes have been saved",
    color="green",
    icon=html.I(className="fas fa-check"),
    withCloseButton=True,
    autoClose=5000  # Auto-close after 5 seconds
)
```

--------------------------------

### Image Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Use the Image component to display images with customizable dimensions, fit, and radius. It supports alt text and captions for accessibility and context.

```python
dmc.Image(
    src="photo.jpg",
    alt="Photo",
    caption="My Photo",
    w=300,
    h=300,
    fit="cover",
    radius="md"
)
```

--------------------------------

### Debounce TextInput Examples

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Shows different debounce configurations for a TextInput component: delayed by milliseconds, triggered by blur/Enter, or immediate keystroke updates.

```python
# Send value only after user stops typing for 500ms
dmc.TextInput(
    id="search",
    value="",
    debounce=500  # milliseconds
)

# Send value only on Enter or blur
dmc.TextInput(
    id="search",
    value="",
    debounce=True
)

# Send value immediately on every keystroke
dmc.TextInput(
    id="search",
    value="",
    debounce=False
)
```

--------------------------------

### RadarChart Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Renders a radar (spider) chart for multivariate analysis. Requires data with a key for labels and a series definition for different products or entities.

```python
dmc.RadarChart(
    id="performance-chart",
    data=[
        {"metric": "Quality", "product1": 85, "product2": 75},
        {"metric": "Price", "product1": 70, "product2": 85},
        {"metric": "Design", "product1": 80, "product2": 80},
        {"metric": "Performance", "product1": 90, "product2": 70},
    ],
    dataKey="metric",
    series=[
        {"name": "Product 1", "color": "blue"},
        {"name": "Product 2", "color": "red"},
    ],
    withLegend=True
)
```

--------------------------------

### Set Up Python Virtual Environment

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md

Create and activate a Python virtual environment for project development.

```bash
python -m venv venv
source venv/bin/activate
```

--------------------------------

### Button Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Create interactive buttons with customizable text, color, size, and state (disabled, loading). Use the 'id' parameter for callback targeting.

```Python
dmc.Button(
    "Click Me",
    id="my-button",
    n_clicks=0,
    color="green",
    size="md"
)
```

--------------------------------

### Clone and Set Up Repository

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md

Clone your fork of the repository and set up the upstream remote for tracking changes.

```bash
git clone https://github.com/<your-username>/dash-mantine-components.git

cd dash-mantine-components

git remote add upstream https://github.com/snehilvj/dash-mantine-components.git
```

--------------------------------

### Carousel Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Demonstrates how to create a carousel with multiple slides, each containing an image. Configurable with height, slide size, gap, looping, and dragging.

```python
dmc.Carousel(
    id="carousel",
    height="400px",
    slideSize="100%",
    slideGap="md",
    loop=True,
    children=[
        dmc.CarouselSlide(
            dmc.Image(src="image1.jpg", h="100%")
        ),
        dmc.CarouselSlide(
            dmc.Image(src="image2.jpg", h="100%")
        ),
        dmc.CarouselSlide(
            dmc.Image(src="image3.jpg", h="100%")
        ),
    ]
)
```

--------------------------------

### DateInput Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Use DateInput for a simple date input without a calendar popup. Configure label, placeholder, date range, and display format.

```python
dmc.DateInput(
    id=None,
    value=None,
    label=None,
    placeholder=None,
    description=None,
    error=None,
    disabled=False,
    minDate=None,
    maxDate=None,
    valueFormat="MMMM D, YYYY",
    size="sm"
)
```

--------------------------------

### Responsive Box Styling Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Demonstrates applying responsive styles to Box component's width, padding, and margin based on different screen breakpoints.

```python
dmc.Box(
    w={"base": "100%", "sm": "50%", "md": "33%", "lg": "25%"},
    p={"base": "sm", "md": "lg"},
    m={"base": 0, "md": "md"}
)
```

--------------------------------

### Rating Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Example of how to use the dmc.Rating component with custom values for id, value, count, size, and color.

```python
dmc.Rating(
    id="product-rating",
    value=0,
    count=5,
    size="lg",
    color="blue"
)
```

--------------------------------

### Affix Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/layout-structure-components.md

Use the Affix component to fix an element to a specific position on the screen, such as a 'Scroll to Top' button. It allows for custom positioning and z-index.

```python
dmc.Affix(
    children=dmc.Button("Scroll to Top", id="scroll-btn"),
    position="bottom-right",
    bottom=20,
    right=20
)
```

--------------------------------

### Quickstart Dash App with DatePickerInput

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/README.md

A basic Dash application demonstrating the use of dmc.MantineProvider and dmc.DatePickerInput. It includes a callback to update text based on the selected date.

```python
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)
```

--------------------------------

### Implement Responsive Layout with Padding, Width, and Display

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/configuration-utilities.md

Create responsive layouts by defining properties like padding, width, and display that adapt to different screen sizes. Use base and breakpoint-specific values.

```python
dmc.Box(
    children=[...],
    p={"base": 0, "sm": "md", "md": "lg"},     # Padding
    w={"base": "100%", "sm": "90%", "md": "80%"},  # Width
    display={"base": "block", "md": "flex"}     # Display
)
```

--------------------------------

### JsonInput Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Shows how to use the dmc.JsonInput component for editing JSON data. This example sets an id, label, initial JSON value, and minimum rows.

```python
dmc.JsonInput(
    id="config-json",
    label="JSON Config",
    value='{"theme": "dark", "size": "md"}',
    minRows=6,
    size="md"
)
```

--------------------------------

### Complete AppShell Layout Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/layout-structure-components.md

Use this snippet to create a full application layout including header, navbar, main content, and footer. It demonstrates the structure and nesting of various AppShell components.

```python
dmc.AppShell(
    layout="default",
    children=[
        dmc.AppShellHeader(
            dmc.Group([
                dmc.Title("My App", order=1),
            ]),
            h=60
        ),
        dmc.AppShellNavbar(
            dmc.Stack([
                dmc.NavLink(label="Dashboard", href="/dashboard"),
                dmc.NavLink(label="Settings", href="/settings"),
            ]),
            w=200
        ),
        dmc.AppShellMain(
            dmc.Container([
                dmc.Title("Page Title"),
                dmc.Text("Content"),
            ])
        ),
        dmc.AppShellFooter(
            dmc.Group([
                dmc.Text("© 2024 My Company"),
            ]),
            h=60
        ),
    ]
)
```

--------------------------------

### MantineProvider Setup for Dash App

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Demonstrates how to set up the MantineProvider to wrap your Dash application, enabling Mantine theming. This is the entry point for applying styles and themes.

```python
import dash
from dash import Dash, callback, Input, Output
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.MantineProvider([
    dmc.Container([
        dmc.Title("Dashboard", order=1),
        dmc.Button("Click me", id="btn", n_clicks=0),
        dmc.Text(id="output"),
    ], size="md", py="xl"),
])

@callback(Output("output", "children"), Input("btn", "n_clicks"))
def update(n):
    return f"Button clicked {n} times"

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

--------------------------------

### Build Dash Mantine Components

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md

Build the components for Python, R, and Julia. This command should be run after setting up the environment and after making changes to components.

```bash
npm run build
```

--------------------------------

### Example Usage of Textarea

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/form-components.md

Demonstrates how to use the Textarea component with custom labels, placeholders, minimum rows, and size. Useful for collecting user comments or longer text entries.

```python
dmc.Textarea(
    id="comments-input",
    label="Comments",
    placeholder="Enter your comments here",
    value="",
    minRows=6,
    size="md"
)
```

--------------------------------

### BarChart Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Renders a vertical bar chart with a legend. Requires data with categories and values, and a series definition.

```python
dmc.BarChart(
    id="category-chart",
    data=[
        {"category": "A", "value1": 100, "value2": 80},
        {"category": "B", "value1": 150, "value2": 120},
        {"category": "C", "value1": 120, "value2": 100},
    ],
    dataKey="category",
    series=[
        {"name": "Series 1", "color": "blue"},
        {"name": "Series 2", "color": "cyan"},
    ],
    withLegend=True,
    orientation="vertical"
)
```

--------------------------------

### MantineColor Usage Examples

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Illustrates how to apply Mantine theme colors to components like Button, Text, and Badge.

```python
dmc.Button("Submit", color="blue")
dmc.Text("Error", color="red.6")
dmc.Badge("Active", color="green.4")
```

--------------------------------

### Menu Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

Demonstrates the creation of a dropdown menu with customizable items, including icons and dividers. Use this to build interactive menus within your Dash application.

```python
dmc.Menu(
    id="menu",
    opened=False,
    children=[
        dmc.MenuTarget(
            dmc.Button("Open menu")
        ),
        dmc.MenuDropdown([
            dmc.MenuItem("Edit", leftSection=html.I(className="fas fa-edit")),
            dmc.MenuItem("Delete", leftSection=html.I(className="fas fa-trash")),
            dmc.MenuDivider(),
            dmc.MenuItem("More options"),
        ]),
    ]
)
```

--------------------------------

### RadarChart

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Radar/spider chart component for multivariate analysis. It displays multiple quantitative variables on axes starting from the same point.

```APIDOC
## RadarChart

### Description
Radar/spider chart component for multivariate analysis. It displays multiple quantitative variables on axes starting from the same point.

### Signature
```python
dmc.RadarChart(
    id=None,
    data=None,
    dataKey=None,
    series=None,
    withLegend=False,
    withTooltip=True,
    **kwargs
)
```

### Parameters
#### Required Parameters
- **data** (list) - Array of data objects
- **dataKey** (string) - Key for axis labels
- **series** (list) - Series to render

#### Optional Parameters
- **id** (string) - Unique ID for callback targeting
- **withLegend** (bool) - Show legend. Default: False
- **withTooltip** (bool) - Show tooltip. Default: True

### Returns
Radar chart element.

### Example
```python
dmc.RadarChart(
    id="performance-chart",
    data=[
        {"metric": "Quality", "product1": 85, "product2": 75},
        {"metric": "Price", "product1": 70, "product2": 85},
        {"metric": "Design", "product1": 80, "product2": 80},
        {"metric": "Performance", "product1": 90, "product2": 70},
    ],
    dataKey="metric",
    series=[
        {"name": "Product 1", "color": "blue"},
        {"name": "Product 2", "color": "red"},
    ],
    withLegend=True
)
```
```

--------------------------------

### SemiCircleProgress Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/extensions-components.md

Use this component to display a semi-circle progress indicator. Configure its value, size, color, and label.

```python
dmc.SemiCircleProgress(
    id="semi-progress",
    value=60,
    size="lg",
    color="orange",
    label="60%"
)
```

--------------------------------

### DonutChart Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/chart-components.md

Generates a donut chart, which is a pie chart with a hole in the center. Allows customization of the inner radius and colors.

```python
dmc.DonutChart(
    id="donut-chart",
    data=[
        {"name": "Product A", "value": 450},
        {"name": "Product B", "value": 300},
        {"name": "Product C", "value": 250},
    ],
    dataKey="value",
    nameKey="name",
    withLegend=True,
    innerRadius=0.4
)
```

--------------------------------

### Overlay Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/modal-popover-components.md

This component creates an overlay that covers other elements. It can be used for various purposes like dimming the background or displaying modal content. Parameters like `opacity`, `color`, and `blur` allow for customization.

```python
dmc.Overlay(
    children=None,
    opacity=0.5,
    color="black",
    blur=None,
    zIndex=1000,
    **kwargs
)
```

--------------------------------

### YearPickerInput Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/date-time-components.md

Use YearPickerInput for selecting a specific year. It supports setting min/max selectable years and input size.

```python
dmc.YearPickerInput(
    id="year-picker",
    label="Select Year",
    placeholder="Choose year",
    value="2024",
    minDate="2000",
    maxDate="2030",
    size="md"
)
```

--------------------------------

### TextInput with Wrapper Props Usage

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/types-and-props.md

Shows how to configure TextInput with label, description, error messages, and control the order of elements using InputWrapperProps.

```python
dmc.TextInput(
    label="Name",
    description="Enter your full name",
    error="Name is required" if not name else None,
    required=True,
    withAsterisk=True,
    inputWrapperOrder=["label", "input", "description", "error"]
)
```

--------------------------------

### Paper Component Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

The Paper component creates a card-like container. Customize its appearance with padding, radius, shadow, and border options.

```python
dmc.Paper([
    dmc.Title("Card Title", order=3),
    dmc.Text("Card content"),
], p="lg", shadow="md", withBorder=True)
```

--------------------------------

### Pagination Controls Example

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/data-display-components.md

Provides navigation controls for paginated content. Configure the total number of pages and display options like siblings and boundaries to manage user navigation.

```python
dmc.Pagination(
    id="table-pagination",
    value=1,
    total=10,
    size="md",
    siblings=1,
    boundaries=1
)
```

--------------------------------

### Create a Horizontal Divider

Source: https://github.com/snehilvj/dash-mantine-components/blob/master/_autodocs/core-components.md

Use dmc.Divider to create a visual separator. This example shows a horizontal divider with a specified color and size.

```python
dmc.Divider(orientation="horizontal", color="gray", size="sm")
```