appkit-mantine

PyPI version Python 3.13+ License: MIT

reflex.dev components based on MantineUI

A Reflex wrapper library exposing the full Mantine UI v9.4.1 component suite — inputs, buttons, overlays, navigation, layout, data display, feedback, charts, maps, scheduling and more — for building robust, type-safe Python web applications.

✨ Features

  • 🧩 Full Component Coverage - 90+ components across inputs, buttons, overlays, navigation, layout, data display, feedback, charts, maps, scheduling, and typography
  • 🔒 Type-Safe - Full type annotations with IDE autocomplete support for all props and event handlers (.pyi stubs for every component)
  • 📚 Rich Examples - Production-ready code examples for every component with common patterns and edge cases
  • 🏗️ Clean Architecture - Inheritance-based design (MantineComponentBase → MantineLayoutComponentBase → MantineInputComponentBase) eliminating code duplication across ~40 common props
  • 🎨 Mantine Integration - Seamless integration with Mantine's theming, color modes, and design system; MantineProvider is auto-injected
  • ⚡ Modern Stack - Built on Reflex 0.9.6+ with React 18 and Mantine 9.4.1

📦 Installation

Using pip

pip install appkit-mantine

Using uv (recommended)

uv add appkit-mantine

Development Installation

For local development or to run the demo application:

# Clone the repository
git clone https://github.com/jenreh/appkit.git
cd appkit

# Install with uv (installs workspace components)
uv sync

# Run the demo app
reflex run

🚀 Quick Start

import reflex as rx
import appkit_mantine as mn


class FormState(rx.State):
    email: str = ""
    password: str = ""


def login_form() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.heading("Login"),
            # Basic input with validation
            mn.form.input(
                label="Email",
                placeholder="you@example.com",
                value=FormState.email,
                on_change=FormState.set_email,
                required=True,
                type="email",
            ),
            # Password input with visibility toggle
            mn.password_input(
                label="Password",
                value=FormState.password,
                on_change=FormState.set_password,
                required=True,
            ),
            rx.button("Sign In", on_click=FormState.handle_login),
            spacing="4",
        ),
        max_width="400px",
    )


app = rx.App()
app.add_page(login_form)

📋 Available Components

Inputs

Component Description Documentation
text_input Basic text input / text inputs showcase Guide
input Polymorphic base input element with sections, variants, sizes Examples
password_input Password field with visibility toggle Examples
number_input Numeric input with formatting, min/max, step controls Examples
textarea Multi-line text input with auto-resize Guide
json_input JSON input with formatting, validation, parser, pretty printing Examples
masked_input Input masking for phone numbers, credit cards, custom patterns (uncontrolled) Guide
color_input / color_picker Color entry and swatch picker Examples
file_input / dropzone File selection input and drag-and-drop upload zone Examples
rating, pin_input, chip, fieldset Additional form primitives Examples
checkbox, radio, switch, segmented_control Toggle-style inputs Examples
slider, range_slider, hue_slider, alpha_slider, angle_slider Slider family Examples
select, multi_select, autocomplete, combobox, tags_input, tree_select Selection and combobox-based inputs Examples
rich_select Advanced select component with search and grouping Examples
date_input, date_picker, date_picker_input, date_time_picker, time_input, time_picker, month_picker, year_picker, calendar Full date/time picker family Examples
rich_text_editor WYSIWYG editor powered by Tiptap Guide

Buttons

Component Description Documentation
action_icon Lightweight button for icons with size, variant, radius, disabled state Examples
button Button with variants, sizes, gradient, loading states, sections Examples
close_button, unstyled_button Additional button variants Examples

Overlays

Component Description Documentation
modal Accessible overlay dialog with focus trap and scroll lock Examples
drawer Overlay drawer area sliding from any side Docs
alert_dialog Confirmation/alert dialog with focus management Examples
popover, hover_card, tooltip, dialog, overlay, loading_overlay Contextual overlays Examples
menu, menubar Dropdown and application menus Examples

