background

foreground

muted

muted foreground

popover

popover foreground

card

card foreground

border

input

primary

primary foreground

secondary

secondary foreground

accent

accent foreground

destructive

destructive foreground

ring

sidebar

sidebar foreground

sidebar primary

sidebar primary-foreground

sidebar accent

sidebar accent-foreground

sidebar border

sidebar ring

Edit CSS variables

logo

Catppuccin Projects

app logo

I'll help you rewrite this component using Catppuccin Macchiato design principles! I'll convert it to Svelte 5 syntax, replace the glassmorphism effect with the clean, flat aesthetic of Catppuccin, and use the warm, muted color palette. The design will feature subtle rounded edges, generous spacing, and gentle hover states that align with the Catppuccin philosophy.

Catppuccin Projects
Rewritten
app logo

I see the issue! The component I provided is exactly the same as what you already have in your current UI files. Let me create a proper Catppuccin Macchiato styled version that actually implements the design principles you described - with the flat design, subtle rounded edges, generous spacing, and the warm muted color palette that's characteristic of Catppuccin Macchiato.

app logo

I'll create a brand new Catppuccin Macchiato styled projects component that you can preview! This will feature the characteristic flat design, warm muted colors, subtle rounded edges, and generous spacing that defines the Catppuccin aesthetic.

Catppuccin Projects
Generated
Generated
Files