Shadcn Ui Theme

Lime green with teal accents. Fresh, energetic vibe. Use: Eco-friendly brands, fitness apps, food/beverage

Claude (by tweakcn)

Terracotta and warm neutrals. Sophisticated, approachable. Use: Design studios, consulting firms, premium brands

Claymorphism (by tweakcn)

Soft purple with clay-inspired pastels. Modern, tactile feel. Use: Creative tools, design apps, startups

Cleanslate (by tweakcn)

Cool blue-grays with minimal saturation. Ultra-clean, spacious. Use: Minimalist portfolios, tech products, meditation apps

Cyberpunk (by tweakcn)

Hot pink and cyan neon. Bold, futuristic aesthetic. Use: Gaming, tech events, nightlife, music platforms

Kodama Grove (by tweakcn)

Olive greens with earthy browns. Nature-inspired palette. Use: Outdoor brands, sustainability, organic products

Modern Minimal (by tweakcn)

Pale blues with extreme simplicity. Scandinavian design. Use: Architecture, furniture, high-end retail

Neo Brutalism (by tweakcn)

Primary colors (red/blue/yellow) with black. Bold, geometric. Use: Streetwear, art galleries, bold brands

Red (by shadcn)

Vibrant red primary. High-energy, attention-grabbing. Use: Sales, promotions, food delivery, alerts

Spring Bouquet (by styleglide)

Forest green with purple accents. Botanical, elegant. Use: Florists, weddings, lifestyle brands

Sunset Horizon (by tweakcn)

Coral orange with peach tones. Warm, optimistic. Use: Travel, hospitality, wellness, summer campaigns

Supabase (by tweakcn)

Teal green signature color. Modern developer aesthetic. Use: Developer tools, APIs, tech startups

Typewriter (by styleglide)

High-contrast black/white. Newspaper-inspired. Use: Publishing, journalism, vintage aesthetics

Vercel (by tweakcn)

Pure black/white monochrome. Sleek, minimal. Use: Tech portfolios, minimalist products, developer tools

How to Apply Themes

Step 1: Locate globals.css

Theme CSS variables typically live in:

• Next.js App Router: app/globals.css
• Next.js Pages Router: src/app/globals.css or styles/globals.css

Default theme for starting point:

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital%2Cwght@0%2C100..900;1%2C100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital%2Cwght@0%2C100..700;1%2C100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital%2Cwght@0%2C400..900;1%2C400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital%2Copsz%2Cwght@0%2C18..144%2C300..900;1%2C18..144%2C300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital%2Cwght@0%2C300..900;1%2C300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital%2Cwght@0%2C300;0%2C400;0%2C500;0%2C700;1%2C300;1%2C400;1%2C500;1%2C700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fahkwang:ital%2Cwght@0%2C200;0%2C300;0%2C400;0%2C500;0%2C600;0%2C700;1%2C200;1%2C300;1%2C400;1%2C500;1%2C600;1%2C700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital%2Cwght@0%2C300..700;1%2C300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital%2Copsz%2Cwght@0%2C14..32%2C100..900;1%2C14..32%2C100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital%2Copsz%2Cwght@0%2C9..40%2C100..1000;1%2C9..40%2C100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital%2Cwght@0%2C400..700;1%2C400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Assistant:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital%2Cwght@0%2C100;0%2C200;0%2C300;0%2C400;0%2C500;0%2C600;0%2C700;0%2C800;0%2C900;1%2C100;1%2C200;1%2C300;1%2C400;1%2C500;1%2C600;1%2C700;1%2C800;1%2C900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital%2Cwght@0%2C200..1000;1%2C200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Antonio:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap");

@import "tailwindcss";

@plugin "@tailwindcss/typography";
@import "tw-animate-css";

@custom-variant dark (&:where(.dark, .dark *));

