ui-themes

星标10

分支2

更新时间2026年1月31日 18:42

Theme generation with tweakcn for shadcn/ui and Magic UI animations. Use when setting up project themes, customizing color schemes, adding dark mode, or integrating animated components.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

来源

aussiegingersnap

aussiegingersnap/cursor-skills

打开 GitHub 仓库查看创作者相关仓库

下载

相关职业SOC

基于 SOC 职业分类

网页开发工程师计算机与数学类职业·SOC 15-1254

文件资源管理器

3 个文件

SKILL.md

readonly

同仓库更多 Skills

同仓库

mise

aussiegingersnap/cursor-skills

Use when working with mise - creating/editing mise.toml or .mise.toml files, defining tasks with usage field arguments, managing dev tools and environments, configuring hooks, or when user mentions mise configuration.

2026-02-1810

db-prisma

aussiegingersnap/cursor-skills

Prisma 7 ORM with PostgreSQL — schema design, migrations, seeding, and Railway deployment patterns. This skill should be used when setting up Prisma in a new project, writing migrations, managing database schemas, or deploying Prisma-backed services to Railway.

2026-02-1710

railway

aussiegingersnap/cursor-skills

Railway deployment and infrastructure management skill. This skill should be used when deploying applications to Railway, managing Railway services, checking deployment status, viewing logs, configuring environment variables, or troubleshooting Railway deployments.

2026-02-1710

nestjs

aussiegingersnap/cursor-skills

NestJS 11 backend patterns with Fastify, modular architecture, guards, pipes, and Railway deployment. This skill should be used when building NestJS APIs, setting up backend services, or creating REST/GraphQL endpoints with NestJS.

2026-02-1710

ui-shadcn-studio

aussiegingersnap/cursor-skills

shadcn/studio component library with MCP integration, theme generation, and block patterns. This skill should be used when building UI with shadcn components, selecting dashboard layouts, or generating landing pages. Canonical source for all shadcn-based work.

2026-02-1710

mcp-apps

aussiegingersnap/cursor-skills

Build MCP Apps - interactive UI components that render inside AI hosts like Claude, ChatGPT, and VSCode. This skill should be used when creating tools with rich UI, building dashboards or forms for AI interactions, or adding visual interfaces to MCP servers.

2026-01-3110

name	ui-themes
description	Theme generation with tweakcn for shadcn/ui and Magic UI animations. Use when setting up project themes, customizing color schemes, adding dark mode, or integrating animated components.

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

Visit tweakcn.com/editor/theme
Select a preset that matches your design direction
Customize colors, typography, and radius if needed
Export CSS variables to your project
Update globals.css with the exported theme

Preset Selection Guide

Choose a preset based on your product's personality:

Design Direction	Recommended Presets	When to Use
Precision & Density	graphite, mono, darkmatter	Dev tools, power user apps, terminals
Sophistication & Trust	vercel, cosmic night, claude	Finance, enterprise, B2B
Warmth & Approachability	modern minimal, notebook, soft pop	Collaboration tools, note apps
Boldness & Clarity	neo brutalism, bold tech, clean slate	Marketing sites, modern dashboards
Dark Professional	graphite, darkmatter, cosmic night	Any dark-first application
Light Professional	modern minimal, clean slate, vercel	Light-first applications

Export Options

tweakcn supports multiple export formats:

OKLCH (recommended) - Best color accuracy across displays
HSL - Traditional CSS format, widest compatibility
RGB/Hex - Direct color values

Integration Steps

1. Replace globals.css Theme

Replace the :root and .dark sections in globals.css with tweakcn export:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* tweakcn exported variables go here */
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;
    /* ... rest of light theme */
  }

  .dark {
    /* tweakcn exported dark variables */
    --background: 224 71% 4%;
    --foreground: 210 20% 98%;
    /* ... rest of dark theme */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

2. Set Default Theme

For dark mode default, add className="dark" to the html element:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <body>{children}</body>
    </html>
  )
}

3. Sidebar Colors (Optional)

If using a sidebar layout, tweakcn includes sidebar-specific variables:

--sidebar-background: ...;
--sidebar-foreground: ...;
--sidebar-primary: ...;
--sidebar-primary-foreground: ...;
--sidebar-accent: ...;
--sidebar-accent-foreground: ...;
--sidebar-border: ...;
--sidebar-ring: ...;

Part 2: Magic UI Components

Magic UI provides 150+ animated React components that integrate with shadcn/ui.

Installation

Magic UI uses the shadcn CLI for installation:

# Install individual components
pnpm dlx shadcn@latest add @magicui/component-name

# Examples
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/shimmer-button

Components install to components/ui/ alongside existing shadcn components.

Essential Components for Themes

Animated Theme Toggler

Smooth dark/light mode toggle with animation:

pnpm dlx shadcn@latest add @magicui/animated-theme-toggler

import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"

<AnimatedThemeToggler />

Magic Card

Hover effects with gradient tracking - perfect for cards and grid items:

pnpm dlx shadcn@latest add @magicui/magic-card

import { MagicCard } from "@/components/ui/magic-card"

<MagicCard className="p-6">
  <h3>Card Title</h3>
  <p>Card content with gradient hover effect</p>
</MagicCard>

Shimmer Button

Premium CTA buttons with shimmer loading state:

pnpm dlx shadcn@latest add @magicui/shimmer-button

