Por que UIKitPR?

Tailwind é excelente para compor layouts e Bootstrap acelera componentes comuns. O UIKitPR leva as duas ideias ao ecossistema PyReact:

• classes utilitárias previsíveis (flex, gap-4, grid-cols-3, p-6);
• componentes Python que retornam VNodes PyReact;
• temas claro, escuro e customizados por CSS variables;
• SSR, handlers e propriedades compatíveis com h() do PyReact;
• CSS incluído no wheel e exportável pela CLI;
• nenhuma dependência JavaScript ou etapa de compilação.

Instalação com PRPM

prpm add uikitpr

Também é possível instalar com pip install uikitpr.

Início rápido

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


def App(props):
    return UIProvider(
        Card(
            CardBody(
                Stack(
                    Heading("Olá, PyReact!", level=1),
                    Button("Começar", variant="primary", onClick=lambda: print("oi")),
                    gap=4,
                )
            )
        ),
        class_name="p-6",
        full_height=True,
    )

Os componentes aceitam filhos diretamente, como acima, ou através de h(Component, {"children": ...}):

h(Button, {"children": "Salvar", "variant": "outline"})

Essa forma explícita em props é importante na versão atual do PyReact, cujo renderer não transfere automaticamente os filhos de h(Component, props, *children) para componentes funcionais.

Utilitários

Use classes diretamente em className ou class_name:

from uikitpr import Box, cx

Box(
    "Conteúdo",
    class_name=cx(
        "flex items-center gap-4 p-6 rounded shadow",
        {"bg-primary-soft": destaque, "hidden": not visivel},
    ),
)

O CSS inclui layout flex/grid, espaçamento, sizing, tipografia, cores, bordas, sombras e variantes responsivas sem caracteres especiais, como md-grid-cols-3 e lg-grid-cols-4.

Componentes

Variantes mais usadas:

Button("Primário", variant="primary")
Button("Contorno", variant="outline", size="lg")
Badge("Ativo", tone="success", pill=True)
Alert("Confira os dados.", tone="warning", title="Atenção")
Input(label="E-mail", name="email", type="email", help_text="Seu acesso.")

Propriedades não consumidas pelo componente são encaminhadas ao VNode DOM, incluindo onClick, aria-*, data-*, style, id e name.

Temas

UIProvider inclui o CSS e configura o tema:

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

Crie uma marca usando tokens:

from uikitpr import create_theme

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

UIProvider(AppContent(), theme=brand)

CSS externo e CSP

Por padrão, UIProvider inclui um <link> com o stylesheet em uma data: URL. Esse formato evita o escaping aplicado pelo SSR do PyReact a filhos de <style>. Para produção com CSP estrita, exporte e sirva o asset separadamente:

uikitpr css -o static/uikitpr.css
uikitpr css -o static/uikitpr.min.css --minify

Então use:

from uikitpr import Styles

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

Para renderização exclusivamente cliente, Styles(inline=True, nonce="...") também é suportado em políticas CSP baseadas em nonce.

Desenvolvimento

prpm install
prpm test
prpm pack
prpm verify dist

O exemplo completo está em examples/dashboard.py.

Licença

MIT. Veja LICENSE.