[V0_FILE]typescriptreact:file="components/style-selector.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' import { ChevronDown, ChevronUp } from 'lucide-react' import { useStyle } from './style-provider' export function StyleSelector() { const { currentStyle, setCurrentStyle, availableStyles } = useStyle() const [isOpen, setIsOpen] = useState(false) return ( <> {/* Mobile dropdown version */}

{isOpen && (

Choose Design Movement Select a design movement to transform the entire interface {Object.entries(availableStyles).map(([key, style]) => (

{ setCurrentStyle(key as keyof typeof availableStyles) setIsOpen(false) }} >

{style.name}

{currentStyle.name === style.name && ( Active )}

{style.description}

))}

)}

Design Movements Select a movement to transform the interface {Object.entries(availableStyles).map(([key, style]) => (

setCurrentStyle(key as keyof typeof availableStyles)} >

{style.name}

{currentStyle.name === style.name && ( Active )}

{style.description}

))}

) } [V0_FILE]typescriptreact:file="components/style-provider.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { createContext, useContext, useState, ReactNode } from 'react' // Design movement definitions export const designMovements = { brutalism: { name: 'Brutalism', description: 'Raw, bold, and uncompromising design with heavy typography and stark contrasts', background: 'bg-gray-100', card: 'border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]', text: { primary: 'text-black font-black uppercase tracking-wider', secondary: 'text-gray-800 font-bold', muted: 'text-gray-600 font-semibold' }, button: { primary: 'bg-black text-white border-4 border-black hover:bg-white hover:text-black font-black uppercase tracking-wider shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]', secondary: 'bg-gray-200 text-black border-4 border-black hover:bg-black hover:text-white font-black uppercase', outline: 'border-4 border-black text-black hover:bg-black hover:text-white font-black uppercase', ghost: 'text-black hover:bg-gray-200 font-black uppercase border-2 border-transparent hover:border-black', destructive: 'bg-red-600 text-white border-4 border-black hover:bg-red-700 font-black uppercase shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]' }, input: 'border-4 border-black focus:ring-0 focus:border-black bg-white font-bold', switch: 'data-[state=checked]:bg-black', slider: '[&_[role=slider]]:bg-black [&_[role=slider]]:border-4 [&_[role=slider]]:border-black', progress: '[&>div]:bg-black', badge: { default: 'bg-black text-white border-2 border-black font-black uppercase', secondary: 'bg-gray-200 text-black border-2 border-black font-black uppercase' }, colors: ['bg-black', 'bg-white', 'bg-gray-400', 'bg-red-600'] }, glassmorphism: { name: 'Glassmorphism', description: 'Translucent, frosted glass effect with subtle shadows and blurred backgrounds', background: 'bg-gradient-to-br from-purple-400 via-pink-500 to-red-500', card: 'bg-white/20 backdrop-blur-lg border border-white/30 shadow-xl', text: { primary: 'text-white font-semibold', secondary: 'text-white/80', muted: 'text-white/60' }, button: { primary: 'bg-white/20 backdrop-blur-lg border border-white/30 text-white hover:bg-white/30 shadow-lg', secondary: 'bg-black/20 backdrop-blur-lg border border-white/20 text-white hover:bg-black/30', outline: 'border border-white/50 text-white hover:bg-white/20 backdrop-blur-lg', ghost: 'text-white hover:bg-white/10 backdrop-blur-lg', destructive: 'bg-red-500/30 backdrop-blur-lg border border-red-300/30 text-white hover:bg-red-500/40' }, input: 'bg-white/20 backdrop-blur-lg border border-white/30 text-white placeholder:text-white/60 focus:border-white/50', switch: 'data-[state=checked]:bg-white/40 backdrop-blur-lg', slider: '[&_[role=slider]]:bg-white/80 [&_[role=slider]]:backdrop-blur-lg [&_[role=slider]]:border-white/50', progress: '[&>div]:bg-white/60 backdrop-blur-lg', badge: { default: 'bg-white/20 backdrop-blur-lg border border-white/30 text-white', secondary: 'bg-black/20 backdrop-blur-lg border border-white/20 text-white' }, colors: ['bg-white/20', 'bg-white/40', 'bg-purple-500/30', 'bg-pink-500/30'] }, neumorphism: { name: 'Neumorphism', description: 'Soft, extruded shapes that appear to emerge from the background', background: 'bg-gray-200', card: 'bg-gray-200 shadow-[inset_-8px_-8px_16px_rgba(255,255,255,0.8),inset_8px_8px_16px_rgba(0,0,0,0.1)] border-0', text: { primary: 'text-gray-800', secondary: 'text-gray-600', muted: 'text-gray-500' }, button: { primary: 'bg-gray-200 text-gray-800 shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] border-0', secondary: 'bg-gray-300 text-gray-700 shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] border-0', outline: 'bg-gray-200 text-gray-800 shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)] border-0', ghost: 'bg-transparent text-gray-800 hover:bg-gray-200 hover:shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)]', destructive: 'bg-red-300 text-red-800 shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] border-0' }, input: 'bg-gray-200 shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] border-0 focus:ring-0', switch: 'bg-gray-200 shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] data-[state=checked]:bg-blue-300', slider: 'bg-gray-200 shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] [&_[role=slider]]:bg-gray-200 [&_[role=slider]]:shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)]', progress: 'bg-gray-200 shadow-[inset_8px_8px_16px_rgba(0,0,0,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.8)] [&>div]:bg-blue-300', badge: { default: 'bg-gray-200 text-gray-800 shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)]', secondary: 'bg-gray-300 text-gray-700 shadow-[8px_8px_16px_rgba(0,0,0,0.1),-8px_-8px_16px_rgba(255,255,255,0.8)]' }, colors: ['bg-gray-200', 'bg-gray-300', 'bg-blue-300', 'bg-green-300'] }, minimalism: { name: 'Minimalism', description: 'Clean, simple design with plenty of whitespace and subtle elements', background: 'bg-white', card: 'bg-white border border-gray-100 shadow-sm', text: { primary: 'text-gray-900', secondary: 'text-gray-600', muted: 'text-gray-400' }, button: { primary: 'bg-gray-900 text-white hover:bg-gray-800 shadow-none border-0', secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 shadow-none border-0', outline: 'border border-gray-200 text-gray-900 hover:bg-gray-50 shadow-none', ghost: 'text-gray-900 hover:bg-gray-50 shadow-none', destructive: 'bg-red-500 text-white hover:bg-red-600 shadow-none border-0' }, input: 'border border-gray-200 focus:border-gray-300 focus:ring-0 shadow-none', switch: 'data-[state=checked]:bg-gray-900', slider: '[&_[role=slider]]:bg-gray-900', progress: '[&>div]:bg-gray-900', badge: { default: 'bg-gray-900 text-white', secondary: 'bg-gray-100 text-gray-900' }, colors: ['bg-white', 'bg-gray-100', 'bg-gray-900', 'bg-gray-50'] }, cyberpunk: { name: 'Cyberpunk', description: 'Neon colors, glitch effects, and futuristic aesthetics', background: 'bg-black', card: 'bg-gray-900 border border-cyan-400 shadow-[0_0_20px_rgba(6,182,212,0.3)] relative before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-cyan-400/10 before:to-transparent before:animate-pulse', text: { primary: 'text-cyan-400 font-mono font-bold', secondary: 'text-green-400 font-mono', muted: 'text-gray-400 font-mono' }, button: { primary: 'bg-cyan-400 text-black hover:bg-cyan-300 font-mono font-bold shadow-[0_0_20px_rgba(6,182,212,0.5)] border border-cyan-400', secondary: 'bg-gray-800 text-cyan-400 hover:bg-gray-700 font-mono border border-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.3)]', outline: 'border border-cyan-400 text-cyan-400 hover:bg-cyan-400/10 font-mono shadow-[0_0_10px_rgba(6,182,212,0.3)]', ghost: 'text-cyan-400 hover:bg-cyan-400/10 font-mono', destructive: 'bg-red-500 text-black hover:bg-red-400 font-mono font-bold shadow-[0_0_20px_rgba(239,68,68,0.5)] border border-red-500' }, input: 'bg-gray-900 border border-cyan-400 text-cyan-400 placeholder:text-gray-500 focus:border-cyan-300 focus:ring-0 font-mono shadow-[0_0_10px_rgba(6,182,212,0.2)]', switch: 'bg-gray-800 data-[state=checked]:bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.3)]', slider: 'bg-gray-800 [&_[role=slider]]:bg-cyan-400 [&_[role=slider]]:border-cyan-400 [&_[role=slider]]:shadow-[0_0_10px_rgba(6,182,212,0.5)]', progress: 'bg-gray-800 [&>div]:bg-cyan-400 [&>div]:shadow-[0_0_10px_rgba(6,182,212,0.5)]', badge: { default: 'bg-cyan-400 text-black font-mono font-bold', secondary: 'bg-gray-800 text-cyan-400 border border-cyan-400 font-mono' }, colors: ['bg-cyan-400', 'bg-green-400', 'bg-purple-500', 'bg-pink-500'] }, artdeco: { name: 'Art Deco', description: 'Luxurious geometric patterns with gold accents and elegant typography', background: 'bg-gradient-to-b from-amber-50 to-yellow-100', card: 'bg-gradient-to-br from-amber-100 to-yellow-200 border-2 border-amber-400 shadow-lg relative before:absolute before:top-0 before:left-0 before:right-0 before:h-1 before:bg-gradient-to-r before:from-amber-400 before:via-yellow-500 before:to-amber-400', text: { primary: 'text-amber-900 font-serif font-bold', secondary: 'text-amber-800 font-serif', muted: 'text-amber-600 font-serif' }, button: { primary: 'bg-gradient-to-r from-amber-400 to-yellow-500 text-amber-900 hover:from-amber-500 hover:to-yellow-600 font-serif font-bold border-2 border-amber-600 shadow-lg', secondary: 'bg-gradient-to-r from-amber-100 to-yellow-200 text-amber-900 hover:from-amber-200 hover:to-yellow-300 font-serif border-2 border-amber-400', outline: 'border-2 border-amber-400 text-amber-900 hover:bg-gradient-to-r hover:from-amber-100 hover:to-yellow-200 font-serif', ghost: 'text-amber-900 hover:bg-amber-100 font-serif', destructive: 'bg-gradient-to-r from-red-400 to-orange-500 text-white hover:from-red-500 hover:to-orange-600 font-serif font-bold border-2 border-red-600' }, input: 'border-2 border-amber-400 focus:border-amber-600 focus:ring-0 bg-amber-50 font-serif', switch: 'data-[state=checked]:bg-amber-500', slider: '[&_[role=slider]]:bg-amber-500 [&_[role=slider]]:border-2 [&_[role=slider]]:border-amber-600', progress: '[&>div]:bg-gradient-to-r [&>div]:from-amber-400 [&>div]:to-yellow-500', badge: { default: 'bg-gradient-to-r from-amber-400 to-yellow-500 text-amber-900 font-serif font-bold', secondary: 'bg-amber-100 text-amber-900 border border-amber-400 font-serif' }, colors: ['bg-amber-400', 'bg-yellow-500', 'bg-amber-100', 'bg-yellow-200'] }, bauhaus: { name: 'Bauhaus', description: 'Functional design with primary colors, geometric shapes, and sans-serif typography', background: 'bg-gray-50', card: 'bg-white border-l-8 border-red-500 shadow-md relative before:absolute before:top-4 before:right-4 before:w-4 before:h-4 before:bg-blue-500 before:rounded-full', text: { primary: 'text-gray-900 font-sans font-bold', secondary: 'text-gray-700 font-sans', muted: 'text-gray-500 font-sans' }, button: { primary: 'bg-red-500 text-white hover:bg-red-600 font-sans font-bold border-0 shadow-none', secondary: 'bg-blue-500 text-white hover:bg-blue-600 font-sans font-bold border-0', outline: 'border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-white font-sans font-bold', ghost: 'text-gray-900 hover:bg-gray-100 font-sans font-bold', destructive: 'bg-yellow-500 text-gray-900 hover:bg-yellow-600 font-sans font-bold border-0' }, input: 'border-2 border-gray-300 focus:border-red-500 focus:ring-0 font-sans', switch: 'data-[state=checked]:bg-red-500', slider: '[&_[role=slider]]:bg-red-500', progress: '[&>div]:bg-red-500', badge: { default: 'bg-red-500 text-white font-sans font-bold', secondary: 'bg-blue-500 text-white font-sans font-bold' }, colors: ['bg-red-500', 'bg-blue-500', 'bg-yellow-500', 'bg-white'] }, memphis: { name: 'Memphis Design', description: 'Bold colors, geometric patterns, and playful asymmetrical layouts', background: 'bg-gradient-to-br from-pink-200 via-purple-200 to-blue-200', card: 'bg-gradient-to-r from-yellow-300 to-pink-300 border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transform rotate-1 relative before:absolute before:-top-2 before:-right-2 before:w-8 before:h-8 before:bg-cyan-400 before:rounded-full before:border-2 before:border-black', text: { primary: 'text-black font-bold', secondary: 'text-gray-800 font-semibold', muted: 'text-gray-600' }, button: { primary: 'bg-gradient-to-r from-cyan-400 to-purple-500 text-black hover:from-cyan-500 hover:to-purple-600 font-bold border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transform hover:rotate-1', secondary: 'bg-gradient-to-r from-yellow-400 to-orange-500 text-black hover:from-yellow-500 hover:to-orange-600 font-bold border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]', outline: 'border-4 border-black text-black hover:bg-gradient-to-r hover:from-pink-300 hover:to-yellow-300 font-bold', ghost: 'text-black hover:bg-gradient-to-r hover:from-pink-200 hover:to-yellow-200 font-bold', destructive: 'bg-gradient-to-r from-red-400 to-pink-500 text-black hover:from-red-500 hover:to-pink-600 font-bold border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]' }, input: 'border-4 border-black focus:ring-0 focus:border-black bg-gradient-to-r from-yellow-100 to-pink-100 font-bold', switch: 'data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-cyan-400 data-[state=checked]:to-purple-500', slider: '[&_[role=slider]]:bg-gradient-to-r [&_[role=slider]]:from-cyan-400 [&_[role=slider]]:to-purple-500 [&_[role=slider]]:border-4 [&_[role=slider]]:border-black', progress: '[&>div]:bg-gradient-to-r [&>div]:from-cyan-400 [&>div]:to-purple-500', badge: { default: 'bg-gradient-to-r from-cyan-400 to-purple-500 text-black border-2 border-black font-bold', secondary: 'bg-gradient-to-r from-yellow-400 to-orange-500 text-black border-2 border-black font-bold' }, colors: ['bg-cyan-400', 'bg-purple-500', 'bg-yellow-400', 'bg-pink-400'] }, material: { name: 'Material Design', description: 'Google\'s design language with elevation, motion, and bold colors', background: 'bg-gray-50', card: 'bg-white shadow-lg rounded-lg border-0', text: { primary: 'text-gray-900 font-medium', secondary: 'text-gray-600', muted: 'text-gray-500' }, button: { primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow-md hover:shadow-lg font-medium rounded-md border-0', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 shadow-sm hover:shadow-md font-medium rounded-md border-0', outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50 shadow-sm hover:shadow-md font-medium rounded-md', ghost: 'text-blue-600 hover:bg-blue-50 font-medium rounded-md', destructive: 'bg-red-600 text-white hover:bg-red-700 shadow-md hover:shadow-lg font-medium rounded-md border-0' }, input: 'border-b-2 border-gray-300 focus:border-blue-600 focus:ring-0 bg-transparent rounded-none', switch: 'data-[state=checked]:bg-blue-600', slider: '[&_[role=slider]]:bg-blue-600 [&_[role=slider]]:shadow-md', progress: '[&>div]:bg-blue-600', badge: { default: 'bg-blue-600 text-white rounded-full font-medium', secondary: 'bg-gray-200 text-gray-900 rounded-full font-medium' }, colors: ['bg-blue-600', 'bg-red-600', 'bg-green-600', 'bg-orange-600'] }, flat: { name: 'Flat Design', description: 'Simple, clean interface without gradients, shadows, or textures', background: 'bg-white', card: 'bg-gray-100 border-0 shadow-none rounded-none', text: { primary: 'text-gray-900 font-normal', secondary: 'text-gray-600', muted: 'text-gray-500' }, button: { primary: 'bg-blue-500 text-white hover:bg-blue-600 shadow-none border-0 rounded-none font-normal', secondary: 'bg-gray-300 text-gray-900 hover:bg-gray-400 shadow-none border-0 rounded-none font-normal', outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white shadow-none rounded-none font-normal', ghost: 'text-blue-500 hover:bg-blue-100 shadow-none rounded-none font-normal', destructive: 'bg-red-500 text-white hover:bg-red-600 shadow-none border-0 rounded-none font-normal' }, input: 'border-2 border-gray-300 focus:border-blue-500 focus:ring-0 shadow-none rounded-none', switch: 'data-[state=checked]:bg-blue-500 rounded-none', slider: '[&_[role=slider]]:bg-blue-500 [&_[role=slider]]:rounded-none', progress: '[&>div]:bg-blue-500', badge: { default: 'bg-blue-500 text-white rounded-none font-normal', secondary: 'bg-gray-300 text-gray-900 rounded-none font-normal' }, colors: ['bg-blue-500', 'bg-red-500', 'bg-green-500', 'bg-yellow-500'] }, y2k: { name: 'Y2K/Retro-futurism', description: 'Metallic textures, holographic effects, and futuristic aesthetics from the early 2000s', background: 'bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900', card: 'bg-gradient-to-br from-gray-800 to-gray-900 border border-purple-400 shadow-[0_0_30px_rgba(168,85,247,0.4)] relative before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-purple-400/20 before:to-transparent before:skew-x-12', text: { primary: 'text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-bold', secondary: 'text-gray-300 font-medium', muted: 'text-gray-500' }, button: { primary: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 font-bold shadow-[0_0_20px_rgba(168,85,247,0.5)] border border-purple-400', secondary: 'bg-gradient-to-r from-gray-700 to-gray-800 text-purple-300 hover:from-gray-600 hover:to-gray-700 font-bold border border-purple-400 shadow-[0_0_10px_rgba(168,85,247,0.3)]', outline: 'border border-purple-400 text-purple-400 hover:bg-gradient-to-r hover:from-purple-500/20 hover:to-pink-500/20 font-bold shadow-[0_0_10px_rgba(168,85,247,0.3)]', ghost: 'text-purple-400 hover:bg-purple-500/20 font-bold', destructive: 'bg-gradient-to-r from-red-500 to-pink-500 text-white hover:from-red-600 hover:to-pink-600 font-bold shadow-[0_0_20px_rgba(239,68,68,0.5)] border border-red-400' }, input: 'bg-gray-800 border border-purple-400 text-purple-300 placeholder:text-gray-500 focus:border-purple-300 focus:ring-0 shadow-[0_0_10px_rgba(168,85,247,0.2)]', switch: 'bg-gray-700 data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-500 data-[state=checked]:to-pink-500 shadow-[0_0_10px_rgba(168,85,247,0.3)]', slider: 'bg-gray-700 [&_[role=slider]]:bg-gradient-to-r [&_[role=slider]]:from-purple-500 [&_[role=slider]]:to-pink-500 [&_[role=slider]]:border-purple-400 [&_[role=slider]]:shadow-[0_0_10px_rgba(168,85,247,0.5)]', progress: 'bg-gray-700 [&>div]:bg-gradient-to-r [&>div]:from-purple-500 [&>div]:to-pink-500 [&>div]:shadow-[0_0_10px_rgba(168,85,247,0.5)]', badge: { default: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold', secondary: 'bg-gray-700 text-purple-300 border border-purple-400 font-bold' }, colors: ['bg-purple-500', 'bg-pink-500', 'bg-blue-500', 'bg-cyan-400'] }, vaporwave: { name: 'Vaporwave', description: 'Retro aesthetic with neon pinks, purples, and nostalgic 80s vibes', background: 'bg-gradient-to-b from-purple-900 via-pink-900 to-purple-900', card: 'bg-gradient-to-br from-pink-500/20 to-purple-500/20 backdrop-blur-sm border border-pink-400/50 shadow-[0_0_30px_rgba(236,72,153,0.3)] relative before:absolute before:inset-0 before:bg-[linear-gradient(45deg,transparent_25%,rgba(236,72,153,0.1)_25%,rgba(236,72,153,0.1)_50%,transparent_50%,transparent_75%,rgba(236,72,153,0.1)_75%)] before:bg-[length:20px_20px]', text: { primary: 'text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 font-bold', secondary: 'text-pink-300 font-medium', muted: 'text-purple-300' }, button: { primary: 'bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700 font-bold shadow-[0_0_25px_rgba(236,72,153,0.6)] border border-pink-400', secondary: 'bg-gradient-to-r from-purple-800/50 to-pink-800/50 text-pink-300 hover:from-purple-700/50 hover:to-pink-700/50 font-bold border border-pink-400/50 shadow-[0_0_15px_rgba(236,72,153,0.4)]', outline: 'border border-pink-400 text-pink-400 hover:bg-gradient-to-r hover:from-pink-500/20 hover:to-purple-500/20 font-bold shadow-[0_0_15px_rgba(236,72,153,0.4)]', ghost: 'text-pink-400 hover:bg-pink-500/20 font-bold', destructive: 'bg-gradient-to-r from-red-500 to-pink-600 text-white hover:from-red-600 hover:to-pink-700 font-bold shadow-[0_0_25px_rgba(239,68,68,0.6)] border border-red-400' }, input: 'bg-purple-900/50 border border-pink-400/50 text-pink-300 placeholder:text-purple-400 focus:border-pink-300 focus:ring-0 shadow-[0_0_15px_rgba(236,72,153,0.2)]', switch: 'bg-purple-800 data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-pink-500 data-[state=checked]:to-purple-600 shadow-[0_0_15px_rgba(236,72,153,0.4)]', slider: 'bg-purple-800 [&_[role=slider]]:bg-gradient-to-r [&_[role=slider]]:from-pink-500 [&_[role=slider]]:to-purple-600 [&_[role=slider]]:border-pink-400 [&_[role=slider]]:shadow-[0_0_15px_rgba(236,72,153,0.6)]', progress: 'bg-purple-800 [&>div]:bg-gradient-to-r [&>div]:from-pink-500 [&>div]:to-purple-600 [&>div]:shadow-[0_0_15px_rgba(236,72,153,0.6)]', badge: { default: 'bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold', secondary: 'bg-purple-800/50 text-pink-300 border border-pink-400/50 font-bold' }, colors: ['bg-pink-500', 'bg-purple-600', 'bg-cyan-400', 'bg-purple-800'] }, swiss: { name: 'Swiss/International Style', description: 'Grid-based layouts, sans-serif typography, and objective photography', background: 'bg-white', card: 'bg-white border-0 shadow-none', text: { primary: 'text-black font-normal', secondary: 'text-gray-700 font-light', muted: 'text-gray-500 font-light' }, button: { primary: 'bg-black text-white hover:bg-gray-800 shadow-none border-0 rounded-none font-normal', secondary: 'bg-gray-200 text-black hover:bg-gray-300 shadow-none border-0 rounded-none font-normal', outline: 'border border-black text-black hover:bg-black hover:text-white shadow-none rounded-none font-normal', ghost: 'text-black hover:bg-gray-100 shadow-none rounded-none font-normal', destructive: 'bg-red-600 text-white hover:bg-red-700 shadow-none border-0 rounded-none font-normal' }, input: 'border-b border-black focus:border-black focus:ring-0 bg-transparent rounded-none shadow-none', switch: 'data-[state=checked]:bg-black', slider: '[&_[role=slider]]:bg-black [&_[role=slider]]:rounded-none', progress: '[&>div]:bg-black', badge: { default: 'bg-black text-white rounded-none font-normal', secondary: 'bg-gray-200 text-black rounded-none font-normal' }, colors: ['bg-black', 'bg-white', 'bg-gray-200', 'bg-red-600'] }, claymorphism: { name: 'Claymorphism', description: 'Soft, clay-like textures with rounded corners and muted colors', background: 'bg-gradient-to-br from-orange-100 to-red-100', card: 'bg-gradient-to-br from-orange-200 to-red-200 shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] rounded-3xl border-0', text: { primary: 'text-orange-900 font-medium', secondary: 'text-orange-700', muted: 'text-orange-600' }, button: { primary: 'bg-gradient-to-br from-orange-300 to-red-300 text-orange-900 hover:from-orange-400 hover:to-red-400 font-medium shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] hover:shadow-[inset_2px_2px_6px_rgba(255,255,255,0.7),inset_-2px_-2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] rounded-2xl border-0', secondary: 'bg-gradient-to-br from-orange-100 to-red-100 text-orange-800 hover:from-orange-200 hover:to-red-200 font-medium shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] rounded-2xl border-0', outline: 'bg-gradient-to-br from-orange-100 to-red-100 text-orange-800 hover:from-orange-200 hover:to-red-200 font-medium shadow-[inset_2px_2px_6px_rgba(255,255,255,0.7),inset_-2px_-2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] hover:shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] rounded-2xl border-0', ghost: 'text-orange-800 hover:bg-gradient-to-br hover:from-orange-100 hover:to-red-100 font-medium rounded-2xl', destructive: 'bg-gradient-to-br from-red-300 to-pink-300 text-red-900 hover:from-red-400 hover:to-pink-400 font-medium shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1),4px_4px_12px_rgba(0,0,0,0.1)] rounded-2xl border-0' }, input: 'bg-gradient-to-br from-orange-100 to-red-100 shadow-[inset_2px_2px_6px_rgba(255,255,255,0.7),inset_-2px_-2px_6px_rgba(0,0,0,0.1)] border-0 focus:ring-0 rounded-2xl', switch: 'bg-gradient-to-br from-orange-100 to-red-100 data-[state=checked]:from-orange-300 data-[state=checked]:to-red-300 shadow-[inset_2px_2px_6px_rgba(255,255,255,0.7),inset_-2px_-2px_6px_rgba(0,0,0,0.1)]', slider: 'bg-gradient-to-br from-orange-100 to-red-100 shadow-[inset_2px_2px_6px_rgba(255,255,255,0.7),inset_-2px_-2px_6px_rgba(0,0,0,0.1)] [&_[role=slider]]:bg-gradient-to-br [&_[role=slider]]:from-orange-300 [&_[role=slider]]:to-red-300 [&_[role=slider]]:shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1)]', progress: 'bg-gradient-to-br from-orange-100 to-red-100 shadow-[inset_2px_2px_6px_rgba(255,255,255,0.7),inset_-2px_-2px_6px_rgba(0,0,0,0.1)] [&>div]:bg-gradient-to-br [&>div]:from-orange-300 [&>div]:to-red-300', badge: { default: 'bg-gradient-to-br from-orange-300 to-red-300 text-orange-900 font-medium shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1)] rounded-2xl', secondary: 'bg-gradient-to-br from-orange-100 to-red-100 text-orange-800 font-medium shadow-[inset_-2px_-2px_6px_rgba(255,255,255,0.7),inset_2px_2px_6px_rgba(0,0,0,0.1)] rounded-2xl' }, colors: ['bg-orange-300', 'bg-red-300', 'bg-orange-100', 'bg-red-100'] }, dark: { name: 'Dark Mode', description: 'Dark backgrounds with high contrast text and subtle accents', background: 'bg-gray-900', card: 'bg-gray-800 border border-gray-700 shadow-lg', text: { primary: 'text-white font-medium', secondary: 'text-gray-300', muted: 'text-gray-500' }, button: { primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow-md border-0', secondary: 'bg-gray-700 text-gray-200 hover:bg-gray-600 shadow-md border-0', outline: 'border border-gray-600 text-gray-200 hover:bg-gray-700 shadow-md', ghost: 'text-gray-200 hover:bg-gray-700', destructive: 'bg-red-600 text-white hover:bg-red-700 shadow-md border-0' }, input: 'bg-gray-800 border border-gray-600 text-white placeholder:text-gray-400 focus:border-blue-500 focus:ring-0', switch: 'bg-gray-700 data-[state=checked]:bg-blue-600', slider: 'bg-gray-700 [&_[role=slider]]:bg-blue-600', progress: 'bg-gray-700 [&>div]:bg-blue-600', badge: { default: 'bg-blue-600 text-white', secondary: 'bg-gray-700 text-gray-200' }, colors: ['bg-blue-600', 'bg-gray-800', 'bg-gray-700', 'bg-gray-600'] } } type StyleContextType = { currentStyle: typeof designMovements.brutalism setCurrentStyle: (style: keyof typeof designMovements) => void availableStyles: typeof designMovements } const StyleContext = createContext(undefined) export function StyleProvider({ children }: { children: ReactNode }) { const [currentStyleKey, setCurrentStyleKey] = useState('brutalism') return ( {children} ) } export function useStyle() { const context = useContext(StyleContext) if (context === undefined) { throw new Error('useStyle must be used within a StyleProvider') } return context } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isMerged="true" 'use client' import { useState } from 'react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Progress } from '@/components/ui/progress' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { useStyle } from '@/components/style-provider' import { Bell, Settings, Search, Menu, TrendingUp, Users, DollarSign, Activity } from 'lucide-react' export function Dashboard() { const { currentStyle } = useStyle() const [activeTab, setActiveTab] = useState('overview') return (