import { ShimmerButton } from "@/components/ui/shimmer-button"

<ShimmerButton>Get Started</ShimmerButton>

Blur Fade

Smooth entrance animations for content:

pnpm dlx shadcn@latest add @magicui/blur-fade

import { BlurFade } from "@/components/ui/blur-fade"

<BlurFade delay={0.1}>
  <div>Content fades in with blur effect</div>
</BlurFade>

Typing Animation

AI-like text reveal for generated content:

pnpm dlx shadcn@latest add @magicui/typing-animation

import { TypingAnimation } from "@/components/ui/typing-animation"

<TypingAnimation text="AI-generated content appears here..." />

Border Beam

Subtle animated border glow:

pnpm dlx shadcn@latest add @magicui/border-beam

import { BorderBeam } from "@/components/ui/border-beam"

<div className="relative">
  <BorderBeam />
  <div>Content with glowing border</div>
</div>

Component Categories

Category	Components	Use Case
Effects	Magic Card, Border Beam, Shine Border	Cards, containers
Buttons	Shimmer Button, Rainbow Button, Pulsating Button	CTAs, actions
Animations	Blur Fade, Typing Animation, Text Animate	Content reveal
Backgrounds	Dot Pattern, Grid Pattern, Particles	Hero sections
Navigation	Dock, Smooth Cursor	App navigation
Theme	Animated Theme Toggler	Dark/light mode

Part 3: Dark Mode Setup

Next.js App Router

Option 1: Static Dark Mode (Default)

Set dark mode as the default without toggle:

// app/layout.tsx
<html lang="en" className="dark">

Option 2: Theme Provider (Toggle)

For user-controlled theme switching, use next-themes:

pnpm add next-themes

// components/theme-provider.tsx
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="dark"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  )
}

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Theme Toggle Component

Combine with Magic UI's Animated Theme Toggler:

"use client"

import { useTheme } from "next-themes"
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <AnimatedThemeToggler
      checked={theme === "dark"}
      onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
    />
  )
}

Part 4: Quick Setup Recipes

Recipe: Dark Professional Theme

Best for: Dev tools, dashboards, professional apps

# 1. Get theme from tweakcn (use "graphite" preset)
# 2. Install components
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/shimmer-button
pnpm dlx shadcn@latest add @magicui/blur-fade

Set dark default:

<html lang="en" className="dark">

Recipe: Light with Dark Mode Toggle

Best for: Content apps, documentation, general purpose

# 1. Get theme from tweakcn (use "modern minimal" preset)
# 2. Install dependencies
pnpm add next-themes
pnpm dlx shadcn@latest add @magicui/animated-theme-toggler

Use ThemeProvider with default light.

Recipe: AI Product Theme

Best for: AI tools, chat apps, generative products

# 1. Get theme from tweakcn (use "claude" or "cosmic night" preset)
# 2. Install components
pnpm dlx shadcn@latest add @magicui/typing-animation
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/blur-fade
pnpm dlx shadcn@latest add @magicui/shimmer-button

Use typing animation for AI-generated content.

Part 5: Best Practices

Do

Pick a preset that matches your product's personality
Commit to dark OR light as primary (with optional toggle)
Use OKLCH color format for best accuracy
Keep animations subtle (150-250ms)
Use Magic Card sparingly (1-2 per view)

Don't

Mix multiple accent colors
Use heavy animations on every element
Override shadcn component styles directly
Skip the theme provider if you need toggle
Use spring/bouncy animations in professional apps

Performance

Magic UI components are tree-shakable
Only install components you actually use
Blur Fade adds minimal overhead
Typing Animation should be used sparingly

ui-themes

同仓库更多 Skills

同仓库更多 Skills

UI Themes

When to Use This Skill

Part 1: Theme Generation with tweakcn

Workflow

Preset Selection Guide

Export Options

Integration Steps

1. Replace globals.css Theme

2. Set Default Theme

3. Sidebar Colors (Optional)

Part 2: Magic UI Components

Installation

Essential Components for Themes

Animated Theme Toggler

Magic Card

Shimmer Button

Blur Fade

Typing Animation

Border Beam

Component Categories

Part 3: Dark Mode Setup

Next.js App Router

Option 1: Static Dark Mode (Default)

Option 2: Theme Provider (Toggle)

Theme Toggle Component

Part 4: Quick Setup Recipes

Recipe: Dark Professional Theme

Recipe: Light with Dark Mode Toggle

Recipe: AI Product Theme

Part 5: Best Practices

Do

Don't

Performance

Reference Links

UI Themes

When to Use This Skill

Part 1: Theme Generation with tweakcn

Workflow

Preset Selection Guide

Export Options

Integration Steps

1. Replace globals.css Theme

2. Set Default Theme

3. Sidebar Colors (Optional)

Part 2: Magic UI Components

Installation

Essential Components for Themes

Animated Theme Toggler

Magic Card

Shimmer Button

Blur Fade

Typing Animation

Border Beam

Component Categories

Part 3: Dark Mode Setup

Next.js App Router

Option 1: Static Dark Mode (Default)

Option 2: Theme Provider (Toggle)

Theme Toggle Component

Part 4: Quick Setup Recipes

Recipe: Dark Professional Theme

Recipe: Light with Dark Mode Toggle

Recipe: AI Product Theme

Part 5: Best Practices

Do

Don't

Performance

Reference Links