UI Themes

Generate and customize shadcn/ui themes using tweakcn and enhance with Magic UI animated components. This skill covers theme selection, dark mode setup, and animation integration.

When to Use This Skill

• Setting up a new project's visual theme
• Customizing shadcn/ui color schemes
• Adding dark mode support
• Integrating animated UI components
• Choosing a design direction for a project

Part 1: Theme Generation with tweakcn

tweakcn is a visual theme editor for shadcn/ui that exports production-ready CSS variables.

Workflow