Why UIKitPR?

UIKitPR brings Tailwind-like composition and ready-made components to PyReact:

• predictable utility classes such as flex, gap-4, and grid-cols-3;
• Python components that return PyReact VNodes;
• light, dark, and custom themes powered by CSS variables;
• SSR, handlers, and properties compatible with PyReact's h();
• CSS bundled in the wheel and exportable through the CLI;
• motion with springs, timelines, stagger, scroll, events, and lifecycle;
• fingerprinted web assets, manifests, updates, and Service Workers;
• loaders, skeletons, and ready-to-use visual states;
• text animations, animated backgrounds, marquees, and creative surfaces;
• a native 135-item creative catalog for PyReact;
• no JavaScript dependency or compilation step.

Installation

prpm add uikitpr

You can also use pip install uikitpr.

Quick start

from uikitpr import Button, Card, CardBody, Heading, Stack, UIProvider


def App(props):
    return UIProvider(
        Card(
            CardBody(
                Stack(
                    Heading("Hello, PyReact!", level=1),
                    Button("Get started", variant="primary"),
                    gap=4,
                )
            )
        ),
        class_name="p-6",
        full_height=True,
    )

Components accept children directly or through h(Component, {"children": ...}). The explicit children property is important with current PyReact functional components.

Utilities

Use classes in className or class_name:

from uikitpr import Box, cx

Box(
    "Content",
    class_name=cx(
        "flex items-center gap-4 p-6 rounded shadow",
        {"bg-primary-soft": highlighted, "hidden": not visible},
    ),
)

The stylesheet includes flex/grid layout, spacing, sizing, typography, colors, borders, shadows, and responsive variants such as md-grid-cols-3.

Components

Unconsumed properties are forwarded to the DOM VNode, including onClick, aria-*, data-*, style, id, and name. See the component reference.

Themes

UIProvider includes the CSS and selects a theme:

UIProvider(AppContent(), theme="dark", full_height=True)

Create a branded theme with tokens:

from uikitpr import create_theme

brand = create_theme(
    "my-brand",
    primary="#ff006e",
    primary_hover="#d9005d",
    radius="1rem",
)

UIProvider(AppContent(), theme=brand)

Motion and interaction

UIProvider includes the UIKitPR Motion runtime by default:

from uikitpr import Motion, Spring, Transition

Motion(
    Card(...),
    preset="fade-up",
    trigger="in-view",
    while_hover={"transform": "translateY(-6px) scale(1.02)"},
    while_tap={"transform": "scale(.97)"},
    transition=Transition(
        duration=.7,
        spring=Spring(stiffness=170, damping=18),
    ),
)

The engine supports mount, in-view, click, hover, tap, focus, and scroll animations; presets and custom keyframes; spring physics; staggered groups; timelines; lifecycle events; declarative controls; dynamically added VNodes; and prefers-reduced-motion. See the Motion guide.

Creative effects

from uikitpr import AuroraBackground, BlurText, Marquee, SpotlightCard

AuroraBackground(
    SpotlightCard(BlurText("Build something memorable", delay=.06)),
    color="#6d4aff",
    secondary="#26c6da",
)

The package includes animated text, backgrounds, borders, spotlights, and continuous marquees, all configurable through Python props and compatible with prefers-reduced-motion. Browse the live, copy-ready catalog on the GitHub Pages documentation.

Complete creative catalog

The extended catalog covers 22 text animations, 28 interactive animations, 38 UI components, and 47 backgrounds. Import entries directly from uikitpr:

from uikitpr import Aurora, ClickSpark, Dock, GlitchText

See the complete list. The existing UIKitPR layout Stack remains unchanged; the creative draggable stack is available as CreativeStack or uikitpr.creative.Stack.

Web cache and deployment

CacheManager writes SHA-256-fingerprinted assets, an inspectable manifest, and a versioned Service Worker:

from pathlib import Path
from uikitpr import CacheManager, CachePolicy, cache_script, motion_script, stylesheet

cache = CacheManager(
    Path("public"),
    policy=CachePolicy(name="my-app", version="2026.07.27"),
)
css = cache.add_text("uikitpr.css", stylesheet())
motion = cache.add_text("uikitpr-motion.js", motion_script())
runtime = cache.add_text("uikitpr-cache.js", cache_script())
cache.finalize(precache=["./"])

The browser exposes window.UIKitPRCache.register(), refresh(), manifest(), status(), and clear(). See the cache guide.

Loaders and visual states

from uikitpr import OrbitLoader, Skeleton, SkeletonCard

OrbitLoader(size="lg")
Skeleton(lines=3)
SkeletonCard()

DotsLoader, BarsLoader, RingLoader, PulseLoader, WaveLoader, and PageLoader are also available.

External CSS and CSP

For strict Content Security Policy deployments, export and serve assets separately:

uikitpr css -o static/uikitpr.css
uikitpr css -o static/uikitpr.min.css --minify
uikitpr motion -o static/uikitpr-motion.js
uikitpr creative -o static/uikitpr-creative.js
uikitpr cache -o static/uikitpr-cache.js

from uikitpr import Styles

Styles(href="/static/uikitpr.css")
UIProvider(AppContent(), with_styles=False)

Client-only rendering also supports Styles(inline=True, nonce="...").

Development

prpm install
prpm test
prpm pack
prpm verify dist

The complete example is available in examples/dashboard.py. Build and serve the official website with prpm run site and prpm run serve.

Documentation

The complete English documentation is available on Read the Docs.

License

MIT. See LICENSE.