Navigation & Layout

Component Description Documentation
nav_link, tabs, breadcrumbs, pagination, stepper, anchor, burger, table_of_contents Navigation primitives Examples
navigation_progress Page loading progress indicator Examples
app_shell, container, stack, group, grid, simple_grid, flex, center, space, divider, affix, scroller, splitter Layout building blocks Examples
scroll_area Scrollable container with custom scrollbars and virtualization Examples

Data Display & Feedback

Component Description Documentation
table Table component for tabular data display Examples
accordion, avatar, badge, card, data_list, empty_state, image, indicator, kbd, paper, spoiler, theme_icon, timeline Data display components Examples
alert, loader, notification, progress, ring_progress, skeleton Feedback components Examples
tree, carousel Hierarchical and carousel display Examples
number_formatter Formats numeric input with parser/formatter, returns parsed value Examples

Charts

Component Description Documentation
area_chart, bar_chart, line_chart, pie_chart, donut_chart, radar_chart, radial_bar_chart, scatter_chart, composite_chart, bubble_chart, funnel_chart, heatmap, treemap, sankey_chart, sparkline, bars_list Recharts-powered charting components Examples

Maps & Scheduling

Component Description Documentation
map, MapMarker, MapControls, MapNavigation, MapDirectionsPanel, MapArc, MapGeoJSON, MapRoute, MapClusterLayer MapLibre-based map components Examples
schedule, resources_schedule, resources_day_view, resources_week_view, resources_month_view, agenda_view Calendar/resource scheduling components Examples / Resources

Typography & Markdown

Component Description Documentation
text, title, code, mark, highlight, blockquote, list_ Typography primitives Examples
markdown_preview Markdown renderer with Mermaid diagrams and math support Examples

Common Props (Inherited by All Inputs)

All input components inherit ~40 common props from MantineInputComponentBase:

# Input.Wrapper props
label = "Field Label"
description = "Helper text"
error = "Validation error"
required = True
with_asterisk = True  # Show red asterisk for required fields

# Visual variants
variant = "filled"  # "default" | "filled" | "unstyled"
size = "md"  # "xs" | "sm" | "md" | "lg" | "xl"
radius = "md"  # "xs" | "sm" | "md" | "lg" | "xl"

# State management
value = State.field_value
default_value = "Initial value"
placeholder = "Enter text..."
disabled = False

# Sections (icons, buttons)
left_section = rx.icon("search")
right_section = rx.button("Clear")
left_section_pointer_events = "none"  # Click-through

# Mantine style props
w = "100%"  # width
maw = "500px"  # max-width
m = "md"  # margin
p = "sm"  # padding

# Event handlers
on_change = State.handle_change
on_focus = State.handle_focus
on_blur = State.handle_blur

📖 Usage Examples

Basic Input with Validation

import reflex as rx
import appkit_mantine as mn


class EmailState(rx.State):
    email: str = ""
    error: str = ""

    def validate_email(self):
        if "@" not in self.email:
            self.error = "Invalid email format"
        else:
            self.error = ""


def email_input():
    return mn.form.input(
        label="Email Address",
        description="We'll never share your email",
        placeholder="you@example.com",
        value=EmailState.email,
        on_change=EmailState.set_email,
        on_blur=EmailState.validate_email,
        error=EmailState.error,
        required=True,
        type="email",
        left_section=rx.icon("mail"),
    )

Number Input with Formatting

class PriceState(rx.State):
    price: float = 0.0


def price_input():
    return mn.number_input(
        label="Product Price",
        value=PriceState.price,
        on_change=PriceState.set_price,
        prefix="$",
        decimal_scale=2,
        fixed_decimal_scale=True,
        thousand_separator=",",
        min=0,
        max=999999.99,
        step=0.01,
    )

Masked Input (Phone Number)

class PhoneState(rx.State):
    phone: str = ""

    def handle_phone(self, value: str) -> None:
        self.phone = value


