Empezar
Aioros
Por qué Aioros
En vivo
Experiencia de desarrollo
Galería
Cosmo
Pictor
Graphs
Volver al inicio
Aioros.Cosmo · shadcn/ui en XAML

Todos los componentes de shadcn/ui, en XAML

Los 67 componentes con sus variantes, tokens de diseño y doce temas de color en claro y oscuro. En la web cada uno es HTML real (un botón es un <button>, un enlace un <a>); en el escritorio, controles nativos.
En vivo, desde este servidorRepositorio
67/67
componentes de shadcn/ui portados
99.5–100%
de píxeles iguales al render de shadcn/ui
12
temas de color, claro y oscuro
Cómo se mide
Cada componente se renderiza con shadcn/ui en Chromium y con Cosmo, y se compara píxel a píxel y estilo a estilo (docs/fidelity.md y docs/coverage.md en el repositorio de Cosmo, con la fuente Geist).

En vivo, desde este servidor

Cada muestra de abajo es XAML renderizado por el servidor que estás leyendo, y el mismo XAML corre nativo en el escritorio.
Crea una cuenta
Escribe tu correo para crear tu cuenta.
Crear cuenta
Notificaciones
Resúmenes por correo
Notificaciones push
Solo menciones
Cambia aquí los datos de tu cuenta. Guarda cuando termines.
Guardar cambios
Miembros del equipo
Owner
SD
Sofia Davis
m@example.com
Member
JL
Jackson Lee
p@example.com
Viewer
IN
Isabella Nguyen
i@example.com
Progreso de subida
Botones y badges
ButtonSecondaryOutlineGhost
Badge
Secondary
Outline
Destructive

El 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>

El resto del ecosistema

Aioros.Pictor · Recharts en XAML
Las gráficas de Recharts, sin JavaScript tuyo
Explorar Pictor
Aioros.Graphs · d3 en C#
El motor de dibujo de d3, byte a byte
Explorar Graphs