{/* Mobile Header */}

Dashboard

{/* Stats Cards - Mobile First Grid */}

Revenue

$12.4k

Users

1,234

Sales

567

Growth

+23%

{/* Main Content Area */}

{/* Chart Area - Takes full width on mobile */}

Analytics Overview Your performance metrics for this month

Website Traffic 78%

Conversion Rate 45%

Customer Satisfaction 92%

{/* Sidebar Content */}

{/* Recent Activity */} Recent Activity

Alice Brown

Made a purchase

New

Charlie Davis

Left a review

Review

Eva Foster

Signed up

User

{/* Quick Actions */} Quick Actions

{/* Mobile Tab Navigation */}

{['overview', 'analytics', 'users', 'settings'].map((tab) => ( ))}

) } [V0_FILE]typescriptreact:file="components/movement-story.tsx" isMerged="true" 'use client' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' import { useStyle } from '@/components/style-provider' // Design movement stories with objectives and emotions const movementStories = { brutalism: { story: "Born from post-war reconstruction, Brutalism emerged as a bold architectural and design movement that rejected ornamentation in favor of raw, honest materials. In digital design, it translates to interfaces that are unapologetically direct and functional.", objective: "To create honest, functional design that prioritizes content and usability over decoration", emotion: "Bold, confrontational, and uncompromising", period: "1950s-1980s", keyPrinciples: ["Raw honesty", "Functional brutality", "Bold typography", "High contrast"], influence: "Post-war architecture, concrete construction, socialist ideals" }, glassmorphism: { story: "Glassmorphism emerged in the late 2010s as designers sought to create depth and hierarchy in flat interfaces. Inspired by frosted glass and translucent materials, it brings a sense of layering and sophistication to digital experiences.", objective: "To create depth and visual hierarchy through transparency and blur effects", emotion: "Elegant, modern, and sophisticated", period: "2020s", keyPrinciples: ["Translucency", "Layered depth", "Subtle shadows", "Frosted glass effect"], influence: "Apple's design language, modern architecture, glass materials" }, neumorphism: { story: "Neumorphism, or 'soft UI', represents a fusion of skeuomorphism and flat design. It creates interfaces that appear to be extruded from their background, offering tactile feedback through subtle shadows and highlights.", objective: "To bridge the gap between flat design and skeuomorphism with soft, tactile interfaces", emotion: "Calm, tactile, and approachable", period: "2020s", keyPrinciples: ["Soft shadows", "Extruded elements", "Monochromatic palette", "Subtle depth"], influence: "Dieter Rams' design philosophy, Apple's early iOS, tactile materials" }, minimalism: { story: "Rooted in the 'less is more' philosophy, minimalism strips away unnecessary elements to focus on essential content and functionality. It emerged from Japanese aesthetics and Bauhaus principles, emphasizing clarity and purpose.", objective: "To eliminate visual noise and focus attention on essential content and functionality", emotion: "Calm, focused, and purposeful", period: "1960s-present", keyPrinciples: ["Essential elements only", "Generous whitespace", "Clear hierarchy", "Purposeful design"], influence: "Japanese aesthetics, Bauhaus movement, Dieter Rams" }, cyberpunk: { story: "Cyberpunk design draws from the dystopian sci-fi genre, featuring neon colors, glitch effects, and futuristic interfaces. It represents a digital rebellion against clean, corporate aesthetics, embracing chaos and technological anxiety.", objective: "To evoke a futuristic, rebellious atmosphere that challenges conventional design norms", emotion: "Rebellious, futuristic, and edgy", period: "1980s-present", keyPrinciples: ["Neon colors", "Glitch effects", "Monospace fonts", "High contrast"], influence: "Cyberpunk literature, hacker culture, dystopian films, arcade games" }, artdeco: { story: "Art Deco emerged in the 1920s as a celebration of luxury, glamour, and technological progress. Characterized by geometric patterns, metallic finishes, and bold typography, it represented optimism and sophistication in the machine age.", objective: "To convey luxury, sophistication, and technological optimism through geometric elegance", emotion: "Luxurious, glamorous, and optimistic", period: "1920s-1940s", keyPrinciples: ["Geometric patterns", "Metallic accents", "Bold typography", "Symmetrical layouts"], influence: "Machine age aesthetics, Egyptian art, Cubism, luxury goods" }, bauhaus: { story: "The Bauhaus school revolutionized design by merging art, craft, and industry. Founded by Walter Gropius, it emphasized functional design, geometric forms, and the principle that form follows function, laying the groundwork for modern design.", objective: "To create functional, democratic design that serves society through industrial production", emotion: "Rational, functional, and democratic", period: "1919-1933", keyPrinciples: ["Form follows function", "Primary colors", "Geometric shapes", "Sans-serif typography"], influence: "Industrial revolution, socialist ideals, geometric abstraction" }, memphis: { story: "Memphis Design exploded onto the scene in 1980s Milan as a radical rejection of good taste and functionalism. Led by Ettore Sottsass, it embraced bold colors, geometric patterns, and playful asymmetry to challenge design conventions.", objective: "To challenge design conventions and celebrate playful, anti-functional aesthetics", emotion: "Playful, rebellious, and energetic", period: "1980s", keyPrinciples: ["Bold colors", "Geometric patterns", "Asymmetrical layouts", "Anti-functional design"], influence: "Pop art, postmodernism, 1980s culture, Italian radical design" }, material: { story: "Google's Material Design was created to unify the user experience across all Google products and Android devices. Inspired by paper and ink, it uses shadows, motion, and bold colors to create intuitive, tactile digital experiences.", objective: "To create a unified, intuitive design language based on physical materials and motion", emotion: "Intuitive, responsive, and trustworthy", period: "2014-present", keyPrinciples: ["Material metaphor", "Bold colors", "Meaningful motion", "Adaptive design"], influence: "Paper and ink, print design, Google's brand identity" }, flat: { story: "Flat Design emerged as a reaction against skeuomorphism, stripping away gradients, shadows, and textures in favor of simple, clean interfaces. Microsoft's Metro design language and Apple's iOS 7 popularized this approach.", objective: "To create clean, fast-loading interfaces that work across all devices and screen sizes", emotion: "Clean, efficient, and modern", period: "2010s", keyPrinciples: ["No gradients or shadows", "Simple typography", "Bright colors", "Minimal elements"], influence: "Swiss design, Bauhaus, digital constraints, mobile-first design" }, y2k: { story: "Y2K design captures the optimistic futurism of the late 1990s and early 2000s, when the internet was new and the future seemed limitless. It features metallic textures, holographic effects, and a belief in technological utopia.", objective: "To express technological optimism and digital futurism through metallic and holographic aesthetics", emotion: "Optimistic, futuristic, and nostalgic", period: "1995-2005", keyPrinciples: ["Metallic textures", "Holographic effects", "Futuristic typography", "Digital aesthetics"], influence: "Early internet culture, sci-fi films, technological optimism, rave culture" }, vaporwave: { story: "Vaporwave emerged from internet culture as a nostalgic critique of 1980s consumer capitalism. It combines retro aesthetics with surreal, dreamlike imagery, creating a sense of longing for a future that never came to pass.", objective: "To evoke nostalgia and critique consumer culture through retro-futuristic aesthetics", emotion: "Nostalgic, dreamy, and melancholic", period: "2010s-present", keyPrinciples: ["Neon colors", "Retro patterns", "Nostalgic imagery", "Surreal compositions"], influence: "1980s consumer culture, early computer graphics, Japanese aesthetics, internet culture" }, swiss: { story: "Swiss Style, or International Typographic Style, emerged in Switzerland in the 1950s. It emphasized cleanliness, readability, and objectivity, using grid systems and sans-serif typography to create timeless, functional design.", objective: "To achieve maximum clarity and objectivity through systematic, grid-based design", emotion: "Objective, systematic, and timeless", period: "1950s-present", keyPrinciples: ["Grid systems", "Sans-serif typography", "Objective photography", "Asymmetrical layouts"], influence: "Bauhaus, constructivism, modernist architecture, Swiss culture" }, claymorphism: { story: "Claymorphism represents the latest evolution in UI design, combining the depth of neumorphism with warmer, more organic shapes. It creates interfaces that feel handcrafted and approachable, like digital clay sculptures.", objective: "To create warm, approachable interfaces that feel handcrafted and organic", emotion: "Warm, organic, and approachable", period: "2020s-present", keyPrinciples: ["Soft textures", "Rounded corners", "Muted colors", "Organic shapes"], influence: "Neumorphism, ceramic art, organic materials, handcraft aesthetics" }, dark: { story: "Dark Mode design emerged from the need to reduce eye strain and save battery life on OLED screens. It has evolved into a sophisticated design approach that emphasizes content while creating immersive, focused experiences.", objective: "To reduce eye strain and create focused, immersive user experiences", emotion: "Focused, immersive, and sophisticated", period: "2010s-present", keyPrinciples: ["High contrast", "Reduced eye strain", "Content focus", "Battery efficiency"], influence: "Terminal interfaces, gaming culture, OLED technology, accessibility needs" } } export function MovementStory() { const { currentStyle } = useStyle() const currentMovement = Object.keys(movementStories).find( key => movementStories[key as keyof typeof movementStories] && currentStyle.name.toLowerCase().includes(key) || key === Object.keys(movementStories).find(k => movementStories[k as keyof typeof movementStories] && currentStyle.name.toLowerCase().replace(/[^a-z]/g, '') === k.replace(/[^a-z]/g, '') ) ) as keyof typeof movementStories // Find the correct movement key by matching the style name const movementKey = Object.keys(movementStories).find(key => { const storyName = movementStories[key as keyof typeof movementStories]?.objective const styleName = currentStyle.name.toLowerCase().replace(/[^a-z]/g, '') return key === styleName || (key === 'y2k' && styleName.includes('y2k')) || (key === 'swiss' && styleName.includes('swiss')) || (key === 'dark' && styleName.includes('dark')) }) as keyof typeof movementStories || 'brutalism' const story = movementStories[movementKey] if (!story) { return (