def phone_input():
    # Use as an UNCONTROLLED component: default_value + on_change (not value)
    return mn.masked_input(
        label="Phone Number",
        mask="+1 (000) 000-0000",
        default_value="+1 (555) 123-4567",
        on_change=PhoneState.handle_phone,
        placeholder="+1 (555) 123-4567",
    )

Date Input with Constraints

from datetime import date, timedelta


class BookingState(rx.State):
    checkin: str = ""


def date_picker():
    today = date.today()
    max_date = today + timedelta(days=365)

    return mn.date_input(
        label="Check-in Date",
        value=BookingState.checkin,
        on_change=BookingState.set_checkin,
        min_date=today.isoformat(),
        max_date=max_date.isoformat(),
        clear_button_props={"aria_label": "Clear date"},
    )

Rich Text Editor

class EditorState(rx.State):
    content: str = "<p>Start typing...</p>"


def editor():
    return mn.rich_text_editor(
        value=EditorState.content,
        on_change=EditorState.set_content,
        toolbar_config=mn.EditorToolbarConfig(
            controls=[
                mn.ToolbarControlGroup.FORMATTING,
                mn.ToolbarControlGroup.LISTS,
                mn.ToolbarControlGroup.LINKS,
            ]
        ),
    )

Action Icon

def action_icon_example():
    return mn.action_icon(
        rx.icon("heart"),
        variant="filled",
        color="red",
        size="lg",
        on_click=State.like_item,
    )

Autocomplete

class SearchState(rx.State):
    query: str = ""


def autocomplete_example():
    return mn.autocomplete(
        label="Search",
        placeholder="Type to search...",
        data=["Apple", "Banana", "Cherry"],
        value=SearchState.query,
        on_change=SearchState.set_query,
    )

Button

def button_example():
    return mn.button(
        "Click me",
        variant="gradient",
        gradient={"from": "blue", "to": "cyan"},
        size="lg",
        on_click=State.handle_click,
    )

Combobox

def combobox_example():
    return mn.combobox(
        label="Select option",
        data=[
            {"value": "react", "label": "React"},
            {"value": "vue", "label": "Vue"},
        ],
        on_option_submit=State.set_selected,
    )

Input

def input_example():
    return mn.input(
        placeholder="Enter text...",
        left_section=rx.icon("search"),
        right_section=rx.button("Clear"),
    )

JSON Input

class JsonState(rx.State):
    data: str = '{"name": "example"}'


def json_input_example():
    return mn.json_input(
        label="JSON Data",
        value=JsonState.data,
        on_change=JsonState.set_data,
        format_on_blur=True,
    )

Nav Link

def nav_link_example():
    return mn.nav_link(
        label="Dashboard",
        left_section=rx.icon("home"),
        active=True,
        on_click=State.navigate_to_dashboard,
    )

Number Formatter

class PriceState(rx.State):
    amount: float = 1234.56


def number_formatter_example():
    return mn.number_formatter(
        value=PriceState.amount,
        prefix="$",
        thousand_separator=",",
        decimal_scale=2,
    )

Select

class SelectState(rx.State):
    choice: str = ""


def select_example():
    return mn.select(
        label="Choose one",
        data=["Option 1", "Option 2", "Option 3"],
        value=SelectState.choice,
        on_change=SelectState.set_choice,
    )

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Project links

Key dates

PyPI data
Data sourced directly from PyPI's database.
  • Released:
Newer release available (1.14.0)

1 maintainer

PyPI data
Data sourced directly from PyPI's database.
Avatar for jenreh from gravatar.com jenreh

License

MIT License (MIT)

Requires

Python >=3.13

Tags

components forms input mantine react reflex ui web

Classifiers

Report project as malware

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

