Live Preview Style Select

auto

Installation

Usage

import { LivePreviewStyleSelect } from "@/components/ruixen/live-preview-style-select";
 
const themeOptions = [
  {
    value: "modern",
    label: "Modern",
    description: "Clean and minimal design",
    previewClass: "bg-gradient-to-r from-blue-500 to-purple-600",
  },
  {
    value: "classic",
    label: "Classic",
    description: "Traditional and elegant",
    previewStyle: { backgroundColor: "#8B4513", color: "white" },
  },
  {
    value: "neon",
    label: "Neon",
    description: "Bright and vibrant colors",
    previewClass: "bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500",
  },
];
 
export function ThemeSelector() {
  return (
    <LivePreviewStyleSelect
      options={themeOptions}
      label="Choose Theme"
      placeholder="Select a theme..."
      onChange={(value) => console.log("Selected theme:", value)}
      showDescription={true}
    />
  );
}

Props

Prop	Type	Default	Description
`options`	`StyleOption[]`	-	Array of style options with preview configurations
`label`	`string`	-	Optional label for the select group
`placeholder`	`string`	`"Select a style..."`	Placeholder text when no option is selected
`onChange`	`(value: string) => void`	-	Callback function when selection changes
`defaultValue`	`string`	-	Default selected value
`previewHeight`	`string \| number`	`"160px"`	Height of the preview area
`previewBgClass`	`string`	`"bg-gray-100 dark:bg-gray-800"`	Background class for preview area
`showDescription`	`boolean`	`true`	Whether to show option descriptions
`selectWidth`	`string \| number`	`"250px"`	Width of the select component

StyleOption

Property	Type	Description
`value`	`string`	The value of the option
`label`	`string`	Display text for the option
`previewClass`	`string`	Optional Tailwind classes for preview styling
`previewStyle`	`React.CSSProperties`	Optional inline styles for preview
`description`	`string`	Optional description text

Examples

Basic Usage

auto

Open in

Color Themes

const colorOptions = [
  {
    value: "ocean",
    label: "Ocean Blue",
    description: "Deep blue ocean vibes",
    previewClass: "bg-gradient-to-br from-blue-400 to-blue-800",
  },
  {
    value: "sunset",
    label: "Sunset Orange",
    description: "Warm sunset colors",
    previewClass: "bg-gradient-to-br from-orange-400 to-red-600",
  },
  {
    value: "forest",
    label: "Forest Green",
    description: "Natural forest tones",
    previewClass: "bg-gradient-to-br from-green-400 to-green-800",
  },
]
 
<LivePreviewStyleSelect
  options={colorOptions}
  placeholder="Choose color theme..."
  previewHeight="120px"
/>

Typography Styles

const fontOptions = [
  {
    value: "serif",
    label: "Serif",
    description: "Traditional serif font",
    previewStyle: {
      fontFamily: "Georgia, serif",
      fontSize: "18px",
      fontWeight: "400"
    },
  },
  {
    value: "sans",
    label: "Sans Serif",
    description: "Modern sans-serif font",
    previewStyle: {
      fontFamily: "Arial, sans-serif",
      fontSize: "18px",
      fontWeight: "500"
    },
  },
  {
    value: "mono",
    label: "Monospace",
    description: "Code-style monospace font",
    previewStyle: {
      fontFamily: "Courier New, monospace",
      fontSize: "16px",
      fontWeight: "400"
    },
  },
]
 
<LivePreviewStyleSelect
  options={fontOptions}
  placeholder="Select font style..."
  previewBgClass="bg-white dark:bg-gray-900 border"
  showDescription={false}
/>

Button Styles

const buttonOptions = [
  {
    value: "solid",
    label: "Solid",
    description: "Solid background button",
    previewClass: "bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700",
  },
  {
    value: "outline",
    label: "Outline",
    description: "Outlined button style",
    previewClass: "border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50",
  },
  {
    value: "ghost",
    label: "Ghost",
    description: "Minimal ghost button",
    previewClass: "text-blue-600 hover:bg-blue-50 rounded-lg",
  },
]
 
<LivePreviewStyleSelect
  options={buttonOptions}
  placeholder="Choose button style..."
  previewHeight="80px"
  selectWidth="300px"
/>