返回首页
Aioros.Cosmo · XAML 版 shadcn/ui

shadcn/ui 的全部组件,用 XAML 实现

全部 67 个组件,连同变体、设计令牌以及十二种明暗配色主题。在 Web 上每个组件都是真正的 HTML(按钮就是 <button>,链接就是 <a>);在桌面端则是原生控件。
67/67
已移植的 shadcn/ui 组件
99.5–100%
的像素与 shadcn/ui 自身渲染一致
12
种配色主题,含明暗模式
如何测量
每个组件都分别由 shadcn/ui 在 Chromium 中渲染、由 Cosmo 渲染,再逐像素、逐样式比较(见 Cosmo 仓库的 docs/fidelity.md 与 docs/coverage.md,使用 Geist 字体)。

实时渲染,来自本服务器

下面的每个示例都是由你正在访问的服务器渲染的 XAML,同一份 XAML 也能在桌面端原生运行。
创建账户
在下方输入邮箱以创建账户。
通知
邮件摘要
推送通知
仅提及
在此修改账户信息,完成后点击保存。
保存更改
团队成员
Owner
SD
Sofia Davis
m@example.com
Member
JL
Jackson Lee
p@example.com
Viewer
IN
Isabella Nguyen
i@example.com
上传进度
按钮与徽章
Badge
Secondary
Outline
Destructive

XAML 代码

Pages/signup/Page.axaml
<c:Card> <c:CardHeader Title="Create an account" Description="Enter your email below." /> <c:CardContent> <StackPanel Spacing="12"> <c:Field> <c:FieldLabel Content="Email" /> <TextBox Text="{Binding Email}" /> </c:Field> <CheckBox Content="I agree to the terms" IsChecked="{Binding Agreed}" /> </StackPanel> </c:CardContent> <c:CardFooter> <Button Content="Create account" Command="{Binding Create}" /> </c:CardFooter> </c:Card>