Get started
Aioros
Why Aioros
Live
Developer experience
Gallery
Cosmo
Pictor
Graphs
Back to start
Aioros.Cosmo · shadcn/ui in XAML

Every shadcn/ui component, as XAML

All 67 components with their variants, design tokens and twelve color themes in light and dark. On the web each one is real HTML (a button is a <button>, a link an <a>); on the desktop, native controls.
Live, from this serverRepository
67/67
shadcn/ui components ported
99.5–100%
of pixels equal to shadcn/ui's own render
12
color themes, light and dark
How it is measured
Each component is rendered by shadcn/ui in Chromium and by Cosmo, then compared pixel by pixel and style by style (docs/fidelity.md and docs/coverage.md in the Cosmo repository, in the Geist font).

Live, from this server

Every sample below is XAML rendered by the server you are reading, and the same XAML runs natively on the desktop.
Create an account
Enter your email below to create your account.
Create account
Notifications
Email digests
Push notifications
Only mentions
Make changes to your account here. Click save when you are done.
Save changes
Team members
Owner
SD
Sofia Davis
m@example.com
Member
JL
Jackson Lee
p@example.com
Viewer
IN
Isabella Nguyen
i@example.com
Upload progress
Buttons and badges
ButtonSecondaryOutlineGhost
Badge
Secondary
Outline
Destructive

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

The rest of the ecosystem

Aioros.Pictor · Recharts in XAML
Recharts' charts, with no JavaScript of yours
Explore Pictor
Aioros.Graphs · d3 in C#
d3's drawing engine, byte for byte
Explore Graphs