:root {
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.141 0.005 285.823);
   --primary: oklch(0.21 0.006 285.885);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
   --muted-foreground: oklch(0.552 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.705 0.015 286.067);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.21 0.006 285.885);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.967 0.001 286.375);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.705 0.015 286.067);

   --radius: 8px;

   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
   --shadow-sm:
           0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
   --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
   --shadow-md:
           0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
   --shadow-lg:
           0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
   --shadow-xl:
           0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

   /* Shadcnblocks.com */
   --muted-2: oklch(92.5%, 0%, 89.876%);
   --muted-2-foreground: oklch(55.2%, 3.5%, 285.938%);

   --gradient-1: oklch(64.3%, 40.75%, 269.926%);
   --gradient-2: oklch(72.7%, 46.75%, 144.688%);
   --gradient-3: oklch(70.1%, 37.75%, 339.956%);

   /* Fonts */
   --font-sans: "Inter", sans-serif;
   --font-serif: "Roboto Serif", serif;
   --font-mono: "Roboto Mono", monospace;
   --font-cursive: "Caveat", cursive;
   --font-playfair: "Playfair Display", serif;
   --font-caveat: "Caveat", cursive;
   --font-calSans: "Cal Sans", sans-serif;
   --font-bebasNeue: "Bebas Neue", sans-serif;
   --font-anton: "Anton", sans-serif;
   --font-instrumentSerif: "Instrument Serif", serif;
   --font-merriweather: "Merriweather", serif;
   --font-figtree: "Figtree", sans-serif;
   --font-ubuntu: "Ubuntu", sans-serif;
   --font-fahkwang: "Fahkwang", sans-serif;
   --font-red-hat-text: "Red Hat Text", sans-serif;
   --font-dm-sans: "DM Sans", sans-serif;
   --font-instrument-sans: "Instrument Sans", sans-serif;
   --font-assistant: "Assistant", sans-serif;
   --font-poppins: "Poppins", sans-serif;
   --font-geist: "Geist", sans-serif;
   --font-nunito: "Nunito", sans-serif;
   --font-hedvigLettersSerif: "Hedvig Letters Serif", serif;
   --font-antonio: "Antonio", sans-serif;
}
.dark {
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.92 0.004 286.32);
   --primary-foreground: oklch(0.21 0.006 285.885);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.274 0.006 286.033);
   --muted-foreground: oklch(0.705 0.015 286.067);
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.552 0.016 285.938);

   /* Shadcnblocks.com */
   --muted-2: oklch(30.1%, 0%, 89.876%);
   --muted-2-foreground: oklch(80.2%, 1%, 286.305%);

   --gradient-1: oklch(27%, 39.25%, 269.284%);
   --gradient-2: oklch(72.7%, 46.75%, 144.688%);
   --gradient-3: oklch(70.1%, 37.75%, 339.956%);
}

@theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);

   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);

   /* Shadcnblocks.com */
   --color-muted-2: var(--muted-2);
   --color-muted-2-foreground: var(--muted-2-foreground);
   --color-transparent: transparent;

   --radius-xs: calc(var(--radius) - 4px);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);

   --breakpoint-sm: 640px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px; /* default is 1536px */

   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-fade-in-out: fade-in-out 4s ease-in-out;
   --animate-fade-in: fade-in 0.7s ease-out forwards;
   --animate-progress: progress 8s linear;
   --animate-infinite-slider: infiniteSlider 20s linear infinite;
   --animate-infinite-slider-reverse: infiniteSliderReverse 20s linear infinite;
   --animate-shadow-ping: shadow-ping 1.5s ease-in-out infinite;
   --animate-flip-btn: flip-btn 6s infinite steps(2, end);
   --animate-rotate-btn: rotate-btn 3s linear infinite both;
   --animate-light-to-right-top: light-to-right 4s linear infinite;
   --animate-light-to-right-bottom: light-to-right 4s linear infinite;
   --animate-marquee: marquee 25s linear infinite;
   --animate-marquee-vertical: marquee-vertical 25s linear infinite;
   --animate-slide-to-right: slide-to-right 3s linear infinite;
   --animate-slide-to-top: slide-to-top 3s linear infinite;
   --animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite
   alternate;
   --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
   --animate-shine: shine var(--duration) infinite linear;
   --animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s)
   infinite;
   --animate-orbit: orbit calc(var(--duration) * 1s) linear infinite;
   --animate-meteor: meteor 5s linear infinite;
   --animate-line-shadow: line-shadow 15s linear infinite;
   --animate-aurora: aurora 8s ease-in-out infinite alternate;
   --animate-aurora-background: aurora-background 60s linear infinite;
   --animate-slide-down: slideDown 100ms ease-out;
   --animate-slide-up: slideUp 100ms ease-out;
   --animate-slide-left: slideLeft 250ms ease-out;
   --animate-slide-right: slideRight 250ms ease-out;

   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar: var(--sidebar);

   --font-sans: var(--font-sans);
   --font-serif: var(--font-serif);
   --font-mono: var(--font-mono);
   --font-cursive: var(--font-cursive);

   --font-playfair: var(--font-playfair);
   --font-caveat: var(--font-caveat);
   --font-calSans: var(--font-calSans);
   --font-bebasNeue: var(--font-bebasNeue);
   --font-instrumentSerif: var(--font-instrumentSerif);
   --font-anton: var(--font-anton);
   --font-merriweather: var(--font-merriweather);
   --font-figtree: var(--font-figtree);
   --font-ubuntu: var(--font-ubuntu);
   --font-fahkwang: var(--font-fahkwang);
   --font-red-hat-text: var(--font-red-hat-text);
   --font-dm-sans: var(--font-dm-sans);
   --font-instrument-sans: var(--font-instrument-sans);
   --font-assistant: var(--font-assistant);
   --font-poppins: var(--font-poppins);
   --font-geist: var(--font-geist);
   --font-nunito: var(--font-nunito);
   --font-hedvigLettersSerif: var(--font-hedvigLettersSerif);
   --font-antonio: var(--font-antonio);

   --shadow-2xs: var(--shadow-2xs);
   --shadow-xs: var(--shadow-xs);
   --shadow-sm: var(--shadow-sm);
   --shadow: var(--shadow);
   --shadow-md: var(--shadow-md);
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);

   @keyframes accordion-down {
      from {
         height: 0;
      }
      to {
         height: var(--radix-accordion-content-height);
      }
   }

   @keyframes accordion-up {
      from {
         height: var(--radix-accordion-content-height);
      }
      to {
         height: 0;
      }
   }

   @keyframes fade-in-out {
      0% {
         opacity: 0;
      }
      20% {
         opacity: 1;
      }
      80% {
         opacity: 1;
      }
      100% {
         opacity: 0;
      }
   }

   @keyframes progress {
      from {
         width: "0%";
      }
      to {
         width: "100%";
      }
   }

   @keyframes infiniteSlider {
      0% {
         transform: "translateX(0)";
      }
      100% {
         transform: "translateX(calc(-250px * 5))";
      }
   }

   @keyframes infiniteSliderReverse {
      0% {
         transform: "translateX(calc(-250px * 5))";
      }
      100% {
         transform: "translateX(0)";
      }
   }

   @keyframes fade-in-scale {
      0% {
         opacity: 0;
         transform: scale(0.95);
      }
      100% {
         opacity: 1;
         transform: scale(1);
      }
   }

   @keyframes fade-in-scale-down {
      0% {
         opacity: 0;
         transform: scale(1.1);
      }
      100% {
         opacity: 1;
         transform: scale(1);
      }
   }

   @keyframes fade-in-slide-down {
      0% {
         transform: translateY(-24px);
         opacity: 0;
      }
      100% {
         transform: translateY(0);
         opacity: 1;
      }
   }

   @keyframes transform1 {
      0%,
      25%,
      100% {
         width: 100%;
         padding-bottom: 120%;
      }
      33.33%,
      58.33% {
         width: 0%;
         padding-bottom: 0%;
      }
      66.66%,
      91.66% {
         width: 90%;
         padding-bottom: 100%;
      }
   }

   @keyframes transform2 {
      0%,
      25%,
      100% {
         width: 65%;
         padding-bottom: 65%;
      }
      33.33%,
      58.33% {
         width: 95%;
         padding-bottom: 114%;
      }
      66.66%,
      91.66% {
         width: 52%;
         padding-bottom: 52%;
      }
   }

   @keyframes transform3 {
      0%,
      25%,
      100% {
         width: 78%;
         padding-bottom: 100%;
      }
      33.33%,
      58.33% {
         width: 78%;
         padding-bottom: 94%;
      }
      66.66%,
      91.66% {
         width: 95%;
         padding-bottom: 76%;
      }
   }

   @keyframes transform4 {
      0%,
      25%,
      66.66%,
      91.66%,
      100% {
         width: 0%;
         padding-bottom: 0%;
      }
      33.33%,
      58.33% {
         width: 65%;
         padding-bottom: 46%;
      }
   }

   @keyframes image1 {
      0%,
      25%,
      100% {
         opacity: 1;
      }
      33.33%,
      58.33%,
      66.66%,
      91.66% {
         opacity: 0;
      }
   }

   @keyframes image2 {
      0%,
      25%,
      33.33%,
      58.33%,
      100% {
         opacity: 0;
      }
      66.66%,
      91.66% {
         opacity: 1;
      }
   }

   @keyframes image3 {
      0%,
      25%,
      66.66%,
      91.66%,
      100% {
         opacity: 0;
      }
      33.33%,
      58.33% {
         opacity: 1;
      }
   }

   @keyframes gradient-spin {
      0% {
         transform: translateX(-50%) translateY(-50%) rotate(0deg);
      }
      100% {
         transform: translateX(-50%) translateY(-50%) rotate(360deg);
      }
   }

   @keyframes shadow-ping {
      0% {
         boxshadow: 0 0 0 0px var(--color-neutral-100);
      }
      50% {
         boxshadow: 0 0 0 12px var(--color-neutral-300);
      }
      100% {
         boxshadow: 0 0 0 12px transparent;
      }
   }

   @keyframes show-text {
      0%,
      14.28% {
         opacity: 0;
      }
      17%,
      26% {
         opacity: 1;
      }
      28.58%,
      100% {
         opacity: 0;
      }
   }

   @keyframes flip-btn {
      to {
         transform: rotate(360deg);
      }
   }

   @keyframes rotate-btn {
      to {
         transform: rotate(90deg);
      }
   }

   @keyframes slide-to-right {
      0% {
         opacity: 0;
         left: 0;
      }
      50% {
         opacity: 1;
      }
      100% {
         opacity: 0;
         left: 80%;
      }
   }

   @keyframes slide-to-top {
      0% {
         opacity: 0;
         bottom: 0;
      }
      50% {
         opacity: 1;
      }
      100% {
         opacity: 0;
         bottom: 80%;
      }
   }

   @keyframes light-to-right {
      0% {
         transform: translate(0%);
         opacity: 0;
      }
      50% {
         opacity: 1;
      }
      100% {
         transform: translate(100%);
         opacity: 0;
      }
   }

   @keyframes marquee {
      0% {
         transform: translateX(0%);
      }
      100% {
         transform: translateX(-100%);
      }
   }

   @keyframes marquee-vertical {
      from {
         transform: translateY(0);
      }
      to {
         transform: translateY(calc(-100% - var(--gap)));
      }
   }

   @keyframes fade-in {
      0% {
         opacity: 0;
         transform: translateY(20px);
      }
      100% {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes shimmer-slide {
      to {
         transform: translate(calc(100cqw - 100%), 0);
      }
   }

   @keyframes spin-around {
      0% {
         transform: translateZ(0) rotate(0);
      }
      15%,
      35% {
         transform: translateZ(0) rotate(90deg);
      }
      65%,
      85% {
         transform: translateZ(0) rotate(270deg);
      }
      100% {
         transform: translateZ(0) rotate(360deg);
      }
   }

   @keyframes shine {
      0% {
         background-position: 0% 0%;
      }
      50% {
         background-position: 100% 100%;
      }
      to {
         background-position: 0% 0%;
      }
   }

   @keyframes aurora-background {
      from {
         background-position:
                 50% 50%,
                 50% 50%;
      }
      to {
         background-position:
                 350% 50%,
                 350% 50%;
      }
   }

   @keyframes aurora {
      0% {
         background-position: 0% 50%;
         transform: rotate(-5deg) scale(0.9);
      }
      25% {
         background-position: 50% 100%;
         transform: rotate(5deg) scale(1.1);
      }
      50% {
         background-position: 100% 50%;
         transform: rotate(-3deg) scale(0.95);
      }
      75% {
         background-position: 50% 0%;
         transform: rotate(3deg) scale(1.05);
      }
      100% {
         background-position: 0% 50%;
         transform: rotate(-5deg) scale(0.9);
      }
   }

   @keyframes ripple {
      0%,
      100% {
         transform: translate(-50%, -50%) scale(1);
      }
      50% {
         transform: translate(-50%, -50%) scale(0.9);
      }
   }

   @keyframes orbit {
      0% {
         transform: rotate(calc(var(--angle) * 1deg))
         translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg));
      }
      100% {
         transform: rotate(calc(var(--angle) * 1deg + 360deg))
         translateY(calc(var(--radius) * 1px))
         rotate(calc((var(--angle) * -1deg) - 360deg));
      }
   }

   @keyframes meteor {
      0% {
         transform: rotate(var(--angle)) translateX(0);
         opacity: 1;
      }
      70% {
         opacity: 1;
      }
      100% {
         transform: rotate(var(--angle)) translateX(-500px);
         opacity: 0;
      }
   }

   @keyframes line-shadow {
      0% {
         background-position: 0 0;
      }
      100% {
         background-position: 100% -100%;
      }
   }

   @keyframes slideDown {
      from {
         height: 0;
      }
      to {
         height: var(--radix-collapsible-content-height);
      }
   }

   @keyframes slideUp {
      from {
         height: var(--radix-collapsible-content-height);
      }
      to {
         height: 0;
      }
   }

   @keyframes slideLeft {
      from {
         width: 0;
      }
      to {
         width: var(--radix-collapsible-content-width);
      }
   }
   @keyframes slideRight {
      from {
         width: var(--radix-collapsible-content-width);
      }
      to {
         width: 0;
      }
   }
}

@utility container {
   margin-inline: auto;
   padding-inline: 2rem;
}

@layer components {
   button {
      cursor: pointer;
   }
   [class*="border"] {
      @apply border-border;
   }
}

@layer base {
   * {
      @apply border-border outline-ring/50;
   }
   body {
      @apply bg-background text-foreground font-sans antialiased;
      scrollbar-gutter: stable;
   }
}

#wrapper {
   margin-top: 60px;
}

.hide-scrollbar {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera */
}

html body[data-scroll-locked] {
   overflow-y: scroll !important;
   --removed-body-scroll-bar-size: 0 !important;
   margin-right: 0 !important;
   margin-top: 60px !important;
   &#explorer {
      margin-top: 0px !important;
   }
}

Step 2: Replace :root and .dark sections

Find existing :root and .dark blocks in globals.css and replace with chosen theme variables.

Step 3: Verify Tailwind Config

Ensure tailwind.config.ts references CSS variables: