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.3.tar.gz (243.1 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.3-py3-none-any.whl (288.9 kB view details)

Uploaded Python 3

File details

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

File metadata

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

File hashes

Hashes for appkit_mantine-1.13.3.tar.gz
Algorithm Hash digest
SHA256 aab3a79a77ae85ee268b28fa6e96cc61eeea5bef4bdf2b3278dc257c0f2f3986
MD5 39124a7bc565f04bfe381f519d52070d
BLAKE2b-256 66709ab729e3aec6aacbf07e407c54a61bae3f0e3a4d6d3b98200086185bda97

See more details on using hashes here.

File details

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

File metadata

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

File hashes

Hashes for appkit_mantine-1.13.3-py3-none-any.whl
Algorithm Hash digest
SHA256 6d51e587b8b28038d1392fadf84bb238fbe07edfae6fa0788b2d65dcb7b14b67
MD5 34429463a31a0a067fd259337cadfd7c
BLAKE2b-256 dfa87af1259b128f494b18fd3a0b9b8f8b760cc24a316cfcb1e25bdf5ac9af96

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

This release

1.13.3 This release

2 files

1.13.2

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