Compare

See the same components and their tokens side by side in each available design system.

Sobre

Shadcn / Radix and local tokens

Button

Input

Switch

Notifications

Checkbox

Accepter

Badge

DefaultSecondaryDestructive

Avatar

Tabs

Panneau overview

Dialog

Skeleton

Tokens sémantiques

--font-sans—

--background—

--foreground—

--muted—

--muted-foreground—

--border—

--primary—

--accent—

--destructive—

--ring—

Tokens natifs · Sobre

--mehdi-background—

--mehdi-accent—

--mehdi-primary—

--mehdi-destructive—

--mehdi-border—

--mehdi-muted—

Fun

Playful stationery with bright colors and depth

Button

Input

Switch

Notifications

Checkbox

Accepter

Badge

DefaultSecondaryDestructive

Avatar

Tabs

Panneau overview

Dialog

Skeleton

Tokens sémantiques

--font-sans—

--background—

--foreground—

--muted—

--muted-foreground—

--border—

--primary—

--accent—

--destructive—

--ring—

Tokens natifs · Fun

--fun-background—

--fun-surface—

--fun-text—

--fun-yellow—

--fun-orange—

--fun-violet—

--fun-relief-ink—

Compare

See the same components and their tokens side by side in each available design system.

Sobre

Shadcn / Radix and local tokens

Button

Input

Switch

Notifications

Checkbox

Accepter

Badge

DefaultSecondaryDestructive

Avatar

Tabs

Panneau overview

Dialog

Skeleton

Tokens sémantiques

--font-sans—

--background—

--foreground—

--muted—

--muted-foreground—

--border—

--primary—

--accent—

--destructive—

--ring—

Tokens natifs · Sobre

--mehdi-background—

--mehdi-accent—

--mehdi-primary—

--mehdi-destructive—

--mehdi-border—

--mehdi-muted—

Fun

Playful stationery with bright colors and depth

Button

Input

Switch

Notifications

Checkbox

Accepter

Badge

DefaultSecondaryDestructive

Avatar

Tabs

Panneau overview

Dialog

Skeleton

Tokens sémantiques

--font-sans—

--background—

--foreground—

--muted—

--muted-foreground—

--border—

--primary—

--accent—

--destructive—

--ring—

Tokens natifs · Fun

--fun-background—

--fun-surface—

--fun-text—

--fun-yellow—

--fun-orange—

--fun-violet—

--fun-relief-ink—