Story not available for this movement

) } return (

{/* Main Story Card */}

{currentStyle.name} {story.period}

{currentStyle.description}

{story.story}

{/* Objective & Emotion Cards */}

Objective

{story.objective}

Emotion

{story.emotion}

{/* Key Principles */} Key Principles

{story.keyPrinciples.map((principle, index) => ( {principle} ))}

{/* Influence */} Cultural Influence

{story.influence}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" 'use client' import { useState } from 'react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Switch } from '@/components/ui/switch' import { Badge } from '@/components/ui/badge' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Slider } from '@/components/ui/slider' import { Progress } from '@/components/ui/progress' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { StyleSelector } from '@/components/style-selector' import { StyleProvider, useStyle } from '@/components/style-provider' import { Dashboard } from '@/components/dashboard' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { MovementStory } from '@/components/movement-story' function DesignSystemShowcase() { const [switchValue, setSwitchValue] = useState(false) const [sliderValue, setSliderValue] = useState([50]) const { currentStyle, selectedMovement } = useStyle() // Custom tab styling for brutalist movement const getTabTriggerClass = () => { if (selectedMovement === 'brutalism') { return `bg-white text-black border-2 border-black font-bold data-[state=active]:bg-black data-[state=active]:text-white hover:bg-gray-100 hover:text-black data-[state=active]:hover:bg-black data-[state=active]:hover:text-white` } return `${currentStyle.button.ghost} data-[state=active]:${currentStyle.button.primary.replace('hover:', '')}` } return (

{/* Desktop Sidebar */}

{/* Updated title to VIBECODER DESIGN MOVEMENT SHOWCASE */}

VIBECODER DESIGN MOVEMENT SHOWCASE

Explore different design movements and see how they transform UI components

{/* Main Content */}

{/* Mobile Header */}

{/* Updated mobile title to VIBECODER DESIGN MOVEMENT SHOWCASE */}

VIBECODER DESIGN MOVEMENT SHOWCASE

Explore different design movements and see how they transform UI components

Dashboard Design System Story {/* Typography Section */} Typography Different text styles and hierarchies

Heading 1

Heading 2

Heading 3

Body text with regular weight and comfortable reading size.

Small text for captions and secondary information.

{/* Buttons Section */} Buttons Various button styles and states

{/* Form Elements */} Form Elements Input fields, switches, and sliders

Enable notifications

Volume: {sliderValue[0]}%

Progress

{/* Cards and Content */}

John Doe UI/UX Designer

Passionate about creating beautiful and functional user interfaces.

Design UI/UX

Color Palette

{currentStyle.colors.map((color, index) => (

))}

Statistics

Users 1,234

Revenue $12,345

Growth +23%

) } export default function Page() { return ( ) }

About

Tags

Share

About

Tags

Share

More from glody007

More Templates Like This

About

Tags

Share

About

Tags

Share

More from glody007

More Templates Like This