现代 Web 开发需要复杂的依赖关系和跨多种语言的广泛样板来制作良好的 UI。 MonsterUI可以解决这个问题。
Web UI 开发的问题
构建有吸引力的 Web 应用程序一直很复杂。 FastHTML将 HTMX、Starlette、HTML 和 HTTP 基础知识结合在一起，简化了 Web 应用程序开发。
获得正确的美学仍然太难了。它需要广泛的CSS 、具有长内联类字符串的框架，或两者兼而有之。您可以尝试Bootstrap或Tailwind CSS。现在，您正在管理类名称、记住实用程序模式并检查文档中的样板类字符串。这导致代码对于非专业设计者来说很难构建、维护和更改。
典型的应用程序有许多组件：导航栏、表单、模式、卡片等等。每个都需要仔细考虑样式、响应行为和交互状态。随着应用程序的增长，持续管理这些样式变得越来越具有挑战性。
当我开发网络应用程序时，这一点对我来说变得显而易见。我发现自己在多个组件中复制和粘贴类字符串并维护复杂的样式逻辑。 FastHTML 使应用程序逻辑开发成为一种乐趣，但样式方面仍然是一个持续的摩擦源。
如果您厌倦了仅仅为了构建基本的 Web UI 而在 HTML、CSS 和 Python 之间进行上下文切换， MonsterUI可能适合您。
真实示例：建立博客
MonsterUI 简介
MonsterUI允许任何人使用纯 Python 构建高质量、现代的 Web 应用程序，而无需牺牲设计质量。
使用 MonsterUI 构建，使用 FrankenUI 设计，基于 Shadcn 设计
MonsterUI是 FastHTML 之上的一层，它提供基于现代库（例如 Tailwind、FrankenUI、DaisyUI）的预样式组件和智能默认值，同时在需要时保持对 Tailwind CSS 的完全访问。怪物用户界面：
- 为 Web 样式带来 FastHTML 的简单性。
- 无需编写单个 CSS 类即可提供美观、响应式的组件。
- 让您专注于构建功能而不是记住实用程序类。
让我们通过团队成员卡片的例子来学习：
def TeamCard(name, role, location = "Remote" ): icons = ( "mail" , "linkedin" , "github" ) return Card( DivLAligned( DiceBearAvatar(name, h = 24 , w = 24 ), Div(H3(name), P(role))), footer = DivFullySpaced( DivHStacked(UkIcon( "map-pin" , height = 16 ), P(location)), DivHStacked( * (UkIconLink(icon, height = 16 ) for icon in icons))))
我仅使用 Python 指定了整个布局、字体大小、图标和头像。我无需特殊的 Flexbox 或 CSS 类知识即可控制一切。
示例来自卡片文档页面
MonsterUI需要的样板文件dicebear_url = 'https://api.dicebear.com/8.x/lorelei/svg?seed=James Wilson' Div(Div(Div( Span(Img(alt = 'Avatar' , loading = 'lazy' , src = dicebear_url, cls = 'aspect-square h-24 w-24' ),cls = 'relative flex h-24 w-24 shrink-0 overflow-hidden rounded-full bg-accent' ), Div(H3( 'James Wilson' , cls = 'uk-h3' ), P( 'Senior Developer' )), cls = 'uk-flex uk-flex-left uk-flex-middle space-x-4' ), cls = 'uk-card-body space-y-6' ), Div(Div(Div( Uk_icon(icon = 'map-pin' , height = '16' ), P( 'New York' ), cls = 'uk-flex uk-flex-row uk-flex-middle space-x-4' ), Div(A(Uk_icon(icon = 'mail' , height = '16' ),href = '#' ,cls = 'uk-icon-link' ), A(Uk_icon(icon = 'linkedin' , height = '16' ),href = '#' ,cls = 'uk-icon-link' ), A(Uk_icon(icon = 'github' , height = '16' ),href = '#' ,cls = 'uk-icon-link' ), cls = 'uk-flex uk-flex-row uk-flex-middle space-x-4' ), cls = 'uk-flex uk-flex-between uk-flex-middle uk-width-1-1' ), cls = 'uk-card-footer' ), cls = 'uk-card' )MonsterUI 为您做什么
MonsterUI基于一个简单的原则：提供智能默认设置，同时允许充分的灵活性。
我们通过借鉴现代 Web 开发中一些最具创新性项目的经过验证的方法来实现这一目标，精心选择能够解决原始 HTML/CSS 痛点的组件，同时保持成熟的、经过实战检验的策略。
MonsterUI 的核心是FrankenUI ，这是sveltecult开发的一个创新的无框架 UI 库，它使用漂亮的 HTML 优先组件。 FrankenUI 本身受到shadcn/ui的启发， shadcn开创了 React 可复制粘贴 UI 组件的概念。
原始 HTML 和 CSS 提出了两个关键挑战：过时的视觉美学和复杂的布局管理。通过将 FrankenUI 的框架无关方法与 FastHTML 相结合，MonsterUI 提供了现代、美观的组件，这些组件与 HTMX 的渐进增强范例无缝集成 – 同时保持干净、可读的代码。
这不仅仅是理论 – 我们正在生产中使用MonsterUI来开发新应用程序，我们正在与预览版客户进行测试，它支持从复杂的对话框界面到动态内容渲染的所有内容。该库已在现实企业环境中被证明是强大且可维护的。
让我们探讨一些关键功能：
主题
为您的应用选择一个颜色主题。有12 种颜色可供选择，每种颜色都有深色和浅色模式。默认情况下，它使用用户的系统首选项。
所有主题都是同步的，因此无论组件是使用 FrankenUI、DaisyUI 还是其他框架设计样式，组件在同一页面上看起来都很好。
主题添加了使整个应用程序的颜色样式保持一致所需的样板。
app, rt = fast_app(hdrs = Theme.blue.headers())
基础组件
MonsterUI中的每个 HTML 元素都带有合理的默认样式。 Button不仅仅是一个 HTML 按钮。它是一个具有悬停状态、焦点环和一致填充的样式组件。
Button( "Save Changes" )
MonsterUI提供了数据结构（ ListT 、 TextT 、 ButtonT等），以便于发现和选项卡完成以选择样式。
例如，要使用主题的主要颜色对其进行样式设置，请使用ButtonT.primary 。原色用于“添加到购物车”或“提交”等操作按钮。
Button( "Add to Cart" , cls = ButtonT.primary)
语义文本样式
MonsterUI 建立在网络基础之上，基于 HTML 规范设计语义标签。这意味着我们拥有与使用标准 HTML 标签的主题相匹配的样式函数，例如强调 ( <em> )、引用 ( <cite> )、标记 ( <mark> )、小 ( <small> ) 等等。
Card( H1( "MonsterUI's Semantic Text" ), P( Strong( "MonsterUI" ), " brings the power of semantic HTML to life with " , Em( "beautiful styling" ), " and " , Mark( "zero configuration" ), "." ), Blockquote( P( "Write semantic HTML in pure Python, get modern styling for free." ), Cite( "MonsterUI Team" )), footer = Small( "Released February 2025" ), )
智能布局助手
使用智能布局助手（ DivVStacked 、 DivCentered 、 DivFullySpaced 、 Grid等）使整体页面布局变得简单。例如， DivVStacked垂直堆叠事物。 Grid创建一个用于放置组件的网格。
DivFullySpaced( H1( "Dashboard" ), DivRAligned( Button( "Export" , cls = ButtonT.secondary), Button( "New Entry" , cls = ButtonT.primary))) # Grid layout with smart responsive columns for mobile vs desktop # Easy args to customize responsiveness as you need Grid( map (TeamCard, products), cols_max = 3 )
注意：有关更多详细信息和高级用法，请参阅我们的布局教程
常见的 UI 模式
MonsterUI包含常见 UI 模式的快捷方式。例如，您几乎总是希望输入文本框有一个标签来传达其用途，因此我们提供了LabelInput作为创建Label和Input对的快捷方式。
LabelInput( "Name" , id = 'myid' )
您可以使用Div 、 FormLabel和Input自己执行此操作，但这种模式很常见，我们提供了一个快捷方式。以下是快捷方式所取代的内容：
Div(FormLabel( 'Name' , fr = 'myid' ), Input( id = 'myid' , name = 'myid' ), cls = 'space-y-2' )
更高级别的组件
我们还提供帮助程序来生成更复杂的组件，例如导航栏、模式、卡片和表格。其中每个组件都构建在几个基本组件（ ModalContainer 、 ModalDialog等）之上，因此您可以自己构建它们。但是，辅助函数通常会提供您所需的所有灵活性，而无需编写自己的样板文件。这些辅助功能为您创造良好的用户体验行为，例如自动将导航栏折叠成移动设备上的汉堡菜单。
例如，创建一个打开模式的按钮：
Div(Button( "Open Modal" ,uk_toggle = "target: #my-modal" ), Modal(ModalTitle( "Simple Test Modal" ), P( "With some somewhat brief content to show that it works!" , cls = TextPresets.muted_sm), footer = ModalCloseButton( "Close" , cls = ButtonT.primary), id = 'my-modal' ))
MonsterUI需要的样板文件Div(Button( 'Open Modal' , type = 'button' , uk_toggle = 'target: #my-modal' , cls = 'uk-button uk-button-default' ), Div(Div(Div(H2( 'Simple Test Modal' , cls = 'uk-modal-title' ), P( 'With some somewhat brief content to show that it works!' , cls = 'uk-text-muted uk-text-small' ), cls = 'uk-modal-body space-y-6' ), Div(Button( 'Close' , type = 'button' , cls = 'uk-button uk-modal-close uk-button-primary' ), cls = 'uk-modal-footer' ), cls = 'uk-modal-dialog' ), uk_modal = True , id = 'my-modal' , cls = 'uk-modal uk-modal-container' ))渲染 Markdown
MonsterUI提供了一个render_md函数，可将 Markdown 转换为样式化 HTML，并通过针对代码块的 HighlightJS 进行语法高亮显示、针对样式化的 FrankenUI 类以及针对附加样式和间距的 Tailwind 进行语法突出显示。使用方法如下：
render_md( """ # My Document > Important note here + List item with **bold** + Another with `code` ```python def hello(): print("world") ``` """ )
入门
首先，使用 pip 安装它：
pip install MonsterUI
使用MonsterUI样式创建一个新的 FastHTML 应用程序：
from fasthtml.common import * from monsterui. all import * # Choose a theme color (blue, green, red, etc) hdrs = Theme.blue.headers() # Create your app with the theme app, rt = fast_app(hdrs = hdrs) @rt def index(): socials = (( 'github' , 'https://github.com/AnswerDotAI/MonsterUI' ), ( 'twitter' , 'https://twitter.com/isaac_flath/' ), ( 'linkedin' , 'https://www.linkedin.com/in/isaacflath/' )) return Titled( "Your First App" , Card( H1( "Welcome!" ), P( "Your first MonsterUI app" , cls = TextPresets.muted_sm), P( "I'm excited to see what you build with MonsterUI!" ), footer = DivLAligned( * [UkIconLink(icon,href = url) for icon,url in socials]))) serve()
就是这样！您现在拥有一个零配置的样式化应用程序。该应用程序已经包括：
- 根据用户偏好自动设置暗/亮模式
- 正确的版式和间距
- 适用于所有设备的响应式布局
- 漂亮的 UI 组件可供使用
- 与 DaisyUI、FrankenUI 和 Tailwind 同步的配色方案
查看我们的文档以获取更多示例和组件参考。