Shadcn Ui Theme Picker UI Deign
I'll create a modern theme picker UI using shadcn/ui components that allows users to preview and select different color themes for their application.
I've created a comprehensive theme picker UI that includes:
Key Features:
- Theme Grid: 8 different color themes with visual previews
- Mode Toggle: Light, dark, and system appearance options
- Live Preview: Shows how the selected theme looks in practice
- Interactive Selection: Click to select themes with visual feedback
- Color Swatches: Each theme shows primary, accent, and secondary colors
- Responsive Design: Works well on mobile and desktop
Design Elements:
- Clean card-based layout using shadcn/ui components1
- Color preview bars for each theme
- Selected theme indicator with check mark
- Live preview section showing actual UI elements
- Professional typography and spacing
Themes Included:
- Default (clean minimal)
- Dark (easy on eyes)
- Rose (warm elegant)
- Blue (professional)
- Green (fresh natural)
- Purple (creative modern)
- Orange (energetic)
- Slate (sophisticated neutral)
The component is fully interactive and provides a great user experience for theme selection with immediate visual feedback.
import { ThemePreset } from "../types/theme"; export const defaultPresets: Record<string, ThemePreset> = { "modern-minimal": { label: "Modern Minimal", styles: { light: { background: "#ffffff", foreground: "#333333", card: "#ffffff", "card-foreground": "#333333", popover: "#ffffff", "popover-foreground": "#333333", primary: "#3b82f6", "primary-foreground": "#ffffff", secondary: "#f3f4f6", "secondary-foreground": "#4b5563", muted: "#f9fafb", "muted-foreground": "#6b7280", accent: "#e0f2fe", "accent-foreground": "#1e3a8a", destructive: "#ef4444", "destructive-foreground": "#ffffff", border: "#e5e7eb", input: "#e5e7eb", ring: "#3b82f6", "chart-1": "#3b82f6", "chart-2": "#2563eb", "chart-3": "#1d4ed8", "chart-4": "#1e40af", "chart-5": "#1e3a8a", radius: "0.375rem", sidebar: "#f9fafb", "sidebar-foreground": "#333333", "sidebar-primary": "#3b82f6", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#e0f2fe", "sidebar-accent-foreground": "#1e3a8a", "sidebar-border": "#e5e7eb", "sidebar-ring": "#3b82f6", "font-sans": "Inter, sans-serif", "font-serif": "Source Serif 4, serif", "font-mono": "JetBrains Mono, monospace", }, dark: { background: "#171717", foreground: "#e5e5e5", card: "#262626", "card-foreground": "#e5e5e5", popover: "#262626", "popover-foreground": "#e5e5e5", primary: "#3b82f6", "primary-foreground": "#ffffff", secondary: "#262626", "secondary-foreground": "#e5e5e5", muted: "#262626", "muted-foreground": "#a3a3a3", accent: "#1e3a8a", "accent-foreground": "#bfdbfe", destructive: "#ef4444", "destructive-foreground": "#ffffff", border: "#404040", input: "#404040", ring: "#3b82f6", "chart-1": "#60a5fa", "chart-2": "#3b82f6", "chart-3": "#2563eb", "chart-4": "#1d4ed8", "chart-5": "#1e40af", radius: "0.375rem", sidebar: "#171717", "sidebar-foreground": "#e5e5e5", "sidebar-primary": "#3b82f6", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#1e3a8a", "sidebar-accent-foreground": "#bfdbfe", "sidebar-border": "#404040", "sidebar-ring": "#3b82f6", }, }, },twitter: { label: "Twitter", createdAt: "2025-04-24", styles: { light: { background: "#ffffff", foreground: "#0f1419", card: "#f7f8f8", "card-foreground": "#0f1419", popover: "#ffffff", "popover-foreground": "#0f1419", primary: "#1e9df1", "primary-foreground": "#ffffff", secondary: "#0f1419", "secondary-foreground": "#ffffff", muted: "#E5E5E6", "muted-foreground": "#0f1419", accent: "#E3ECF6", "accent-foreground": "#1e9df1", destructive: "#f4212e", "destructive-foreground": "#ffffff", border: "#e1eaef", input: "#f7f9fa", ring: "#1da1f2", "chart-1": "#1e9df1", "chart-2": "#00b87a", "chart-3": "#f7b928", "chart-4": "#17bf63", "chart-5": "#e0245e", sidebar: "#f7f8f8", "sidebar-foreground": "#0f1419", "sidebar-primary": "#1e9df1", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#E3ECF6", "sidebar-accent-foreground": "#1e9df1", "sidebar-border": "#e1e8ed", "sidebar-ring": "#1da1f2", "font-sans": "Open Sans, sans-serif", "font-serif": "Georgia, serif", "font-mono": "Menlo, monospace", radius: "1.3rem", "shadow-color": "rgba(29,161,242,0.15)", "shadow-opacity": "0", "shadow-blur": "0px", "shadow-spread": "0px", "shadow-offset-x": "0px", "shadow-offset-y": "2px", }, dark: { background: "#000000", foreground: "#e7e9ea", card: "#17181c", "card-foreground": "#d9d9d9", popover: "#000000", "popover-foreground": "#e7e9ea", primary: "#1c9cf0", "primary-foreground": "#ffffff", secondary: "#f0f3f4", "secondary-foreground": "#0f1419", muted: "#181818", "muted-foreground": "#72767a", accent: "#061622", "accent-foreground": "#1c9cf0", destructive: "#f4212e", "destructive-foreground": "#ffffff", border: "#242628", input: "#22303c", ring: "#1da1f2", "chart-1": "#1e9df1", "chart-2": "#00b87a", "chart-3": "#f7b928", "chart-4": "#17bf63", "chart-5": "#e0245e", sidebar: "#17181c", "sidebar-foreground": "#d9d9d9", "sidebar-primary": "#1da1f2", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#061622", "sidebar-accent-foreground": "#1c9cf0", "sidebar-border": "#38444d", "sidebar-ring": "#1da1f2", "shadow-color": "rgba(29,161,242,0.25)", }, }, }, vercel: { label: "Vercel", createdAt: "2025-04-13", styles: { light: { background: "oklch(0.99 0 0)", foreground: "oklch(0 0 0)", card: "oklch(1.00 0 0)", "card-foreground": "oklch(0 0 0)", popover: "oklch(0.99 0 0)", "popover-foreground": "oklch(0 0 0)", primary: "oklch(0 0 0)", "primary-foreground": "oklch(1.00 0 0)", secondary: "oklch(0.94 0 0)", "secondary-foreground": "oklch(0 0 0)", muted: "oklch(0.97 0 0)", "muted-foreground": "oklch(0.44 0 0)", accent: "oklch(0.94 0 0)", "accent-foreground": "oklch(0 0 0)", destructive: "oklch(0.63 0.19 23.03)", "destructive-foreground": "oklch(1.00 0 0)", border: "oklch(0.92 0 0)", input: "oklch(0.94 0 0)", ring: "oklch(0 0 0)", "chart-1": "oklch(0.81 0.17 75.35)", "chart-2": "oklch(0.55 0.22 264.53)", "chart-3": "oklch(0.72 0 0)", "chart-4": "oklch(0.92 0 0)", "chart-5": "oklch(0.56 0 0)", sidebar: "oklch(0.99 0 0)", "sidebar-foreground": "oklch(0 0 0)", "sidebar-primary": "oklch(0 0 0)", "sidebar-primary-foreground": "oklch(1.00 0 0)", "sidebar-accent": "oklch(0.94 0 0)", "sidebar-accent-foreground": "oklch(0 0 0)", "sidebar-border": "oklch(0.94 0 0)", "sidebar-ring": "oklch(0 0 0)", "font-sans": "Geist, sans-serif", "font-serif": "Georgia, serif", "font-mono": "Geist Mono, monospace", radius: "0.5rem", "shadow-color": "hsl(0 0% 0%)", "shadow-opacity": "0.18", "shadow-blur": "2px", "shadow-spread": "0px", "shadow-offset-x": "0px", "shadow-offset-y": "1px", }, dark: { background: "oklch(0 0 0)", foreground: "oklch(1.00 0 0)", card: "oklch(0.14 0 0)", "card-foreground": "oklch(1.00 0 0)", popover: "oklch(0.18 0 0)", "popover-foreground": "oklch(1.00 0 0)", primary: "oklch(1.00 0 0)", "primary-foreground": "oklch(0 0 0)", secondary: "oklch(0.25 0 0)", "secondary-foreground": "oklch(1.00 0 0)", muted: "oklch(0.23 0 0)", "muted-foreground": "oklch(0.72 0 0)", accent: "oklch(0.32 0 0)", "accent-foreground": "oklch(1.00 0 0)", destructive: "oklch(0.69 0.20 23.91)", "destructive-foreground": "oklch(0 0 0)", border: "oklch(0.26 0 0)", input: "oklch(0.32 0 0)", ring: "oklch(0.72 0 0)", "chart-1": "oklch(0.81 0.17 75.35)", "chart-2": "oklch(0.58 0.21 260.84)", "chart-3": "oklch(0.56 0 0)", "chart-4": "oklch(0.44 0 0)", "chart-5": "oklch(0.92 0 0)", sidebar: "oklch(0.18 0 0)", "sidebar-foreground": "oklch(1.00 0 0)", "sidebar-primary": "oklch(1.00 0 0)", "sidebar-primary-foreground": "oklch(0 0 0)", "sidebar-accent": "oklch(0.32 0 0)", "sidebar-accent-foreground": "oklch(1.00 0 0)", "sidebar-border": "oklch(0.32 0 0)", "sidebar-ring": "oklch(0.72 0 0)", "font-sans": "Geist, sans-serif", "font-serif": "Georgia, serif", "font-mono": "Geist Mono, monospace", }, }, }, mono: { label: "Mono", createdAt: "2025-04-20", styles: { light: { background: "#ffffff", foreground: "#0a0a0a", card: "#ffffff", "card-foreground": "#0a0a0a", popover: "#ffffff", "popover-foreground": "#0a0a0a", primary: "#737373", "primary-foreground": "#fafafa", secondary: "#f5f5f5", "secondary-foreground": "#171717", muted: "#f5f5f5", "muted-foreground": "#717171", accent: "#f5f5f5", "accent-foreground": "#171717", destructive: "#e7000b", "destructive-foreground": "#f5f5f5", border: "#e5e5e5", input: "#e5e5e5", ring: "#a1a1a1", "chart-1": "#737373", "chart-2": "#737373", "chart-3": "#737373", "chart-4": "#737373", "chart-5": "#737373", sidebar: "#fafafa", "sidebar-foreground": "#0a0a0a", "sidebar-primary": "#171717", "sidebar-primary-foreground": "#fafafa", "sidebar-accent": "#f5f5f5", "sidebar-accent-foreground": "#171717", "sidebar-border": "#e5e5e5", "sidebar-ring": "#a1a1a1", "font-sans": "Geist Mono, monospace", "font-serif": "Geist Mono, monospace", "font-mono": "Geist Mono, monospace", radius: "0rem", "shadow-color": "hsl(0 0% 0%)", "shadow-opacity": "0", "shadow-blur": "0px", "shadow-spread": "0px", "shadow-offset-x": "0px", "shadow-offset-y": "1px", }, dark: { background: "#0a0a0a", foreground: "#fafafa", card: "#191919", "card-foreground": "#fafafa", popover: "#262626", "popover-foreground": "#fafafa", primary: "#737373", "primary-foreground": "#fafafa", secondary: "#262626", "secondary-foreground": "#fafafa", muted: "#262626", "muted-foreground": "#a1a1a1", accent: "#404040", "accent-foreground": "#fafafa", destructive: "#ff6467", "destructive-foreground": "#262626", border: "#383838", input: "#525252", ring: "#737373", "chart-1": "#737373", "chart-2": "#737373", "chart-3": "#737373", "chart-4": "#737373", "chart-5": "#737373", sidebar: "#171717", "sidebar-foreground": "#fafafa", "sidebar-primary": "#fafafa", "sidebar-primary-foreground": "#171717", "sidebar-accent": "#262626", "sidebar-accent-foreground": "#fafafa", "sidebar-border": "#ffffff", "sidebar-ring": "#525252", }, }, }, };
I'll create an enhanced theme picker UI that uses the provided theme presets data structure to display and allow selection between the different themes.
I've created an enhanced theme picker UI that uses the provided theme presets data structure. This component offers a comprehensive way to browse, preview, and select different themes for your application.
Key Features
Theme Selection
- Theme Grid: Displays all available themes with visual previews of their color schemes
- Color Swatches: Shows key colors for each theme (background, foreground, primary, etc.)
- Theme Metadata: Displays theme name and creation date
- Selected Theme Indicator: Clear visual feedback for the currently selected theme
Theme Preview
- Interactive Mode Toggle: Switch between light and dark mode to see how themes look in both contexts
- Live Preview: Shows a realistic UI sample with the selected theme's colors applied
- UI Elements: Demonstrates how buttons, cards, and other UI elements look with the theme
- Color Details: Expandable section showing detailed color information organized in tabs
Technical Implementation
- Type-Safe: Uses TypeScript interfaces for theme data structure
- Responsive Layout: Grid layout that adapts to different screen sizes
- Organized Data: Separates theme data into a dedicated file
- Interactive Components: Uses shadcn/ui components like Tabs, Cards, and Tooltips 1
Visual Design
- Clean Interface: Professional, well-organized layout
- Color Visualization: Multiple ways to preview theme colors
- Detailed Information: Shows font family and border radius information when available
- Organized Color Details: Categorized into Main, UI, and Chart colors for easier browsing
This theme picker provides a comprehensive way for users to explore and select from your predefined themes, with accurate visual representation of how each theme will look when applied to your application.