appkit_mantine-1.13.2.tar.gz (259.0 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

appkit_mantine-1.13.2-py3-none-any.whl (307.0 kB view details)

Uploaded Python 3

File details

Details for the file appkit_mantine-1.13.2.tar.gz.

File metadata

  • Download URL: appkit_mantine-1.13.2.tar.gz
  • Upload date:
  • Size: 259.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: uv/0.11.28 {"installer":{"name":"uv","version":"0.11.28","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Ubuntu","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}

File hashes

Hashes for appkit_mantine-1.13.2.tar.gz
Algorithm Hash digest
SHA256 e8ae70ac5106646da901cdd3954d4d9960cefa21ece16c552855aa06a623ec20
MD5 e063efc5c51fd03284d7fd5fe1c703b3
BLAKE2b-256 7087ffc52717e1ed44bb706c94dabdebd1b8b585dd6b4c08579383c62411b414

See more details on using hashes here.

File details

Details for the file appkit_mantine-1.13.2-py3-none-any.whl.

File metadata

  • Download URL: appkit_mantine-1.13.2-py3-none-any.whl
  • Upload date:
  • Size: 307.0 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: uv/0.11.28 {"installer":{"name":"uv","version":"0.11.28","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Ubuntu","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}

File hashes

Hashes for appkit_mantine-1.13.2-py3-none-any.whl
Algorithm Hash digest
SHA256 b538052c3ead4b5e3695f0354b53a51136af16505504f33a2d85be5e3bf95c69
MD5 35f0100d786ca6a5ad06a23cb0a9c1ef
BLAKE2b-256 0b100fffa13b09662fa78706b42af7aa2d38a474a256a4baec6c242b5de5f000

See more details on using hashes here.

Release history Release notifications | RSS feed

1.14.0

2 files

1.13.7

2 files

1.13.6

2 files

1.13.3

2 files

This release

1.13.2 This release

2 files

1.13.1

2 files

1.13.0

2 files

1.12.2

2 files

1.12.1

2 files

1.12.0

2 files

1.11.3

2 files

1.11.2

2 files

1.11.1

2 files

1.11.0

2 files

1.10.2

2 files

1.10.1

2 files

1.10.0

2 files

1.9.7

2 files

1.9.6

2 files

1.9.5

2 files

1.9.4

2 files

1.9.3

2 files

1.9.2

2 files

1.9.1

2 files

1.9.0

2 files

1.8.6

2 files

1.8.5

2 files

1.8.4

2 files

1.8.3

2 files

1.8.2

2 files

1.8.1

2 files

1.8.0

2 files

1.7.0

2 files

1.6.3

2 files

1.6.2

2 files

1.6.1

2 files

1.6.0

2 files

1.5.1

2 files

1.5.0

2 files

1.4.3

2 files

1.4.2

2 files

1.4.1

2 files

1.4.0

2 files

1.3.0

2 files

1.2.6

2 files

1.2.5

2 files

1.2.4

2 files

1.2.3

2 files

1.2.2

2 files

1.2.1

2 files

1.2.0

2 files

1.1.2

2 files

1.1.1

2 files

1.1.0

2 files

1.0.5

2 files

1.0.4

2 files

1.0.3

2 files

1.0.2

2 files

1.0.1

2 files

1.0.0

2 files

0.17.3

2 files

0.17.2

2 files

0.17.1

2 files

0.17.0

2 files

0.16.3

2 files

0.16.2

2 files

0.16.1

2 files

0.16.0

2 files

0.15.4

2 files

0.15.3

2 files

0.15.2

2 files

0.15.1

2 files

0.15.0

2 files

0.14.1

2 files

0.14.0

2 files

0.13.1

2 files

0.13.0

2 files

0.12.1

2 files

0.12.0

2 files

0.11.0

2 files

0.10.0

2 files

0.9.0

2 files

0.8.0

2 files

0.7.8

2 files

0.7.7

2 files

0.7.6

2 files

0.7.5

2 files

0.7.4

2 files

0.7.3

2 files

0.7.2

2 files

0.7.1

2 files

0.7.0

2 files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page