OutfitKit

Librería CSS para construir aplicaciones internas (back-office, POS, dashboards, manufactura, HR). Tema oscuro y sobrio por defecto, acento terracota, tipografía Inter. Toda la interactividad va con Datastar — la librería es 100% declarativa.

Sistema · tokens.css

Una capa única de variables CSS define color, tipografía, espaciado, radios, sombras y motion. Tema erplora (oscuro) y erplora-light.

CSS plano

Cada componente vive en un .css independiente. Sin @apply, sin build steps. Importa lo que necesitas o el bundle outfitkit.css.

Datastar · CDN

Estados con data-signals, data-on-*, data-bind-*. Esta misma página usa Datastar para tema, viewport y filtrado del sidebar.

Composición del shell

Esta misma documentación es un ejemplo en vivo de la librería: la barra lateral usa .ok-sidebar con sus grupos, items, iconos y badges; el buscador es .ok-search + .ok-input--sm; la cabecera es .ok-topbar con breadcrumb y acciones; la app entera está envuelta en .ok-app.

Macros Jinja (opcional)

Si tu backend es Python con Jinja2 (FastAPI, Flask, Django+jinja2 backend), puedes consumir los componentes como macros: pip install outfitkit. Las macros funcionan tanto como {{ button(...) }} en Jinja2 vanilla como <Button label="x" /> con JinjaX — el mismo archivo soporta los dos modos sin duplicación.